登录子组件后如何将状态传递给父组件

时间:2020-03-16 14:12:02

标签: reactjs react-native react-navigation

您好,我正在寻找解决方案以将状态从子组件传递给父组件,我被困住了。

在登录屏幕上单击“按钮”后,我试图从LoginScreen传递到App组件,这是堆栈导航

堆栈导航组件:

if (this.state.isLoading) {
        // We haven't finished checking for the token yet
        return <ActivityIndicator />;
    }

    return (
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown: false
                }}
            >
                        {this.state.isLoggedIn == 0 ? (
                    // No token found, user isn't signed in
                    <Stack.Screen
                        name="SignIn"
                        component={LoginScreen}

                    />
                ) : (
                    <Stack.Screen name="Home" component={HomeScreen} />
                )}
            </Stack.Navigator>
        </NavigationContainer>
    );

和LoginScreen:

<KeyboardAvoidingView behavior={"padding"}
                                      keyboardVerticalOffset={
                                            Platform.select({
                                                ios: () => 70,
                                                android: () => 70
                                            })()
                                      }
                                      style={styles.bottomMain}
                >
                    <View style={styles.loginInput}>
                        <TextInput style={{margin: 10, fontSize: 20}}
                                   placeholder='Email'
                                   onChangeText={(email)=>this.setState({email})}
                                   textContentType='emailAddress'
                                   autoCapitalize='none'
                                   autoCorrect={false}
                        />
                    </View>
                    <View style={styles.passwordInput}>
                        <TextInput style={{margin: 10, fontSize: 20}}
                                   placeholder='Password'
                                   onChangeText={(password)=>this.setState({password})}
                                   secureTextEntry={true}
                                   textContentType='password'
                                   autoCapitalize='none'
                                   autoCorrect={false}
                        />
                    </View>
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity onPress={()=>this.loginUser(this.state.email, this.state.password)}>
                            <View style={styles.loginButton}>
                                <Text>Zaloguj się</Text>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={()=>this.signUpUser(this.state.email, this.state.password)}>
                            <View style={styles.registerButton}>
                                <Text>Zarejestruj się</Text>
                            </View>
                        </TouchableOpacity>
                    </View>

                </KeyboardAvoidingView>

我也有asyncstorage,此存储尝试在启动应用后登录,您可以通过asyncstorage登录。但是通过单击LoginScreen中子项上的Login按钮,我无法推送到state.isLoggedIn = 1

的应用程序组件。

0 个答案:

没有答案