React Native Firebase 应用程序：更改 Stack.Screen onAuthStateChange

Question

I have a React-Native (sdk 46.0) Firebase app. I want to make it so that when the user is signed in, he moves from the LoginScreen to to the HomeScreen. Code is shown below.

 // screens/LoginScreen.js >>... const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const navigation = useNavigation(); const handleLogin = () => { auth.signInWithEmailAndPassword(email, password).then((userCredentials) => { const user = userCredentials.user; console.log("Logged in with:", user.email); }).catch((error) => alert(error.message)); }; ... <View style={styles.inputContainer}> <Input style={styles.input} blurOnSubmit autoCorrect={false} placeholder="jdoe@ernestkoliqi.com" placeholderTextColor="#666" value={email} onChangeText={(text) => setEmail(text)} selectTextOnFocus keyboardType="email-address" /> <Input style={styles.input} blurOnSubmit autoCorrect={false} placeholder="Password" placeholderTextColor="#666" bool={true} value={password} onChangeText={(text) => setPassword(text)} selectTextOnFocus /> </View> <View style={styles.buttonContainerModal}> <TouchableOpacity onPress={handleLogin}> <View style={styles.ctaBtnModal}> <Text style={styles.loginBtn}>Log In</Text> </View> </TouchableOpacity>... // App.js... function Home() { return <HomeScreen />; } function News() { return <NewsScreen />; } function Calendar() { return <CalendarScreen />; } function Login() { return <LoginScreen />; } function Feed() { return ( <Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ focused, color, size }) => { let iconName; if (route.name === "Home") { iconName = focused? "home": "home-outline"; } else if (route.name === "News") { iconName = focused? "newspaper": "newspaper-outline"; } else if (route.name === "Calendar") { iconName = focused? "calendar": "calendar-outline"; } return <Ionicons name={iconName} size={size} color={color} />; }, activeTintColor: Colors.primary, inactiveTintColor: "gray", showLabel: true, showIcon: true, style: { paddingBottom: 4.25, paddingTop: 4.25, }, })} > <Tab.Screen name="Home" component={Home} options={{ headerShown: false }} /> <Tab.Screen name="Calendar" component={Calendar} options={{ headerShown: false }} /> <Tab.Screen name="News" component={News} options={{ headerShown: false }} /> </Tab.Navigator> ); } const Tab = createBottomTabNavigator(); const Stack = createNativeStackNavigator(); export default function App() { return ( <SafeAreaView style={styles.screen}> <StatusBar barStyle="light-content" translucent={true} /> <NavigationContainer theme={appTheme}> <Stack.Navigator> <Stack.Screen component={Login} options={{ headerShown: false }} name="Login" /> <Stack.Screen component={Feed} name="Feed" /> </Stack.Navigator> <LoginScreen /> </NavigationContainer> </SafeAreaView> ); }...

The code above shows the file structure and the code contained in the files relative to the topic. How can I manage to change Stack.Screen when user==True?

Answer 1

You need a state that can be changed in the Login component. You could use a Context for this purpose.

export const AppContext = React.createContext({});

export default function App() {

  const [isSignedIn, setIsSignedIn] = React.useState(false);
  const contextValue = React.useMemo(() => ({
      isSignedIn,
      setIsSignedIn
  }), [isSignedIn])

  return (
    <SafeAreaView style={styles.screen}>
      <StatusBar barStyle="light-content" translucent={true} />
      <AppContext.Provider value={contextValue}>
        <NavigationContainer theme={appTheme}>
          <Stack.Navigator>
           { 
             !isSignedIn ? (
               <Stack.Screen component={Login} options={{ headerShown: false }} name="Login" />
             ) : (
               <Stack.Screen component={Feed} name="Feed" />
             )
          </Stack.Navigator>
        </NavigationContainer>
      </AppContext.Provider>
    </SafeAreaView>
  );
}

The Login screen can access the context and change it if the user logs in successfully.

const Login = (props) => {
    const { setIsSignedIn } = useContext(AppContext);

    const handleLogin = () => {
        auth
          .signInWithEmailAndPassword(email, password)
          .then((userCredentials) => {
             const user = userCredentials.user;
             console.log("Logged in with:", user.email);
             // success ? 
             setIsSignedIn(true);
           })
          .catch((error) => alert(error.message));
    };
    
   ...
}