在setState为false后,不响应本机模态

时间:2018-11-25 15:33:30

标签: react-native

我已将模式可见性设置为false,但仍显示。我不知道是什么原因导致了这个问题。这是我在loading.js上的代码。 我主要使用此组件,当setState为false时会发生什么,但是在关闭simolator并重新启动设备后,它才关闭

import React,{Component} from 'react';
import PropTypes from 'prop-types'
import {View, Image, Modal, StyleSheet, Text} from "react-native";

export default class Loader extends Component{
    render(){
        const {animationType,modalVisible}=this.props;
        return(
            <Modal

                animationType={animationType}
                transparent={true}
                visible={modalVisible}>
                <View style={styles.wrapper}>
                    <View style={styles.loaderContainer}>
                        <Image
                            source={require('../img/loading.gif')}
                            style={styles.loaderImage}/>

                    </View>

                </View>

            </Modal>

        )
    }
}

Loader.propTypes={
    animationType:PropTypes.string.isRequired,
    modalVisible:PropTypes.bool.isRequired
}
 这个主要的阶级
 export default class ForoshRah extends Component {
        constructor() {
            super();
            I18nManager.forceRTL(true);
            this.state = {
                image: null,
                images: null,
                loadingVisible:false,
            };
            this.onValueChange2=this.onValueChange2.bind(this);
            this.OnSubmiteData=this.OnSubmiteData.bind(this);
        }
        onValueChange2(value: string) {
            this.setState({
                Field: value,
            });
        }
        async OnSubmiteData(){
            this.setState({loadingVisible:true})
            let token = await    AsyncStorage.getItem('token',token);
            let response = await          
            fetch(url,{
                method:'POST',
                headers:{
                    'Content-Type':'application/json',
                    Authorization:'JWT'+" "+token,
                }

                ,body: JSON.stringify({
                    title,
     
                })
            })
            let register = await response.json();
            this.setState({userID:register.id})
            if(response.status===200){
                this.UploadImage()
            }
        }
        async UploadImage() {
    
            let token = await            AsyncStorage.getItem('token',token);
            let response = await fetch(url,{
                method:'POST',
                headers:{
                    Authorization:'JWT'+" "+token,
                },body: formData
            })
            let uimage = await response;
            console.log('user',this.state.userID);
            if(response.status=200){

                handleCloseModal = () => {
                    console.log(this.state.loadingVisible);
                    this.setState({ loadingVisible: false})
                    });
                };
    this.props.navigation.dispatch({ type: 'Navigation/BACK' })

            }else {
                setTimeout(() => {
                    this.setState({ loadingVisible: false })
                }, 100)

            }
            setTimeout(() => {
                this.setState({ loadingVisible: false })
            }, 100)
        }
        render() {
            return (
                <KeyboardAwareScrollView >

                    <View style={{marginBottom:'10%'}}>
                    <Button block  style={{backgroundColor:'#8e25a0'}}  onPress={this.OnSubmiteData.bind(this)}>
                    </Button>
                    </View>
                <Loader 
                        modalVisible={loadingVisible}
                        animationType="fade"
                />
                </KeyboardAwareScrollView>


                    );
        }
    }

onsubmitdata setState为true,并且响应返回到200 Setstate后,在代码main中将其设置为false

1 个答案:

答案 0 :(得分:3)

您不能像过去那样仅调用州名。您应该像下面这样。

<Loader 
        modalVisible={this.state.loadingVisible}
         animationType="fade"
 />