進階應用

導航畫面是否顯示的判斷

認證流程

我們可以根據某些條件定義不同的畫面。例如，如果用戶登錄後，我們可以定義Home，Profile，Settings等。如果用戶沒有登錄，我們可以定義SignIn和SignUp畫面。

// 當isSignedIn是true，
// 導航只會看到Home，Profile和Settings畫面
isSignedIn ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </>
) : (
  <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </>
)

條件判斷

if (state.isLoading) {
  // 加載中的畫面
  return <SplashScreen />;
}

return (
  <Stack.Navigator>
    // 判斷是否有 token 決定要顯示的畫面
    {state.userToken == null ? (
      // No token found, user isn't signed in
      <Stack.Screen
        name="SignIn"
        component={SignInScreen}
        options={{
          title: 'Sign in',
          // When logging out, a pop animation feels intuitive
          // You can remove this if you want the default 'push' animation
          animationTypeForReplace: state.isSignout ? 'pop' : 'push',
        }}
      />
    ) : (
      // User is signed in
      <Stack.Screen name="Home" component={HomeScreen} />
    )}
  </Stack.Navigator>
);