将导航onclick转换为自定义组件

Question

嗨，我有一个react native / EXPO项目，其中我有一个登录页面和asyncstorage，而当您通过asyncstorage函数登录时，登录页面将隐藏并且您具有HomeScreen组件 但是在登录页面中，如果您单击登录，那么我不知道如何导航到HomeScreen。然后，我必须关闭应用程序并再次打开，并在构造函数中使用asyncstorage进行功能，并加载并转到HomeScreen

constructor(props) {
    super(props);
    this.state = ({
        isLoggedIn: 0,
        isLoading: 0
    })
    this.tryLogin();
}

tryLogin = async () => {
    let logged = 0;

    if(await AsyncStorage.getItem('isLoggedIn') === '1') {
        let email = await AsyncStorage.getItem('email');
        let password = await AsyncStorage.getItem('password');
        try {
            firebase.auth().signInWithEmailAndPassword(email, password).then(this.onLoginSuccess.bind(this))
        } catch (error) {
            await AsyncStorage.setItem('isLoggedIn', '0');
            logged = 0;
        }
    }
    this.setState({
        isLoading: 0,
    });
}

onLoginSuccess() {
    this.setState({
        email: '', password: '', error: '', isLoggedIn: 1
    })
}


render() {
    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>
    );
    return (
        <NavigationContainer>
            <Stack.Navigator>
                {this.state.isLoggedIn ? (
                    <>
                        <Stack.Screen name="Home" component={HomeScreen}/>
                        <Stack.Screen name="Settings" component={NotificationsScreen}/>
                    </>
                ) : (
                    <Stack.Screen name="SignIn" component={LoginScreen}/>
                )}
            </Stack.Navigator>
        </NavigationContainer>
    );
}

}

但在登录屏幕中：

    constructor(props) {
    super(props);
    this.state = ({
        email: '',
        password: ''
    })
}

signUpUser = (email,password) =>{
    try {
        if (this.state.password.length < 6){
            alert("Please enter at least 6 characters")
            return;
        }
        firebase.auth().createUserWithEmailAndPassword(email,password)
    }
    catch (error) {
        console.log(error.toString())
    }

};

loginUser = (email,password) =>{
    try{
        firebase.auth().signInWithEmailAndPassword(email,password).then(function (user) {
            AsyncStorage.setItem('email',email);
            AsyncStorage.setItem('password',password);
            AsyncStorage.setItem('isLoggedIn','1');
            console.log(user);
            navigation.emit({
                type: 'transitionStart',
                data: { blurring: false },
                target: HomeScreen,
            });

        })
    }
    catch (error) {
        console.log(error.toString())
    }

};

当您单击按钮时，我不知道如何路由