如何在createSwitchNavigator中设置动态initialRouteName？

debugcn 发表于 Dev

devbeans

我想设置身份验证流程，但是我没有从SecureStore获取数据

Navigator.js

const AppSwitchNavigator = createSwitchNavigator(
  {
    SignedOut,
    SignedIn
  },
  {
    initialRouteName: AsyncStorage.getItem('isSignedIn') == 'true' ? 'SignedIn' : 'SignedOut'
  }
)
export default createAppContainer(AppSwitchNavigator)

Login.js

  verifyOtp = async code => {
    const { phone } = this.state

    var response = await Axios.post(
      `https://api.msg91.com/api/v5/otp/verify?mobile=91${phone}&otp=${code}&authkey=273478A4j3qbKgj5cbda6ba`
    )

    if (response.data.type == 'error') {
      this.setState({
        errMsg: response.data.message
      })
    } else {
      await SecureStore.setItemAsync('isSignedIn', 'true')
      this.props.navigation.navigate('Home')
    }
  }

来自console.log（SecureStore.getItemAsync（'isSignedIn'））的响应；

undefined
true
true
undefined
true
true
undefined
true
true

现在由于initialRouteName没有得到isSignedIn它的价值，它总是保留在SignedOut页面即登录页面上。

高拉夫·罗伊（Gaurav Roy）

这是一个几乎每个人都面临的经典案例，因此，根据react navigation rn-docs的文档，他们总是说最好的是拥有3页，并将初始页面加载为初始屏幕，并在splashD的componentDidMount方法内屏幕上执行异步存储操作并进行相应导航。

像这样：

 export default createAppContainer(
      createSwitchNavigator(
        {
          AuthLoading: AuthLoadingScreen,
          App: AppStack,
          Auth: AuthStack,
        },
        {
          initialRouteName: 'AuthLoading',
        }
      )
    );

和在AUthLoading中

class AuthLoadingScreen extends React.Component {
  componentDidMount() {
    this._bootstrapAsync();
  }

  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? 'App' : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    return (
      <View>
        <ActivityIndicator />
        <StatusBar barStyle="default" />
      </View>
    );
  }
}

希望它清楚

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。