使用 Firebase Auth 无法在 React 导航 V5 中移动下一个屏幕

Question

我正在使用带有 Firebase 集成的 React 导航版本 5。使用它我正在尝试进行身份验证流程。我几乎完成了一个签名流程，它运行完美，但是在 Firebase 登录后它不会呈现，它仍然在移动设备中的相同登录页面中。 PFB 我的 AppRouter 页面的代码。

import React, { Component, useEffect } from 'react'
import { View, Platform, TouchableOpacity, Text, Image, Dimensions, Slider, Button, ActivityIndicator, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';
import RootStackScreen from '../Router/RootStackScreen'
import HomeStackScreen from './TabScreens'
import AsyncStorage from '@react-native-community/async-storage';
import { Authcontext } from '../Components/context'
import auth from '@react-native-firebase/auth';
import Home from '../Pages/OnboardingScreen/Home';
var { height, width } = Dimensions.get('window')
const Drawer = createDrawerNavigator();
const AppRouter = ({navigation}) => {
    const initialoginState = {
        isLoading: true,
        email: null,
        userToken: null
    };
    const loginReducer = (prevState, action) => {
        switch (action.type) {
            case 'RETRIVE_TOKEN':
                return {
                    ...prevState,
                    userToken: action.token,
                    isLoading: false,
                };
            case 'LOGIN':
                return {
                    ...prevState,
                    email: action.id,
                    userToken: action.token,
                    isLoading: false,
                };
            case 'LOGOUT':
                return {
                    ...prevState,
                    email: null,
                    userToken: null,
                    isLoading: false,
                };
            case 'REGISTER':
                return {
                    ...prevState,
                    email: action.id,
                    userToken: action.token,
                    isLoading: false,
                };
        }
    }
    const [loginState, dispatch] = React.useReducer(loginReducer, initialoginState)
    const authContext = React.useMemo(() => ({
        signIn: async (email, password) => {
            let userToken;
            userToken = null;
            if (email !== '' && password !== '') {
                auth().signInWithEmailAndPassword(email, password)
                    .then(async (success) => {
                        try {
                            await AsyncStorage.setItem('userToken', success.user.uid)
                        } catch (e) {
                            console.log(e)
                            Alert.alert('Shopping', e)
                        }
                    })
                    .catch(error => {
                        if (error.code === 'auth/email-already-in-use') {
                            Alert.alert('Shopping', 'That email address is already in use!')
                        }
                        if (error.code === 'auth/invalid-email') {
                            Alert.alert('Shopping', 'That email address is invalid!')
                        }
                        Alert.alert('Shopping', error.code)
                    });
            } else {
                Alert.alert('Shopping', 'Invalid Email / Password')
            }
            dispatch({ type: 'LOGIN', id: email, token: userToken , isLoading: false})
        },
        signUp: () => {
         //Pending
        },
        signOut: async () => {
            try {
                await AsyncStorage.removeItem('userToken')
            } catch (e) {
                console.log(e)
            }
            dispatch({ type: 'LOGOUT' })
        },
    }), [])
    useEffect(() => {
        setTimeout(async () => {
            let userToken;
            userToken = null;
            try {
                userToken = await AsyncStorage.getItem('userToken')
                console.log('token', userToken)
            } catch (e) {
                console.log(e)
            }
            dispatch({ type: 'RETRIVE_TOKEN', token: userToken })
        }, 1000)
    }, []);
    if (loginState.isLoading) {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <ActivityIndicator size="large" color="black" />
            </View>
        )
    }
    return (
        <Authcontext.Provider value={authContext}>
            <NavigationContainer>
                {loginState.userToken !== null ?
                    (
                        <Drawer.Navigator initialRouteName="Home">
                            <Drawer.Screen name="Home" component={HomeStackScreen} />  //Dashboard Screens
                        </Drawer.Navigator>
                    ) :
                    <RootStackScreen />  //Authentication Screens
                }
            </NavigationContainer>
        </Authcontext.Provider>
    )
}
export default AppRouter

提前致谢

Answer 1

然后您需要调度登录内部 signInWithEmailAndPassword 否则 userToken 由于异步而始终为空。

const authContext = React.useMemo(() => ({
        signIn: async (email, password) => {
            let userToken;
            userToken = null;
            if (email !== '' && password !== '') {
                auth().signInWithEmailAndPassword(email, password)
                    .then(async (success) => {
                     dispatch({ type: 'LOGIN', id: email, token: userToken , isLoading: false})
                        try {
                            await AsyncStorage.setItem('userToken', success.user.uid)
                        } catch (e) {
                            console.log(e)
                            Alert.alert('Shopping', e)
                        }
                    })
                    .catch(error => {
                        if (error.code === 'auth/email-already-in-use') {
                            Alert.alert('Shopping', 'That email address is already in use!')
                        }
                        if (error.code === 'auth/invalid-email') {
                            Alert.alert('Shopping', 'That email address is invalid!')
                        }
                        Alert.alert('Shopping', error.code)
                    });
            } else {
                Alert.alert('Shopping', 'Invalid Email / Password')
            }
            
        },
        signUp: () => {
         //Pending
        },
        signOut: async () => {
            try {
                await AsyncStorage.removeItem('userToken')
            } catch (e) {
                console.log(e)
            }
            dispatch({ type: 'LOGOUT' })
        },
    }), [])