Question

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

Navigator.js

<div class="b1">
<h class="b1c">Description:</h>
<h class="astyle" id="asterisk2">*</h>
<div class="b2">
<textarea class="tarea" id="tbox2" oninput="txtchk(asterisk2, tbox2)">
</textarea>
</div>
</div>

Login.js

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

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

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

现在，由于undefined true true undefined true true undefined true true未获得initialRouteName的值，因此它始终保留在isSignedIn页面（即登录页面）上。

Answer 1

这是一个几乎每个人都面临的经典案例，因此，根据反应导航rn-docs的文档，他们总是说最好的是拥有3页，并将初始页面加载为初始屏幕，然后放入内部启动屏幕的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>
    );
  }
}

希望清楚

如何在createSwitchNavigator中设置动态initialRouteName？

1 个答案: