Javascript 如何在createSwitchNavigator中设置动态initialRouteName？

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

Navigator.js

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

  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')
    }
  }

Login.js

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

  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

页面，即登录页面

这是一个几乎每个人都会遇到的经典案例，因此根据react navigation的文档，他们总是说最好有3个页面，并将初始页面加载为启动屏幕，在启动屏幕的componentDidMount方法中执行异步存储并相应地导航

像这样做：

 export default createAppContainer(
      createSwitchNavigator(
        {
          AuthLoading: AuthLoadingScreen,
          App: AppStack,
          Auth: AuthStack,
        },
        {
          initialRouteName: '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>
    );
  }
}

类AuthLoadingScreen扩展了React.Component{ componentDidMount（）{ 这个。_bootstrapAsync（）； } //从存储器中取出令牌，然后导航到适当的位置 _bootstrapAsync=async（）=>{ const userToken=await AsyncStorage.getItem（'userToken'）； //这将切换到应用程序屏幕或身份验证屏幕，并进行此加载 //屏幕将被卸下并丢弃。 this.props.navigation.navigate（userToken？'App'：'Auth'）； }; //在此处呈现您喜欢的任何加载内容 render（）{ 返回( ); } }

---

希望它清楚

如果没有第三屏LaodingScreen，我们就不能这样做吗这是问题所在，它是异步的，所以你不能真正确定它的执行情况，这就是为什么你在一些控制台中没有定义。第三屏总是比较好的，你可以做一个闪屏，不管怎样，你需要实现闪屏，然后就可以了checking@GauravRoy，你搞定了！我一直在努力解决这个问题。我真的很感激你的回答。我的身份验证流程现在已完成。