React Native - Modal 显示在不同的 FlatList 屏幕上

Question

我在使用模态时遇到问题，因为我在 "Datails screen" 中有一些 Flatlist 并且它工作正常，实际上。但问题是，在导航到我的 "Datails screen" 之前，用户将首先看到 "Category screen"，这就是问题所在。因为我没有在我的 "Category screen" 中输入任何模态，但是每当我点击其中的任何按钮时，模态就会显示出来，这对我来说看起来很棘手。

这是我的代码

Details.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);

categories.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);

Answer 1

在您的 details.js 中，您将 showModal: true 保留在构造函数本身中。

将其更改为 false，并在您想要显示模态时将其设置为 true。

我想你应该在成功获取数据后将其设置为真。即保持在 fetchData()

 this.setState({data: category_Cat, showModal:true});

React Native - Modal 显示在不同的 FlatList 屏幕上

React Native - Modal is showing on a different FlatList screen

mobile

android

modal-dialog

react-native

react-native-flatlist