React Native - модал отображается на другом экране FlatList - PullRequest
Новая
       30

React Native - модал отображается на другом экране FlatList

0 голосов
/ 17 мая 2018

У меня проблемы с модалом, потому что у меня есть некоторые на «экране Datails» с Flatlist, и на самом деле все работает нормально.Но дело в том, что перед тем, как перейти к моему «Экрану данных», пользователь сначала увидит «Экран категорий», и вот в чем проблема.Потому что я не набирал модал на своем «экране категории», но всякий раз, когда я нажимаю на любую кнопку, там показывается модал, это выглядит очень сложно для меня.

Вот мой код

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

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

1 Ответ

0 голосов
/ 17 мая 2018

В вашем details.js вы сохранили showModal: true в самом конструкторе.

Измените его на false и делайте его истинным, когда вы хотите показать модальное значение.

Полагаю, вы должны сделать это правдой после того, как успешно загрузили данные. то есть держать в fetchData()

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