Question

我有一个旋转器进度条，当用户输入并且一旦完成后显示旋转轮，它会隐藏。我正在使用一个状态，当加载视图时由于可见性状态设置为false而隐藏了spinner，当点击登录按钮时将其设置为true，直到它工作但是在结果之后，我想隐藏它没有工作。这是代码

export default class LoginScreen extends Component {
static navigationOptions = {
    title: 'Login',
    headerTintColor:'black'
};
constructor(props) {
    super(props);
    this.state = { loginText: 'username',pwdText:'password',loading:false };

    this.onLogin = this.onLogin.bind(this);

}
onLogin() {
    this.setState({
        loading: true
    });



    var params = 'username=';
    params = params.concat(this.state.loginText,'&password=');
    params = params.concat(this.state.pwdText);


    console.log(params);

    fetch("http://example.com/app/loginUser.php", {
        method: 'POST',
        headers: new Headers({
            'Content-Type': 'application/x-www-form-urlencoded', // <-- Specifying the Content-Type
        }),
        body: params // <-- Post parameters
    })
        .then((response) => response.json())
        .then((responseJson) => {

            console.log(responseJson.result);
            if(responseJson.result != "false") {

                this.setState({
                    loading: false
                });

                Alert.alert(
                    'Info',
                    'Login successful.',
                    [
                        {text: 'OK', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
                    ],
                    { cancelable: false }
                )
            }
            else {
                Alert.alert(
                    'Info',
                    'Unable to login.',
                    [
                        {text: 'OK', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
                    ],
                    { cancelable: false }
                )
                this.setState({
                    loading: false
                });

            }
        })
        .catch((error) =>{
            console.error(error);
        });


}
render() {
    const { navigate } = this.props.navigation;
    return (
        <ImageBackground
            source={require('./images/marble.jpg')}
            style={styles.backgroundImage}>

            <View style={styles.container}>
                <Spinner visible={this.state.loading} textContent={"Loading..."} textStyle={{color: '#FFF'}} />

                <Image style = {styles.logoFit} resizeMode="contain"  source={require('./images/Logo1.png')}/>

                <View>
                    <TextInput clearTextOnFocus={true} style={styles.textInput} value={this.state.loginText }
                               onChangeText={(textInputValue1) => this.setState({loginText:textInputValue1})}></TextInput>

                    <TextInput clearTextOnFocus={true} style={styles.textInput} value={this.state.pwdText}
                               onChangeText={(textInputValue2) => this.setState({pwdText:textInputValue2})}></TextInput>
                </View>
                <View style={styles.buttonSection}>
                    <TouchableOpacity onPress = {this.onLogin}>
                        <View style = { styles.donebutton}>ß
                            <Text style = {{color: 'white'}}>Login</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>

        </ImageBackground>
    );
}

}

Answer 1

检查状态是否已设定 this.setState（{loading：false}，（）=＆gt; {console.log（this.state.loading）}）;

如果未设置，请尝试forceUpdate this.setState（{loading：false}，（）=＆gt; {this.forceUpdate（）}）;

Answer 2

正如@RaviRaj在其中一条评论中所建议的那样，@ Pramod在上面的答案中提出建议，我检查了状态并发现状态已经设定。然后，因为Spinner是模态的，而Alert也是模态的（这就是我的想法）它正在弄乱。删除Alert后，它开始按预期工作。这里报告了一个问题https://github.com/facebook/react-native/issues/11084

无法隐藏/更改反应本机组件的可见性

2 个答案: