Question

我遇到了模式问题，因为我在Flatils的“Datails屏幕”中有一些它实际上工作正常。但问题是，在导航到我的“Datails屏幕”之前，用户将首先看到“类别屏幕”，这里就是问题所在。因为我没有在“类别屏幕”中输入任何模态，但每当我点击其中的任何一个按钮时，显示模态，对我来说这看起来非常棘手。

这是我的代码

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屏幕上

1 个答案: