React Native 首次使用 stacknavigator

Question

我有一个带有介绍屏幕和登录屏幕的 stacknavigator。

export const StackerIntro = createStackNavigator({ 
  Intro: {
    screen: Intro,
    navigationOptions: {
      header: null
    }
  },
  Login: {
    screen: Login,
    }
  }, {
 InitialRouteName: "Intro"
})

如果用户不是第一次使用应用程序，我如何将初始路线设置为 "Login"？

Answer 1

您不需要将初始路由设置为登录。您需要做的就是在第一次打开应用程序时在异步存储中存储一个值，然后在 app.js 第二次打开时检查该值是否存在。如果它在那里那么你需要去登录否则去介绍。

例如：

        const value = await AsyncStorage.getItem("installSucess");

      if(value === 'true'){
            navigate to login
        }else{
            navigate to into 
             }

当您在异步存储中安装应用程序商店值时，第一次出现在介绍屏幕中，例如

    await AsyncStorage.setItem("installSucess", "true");

Answer 2

对于条件渲染，您可能必须使用 switchNavigation。

1.如果用户是第一次登录，将密钥保存在异步存储中。

当用户第二次来时，使用async-await获取导航class中的密钥，如果获取密钥则导航至所需位置，否则导航至登录。
使用 SwitchNavigation 进行条件导航。

你也可以试试：

    const routeName = () => {
      var routeName =
        global.isSignUpScreen == false || global.isSignUpScreen == undefined
          ? "LoginScreen"
          : "SignUpScreen";
      console.log("routeName >> " + routeName);
      return routeName;
    };


    const SignUpStack = createStackNavigator(
      {
        LoginScreen: {
          screen: LoginScreen,
          navigationOptions: {
            header: null
          }
        },
        SignUpScreen: {
          screen: SignUpScreen,
          }
      {
        initialRouteName: routeName()
      }
}
    );

React Native 首次使用 stacknavigator

React Native first time user stacknavigator

react-native

react-navigation

stack-navigator