firebase.auth(). signout()在点击logout后没有重定向回mainNav

Question

我正在使用react native和firebase构建一个简单的react native应用程序，并在尝试注销用户时面临一个小问题，目前当注销按下时，它不会重定向回登录页面。

<Text>Home Screen</Text>
<Button title="Sign Out" onPress={signOut} />

<<p>Signout函数/strong>

const signOut = async () => {
firebase.auth().signOut();
}

mainNav

const MainNav : FC = () => {
const [user, setUser] = useState<firebase.User | null>(null);
const bootstrap = () => {
firebase.auth().onAuthStateChanged(_user => {
if(_user){
setUser(_user)
}
})
}

useEffect(() => {
bootstrap()
}, [])

return (
<NavigationContainer>
{user !== null ? <AppStack /> : <AuthStack />}
</NavigationContainer>
)
}
export default MainNav;

authstack

import React, { FC } from 'react';
import {createStackNavigator} from '@react-navigation/stack'
import {SignUp, Login} from '../screens'
const {Navigator, Screen} = createStackNavigator();
const AuthStack : FC = () => {
return (
<Navigator screenOptions={{headerShown: false}}>
<Screen name="signup" component={SignUp}/>
<Screen name="login" component={Login}/>
</Navigator>
)
} 
export default AuthStack;

appstack

const AppStack : FC = () => {
return (
<Navigator screenOptions={{headerShown: false}}>
<Screen name="home" component={Home}/>
<Screen name="dashboard" component={Dashboard}/>
</Navigator>
)
} 
export default AppStack;

Answer 1

这是因为您实际上忽略了注销事件:

const bootstrap = () => {
firebase.auth().onAuthStateChanged(_user => {
if(_user) { // <-- this will be null when logged out!
setUser(_user)
}
})
}

此外，您不应该包装onAuthStateChanged函数并忽略其返回值(它是退订函数)，就像您在这里:

useEffect(() => {
bootstrap()
}, [])

你应该使用(或它的变体):

useEffect(() => firebase.auth().onAuthStateChanged(_user => setUser(_user)), [])

上面的行使user更新为firebase.auth()的最新值，并在组件卸载时正确地取消订阅侦听器。