React-Native始终在组件中调用SwitchNavigator

Question

我想创建一个功能来检查用户是否仍在登录。如果不是，请返回登录屏幕。但是，我希望它始终提供给Auth，而不必给每个屏幕都提供导航道具。相反，我希望将其包含在组件内部，以便可以导入它并在需要时调用它。我是本机反应的新手，尚未找到有关如何执行此操作的任何信息。

开关导航器在app.js中像这样：

    const App = createAppContainer(createSwitchNavigator(
  {
      Starter: AuthLoadingScreen, 
      App: AppStack, 
      Auth: AuthStack
  }, 
  {
      initialRouteName: 'Starter'
  }
));

抱歉英语不好

Answer 1

我想将其包含在组件内部，以便可以导入它并在需要时调用它。

为此，您可以创建一个单独的功能来检查用户是否登录并导出。然后，在您需要的任何地方，都可以将其导入并调用它，以查看用户是否仍在登录。然后进行相应的操作。

export const checkUser = () => {
    if(loggedIn) {
        return true
    } else {
        return false
    }
}

然后，

import {checkUser} from 'path to file where declared'

if(checkUser()) {
    // user logged in
} else {
    // move to login
}

Answer 2

我的建议是，我可以看到的是您的初始页面是Starter，如

 {
      initialRouteName: 'Starter'
  }

因此，假设您已成功登录，在那之后，我想您将获得一个令牌，因此将其存储在AsyncStorage中。

现在假设下次用户打开应用程序时，您可以在Starter页面的componentDidMount中添加以下代码

async componentDidMount(){
await AsyncStorage.getItem("token")?this.props.navigation.navigate("HomeScreen"):this.props.navigation.navigate("LoginScreen")
}

因此，基本上，您正在检查初始页面中的令牌是否存在于异步存储中，如果存在，请导航至主屏幕，否则重定向至用户将进行身份验证的登录屏幕。

希望那很清楚。毫无疑问。

检查此以获取异步存储async storage