React Native-模式显示在不同的平面列表屏幕上

I'am having trouble with modal,因为我在一个带有扁平列表的“Datails屏幕”中有一些,实际上它工作得很好。但问题是,在导航到我的“Datails屏幕”之前,用户首先会看到“Category屏幕”,这就是问题所在。因为我没有在“分类屏幕”上键入任何模式,但每当我点击其中的任何按钮时,都会显示一个模式,这对我来说非常棘手。

这是我的密码

详细信息。js (这是我要显示模式的唯一屏幕)

import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl, Dimensions, Modal
} from 'react-native';

export default class Details extends Component {
    static navigationOptions = {
        title: ''
    };

    constructor()
    {
        super ()
        this.state = {
            showModal: true
        }
    }

    state = {
        data: [],
        refreshing: false
    };


    fetchData = async() => {
        const { params } = this.props.navigation.state;
        const response_Cat = await fetch('http://192.168.254.100:3307/categories/' + params.id);
        const category_Cat = await response_Cat.json();
        this.setState({data: category_Cat});
    };
    componentDidMount() {
        this.fetchData();
    };

    _onRefresh() {
        this.setState({ refreshing: true });
        this.fetchData().then(() => {
            this.setState({ refreshing: false })
        });
    };

  render() {
    const { params } = this.props.navigation.state;
      return (
          <View style = { styles.container }>
              <FlatList
                data = { this.state.data }
                renderItem = {({ item }) =>
                    <TouchableOpacity style = { styles.buttonContainer }>
                        <Text style = { styles.buttonText }
                        onPress = { () => { this.setState({showModal:true}) } }>{ item.menu_desc } { item.menu_price }</Text>
                    </TouchableOpacity>
                }
                keyExtractor={(item, index) => index.toString()}
                /*refreshControl = {
                    <RefreshControl
                        refreshing = { this.state.refreshing }
                        onRefresh = { this._onRefresh.bind(this) }
                    />
                }*/
              />

            <View>
            <Modal
                onRequestClose={() => console.warn('no warning')}
                visible={this.state.showModal}
            >
                <TouchableOpacity style = { styles.buttonContainer }>
                    <Text style = { styles.buttonText }
                    onPress = { () => { this.setState({ showModal:false }) } }>Hello</Text>
                </TouchableOpacity> 
            </Modal>
            </View>

          </View>
      );
  }

}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
    },
    pageName:{
        margin:10,fontWeight:'bold',
        color:'#000', textAlign:'center'
    },
    productBox:{
        padding:5,margin:10,borderColor:'orange',borderBottomWidth:1
    },
    price:{
        padding:5, color:'orange',fontWeight:'bold',textAlign:'center'
    },
    proName:{
        padding:5,color:'blue',textAlign:'center'
    },
    buttonContainer: {
        backgroundColor: '#f7c744',
        paddingVertical: 10,
        borderRadius: 30,
        marginBottom: 10,
    },
    buttonText: {
        textAlign: "center",
        color: 'rgb(32, 53, 70)',
        fontWeight: 'bold',
        fontSize: 18
    },
    modalView: {
        backgroundColor: "#aaa",
        height: 150,
        justifyContent: 'center',
        alignItems: 'center'
    },
    closeText: {
        backgroundColor: '#333',
        color: '#bbb',
        padding: 5,
        margin: 20
    }
})

//AppRegistry.registerComponent('Details', () => Details);

类别。js (我想这是我没有键入任何模式代码的页面)

import React, {Component} from 'react';
import {Text, TouchableHighlight, View,
StyleSheet, Platform, FlatList, AppRegistry,
TouchableOpacity, RefreshControl
} from 'react-native';

export default class Categories extends Component {    
    state = {
        data: [],
        refreshing: false
    };

    fetchData = async() => {
        const { params } = this.props.navigation.state;
        const response_Cat = await fetch('http://192.168.254.100:3307/categories/');
        const category_Cat = await response_Cat.json();
        this.setState({data: category_Cat});
    };
    componentDidMount() {
        this.fetchData();
    };

    _onRefresh() {
        this.setState({ refreshing: true });
        this.fetchData().then(() => {
            this.setState({ refreshing: false })
        });
    }

  render() {
    const { params } = this.props.navigation.state;
      return (
          <View style = { styles.container }>
              <FlatList
                data = { this.state.data }
                renderItem = {({ item }) =>
                    <TouchableOpacity style = {styles.buttonContainer}>
                        <Text style = {styles.buttonText}
                        onPress = { () => this.props.navigation.navigate('Details', { id: item.cat_id }) }>{ item.cat_name }</Text>
                    </TouchableOpacity>
                }
                keyExtractor={(item, index) => index.toString()}

                refreshControl = {
                    <RefreshControl
                        refreshing = { this.state.refreshing }
                        onRefresh = { this._onRefresh.bind(this) }
                    />
                }
              />
          </View>
      );
  }

}

const styles = StyleSheet.create({
    container:{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
    },
    pageName:{
        margin:10,fontWeight:'bold',
        color:'#000', textAlign:'center'
    },
    productBox:{
        padding:5,margin:10,borderColor:'orange',borderBottomWidth:1
    },
    price:{
        padding:5, color:'orange',fontWeight:'bold',textAlign:'center'
    },
    proName:{
        padding:5,color:'blue',textAlign:'center'
    },
    buttonContainer: {
        backgroundColor: '#f7c744',
        paddingVertical: 10,
        borderRadius: 30,
        marginBottom: 10,
    },
    buttonText: {
        textAlign: "center",
        color: 'rgb(32, 53, 70)',
        fontWeight: 'bold',
        fontSize: 18
    },

})

AppRegistry.registerComponent('Categories', () => Categories);