[英]Unable to move next screen in React navigation V5 Using Firebase Auth
我使用帶有 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
提前致謝
您需要發送登錄內部 signInWithEmailAndPassword,否則由於異步,userToken 始終為 null。
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' })
},
}), [])
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.