带有 PersistGate 的启动画面答案

【问题标题】：Splash screen with PersistGate带有 PersistGate 的启动画面
【发布时间】：2019-09-15 17:51:40
【问题描述】：

我有以下代码库

Navigator.js 导出默认 createAppContainer(createSwitchNavigator( { // 屏幕设计：屏幕设计，闪屏：闪屏，应用程序：drNav，认证栈：认证栈 }, { initialRouteName: 'SplashScreen', } ));

import SplashScreen from './screens/SplashScreen'
<Provider store={store}>
<PersistGate loading={<SplashScreen/>} persistor={persistor}>
<View style={styles.container}>
<Navigator />
</View>
</PersistGate>
</Provider>

splashScreen.js

componentDidMount() {
    if (this.state.isAuthenticated) {
      this.props.navigation.navigate("App");
    }
    else {
      this.props.navigation.navigate("AuthStack");
    }
  }

我遇到了错误

在实现 redux 之前，我使用这个页面作为入口屏幕我的应用程序，显示为启动屏幕并在检查用户是否是是否通过身份验证，是否通过身份验证重定向到登录页面其他仪表板。它工作正常，但现在我使用了 redux，然后该方案的工作方式类似，仅区别此屏幕不可见因为 redux persis 从存储中加载数据

请帮助我是 react native 的新手，无法理解此错误

谢谢

【问题讨论】：

你项目的第 112 行是哪一行？
提供者是第 112 行

标签： react-native redux redux-persist

【解决方案1】：

navigator 中内部定义的所有组件都可以使用导航属性。 SplashScreen 组件不是 Navigator 的一部分，因此它无权访问 navigation 道具。但我认为你不需要它。

您的 SplashScreen 组件是一个转储组件，只要 PersistGate 需要将存储的数据加载到您的 redux 存储，它就会向用户显示。因此，当数据加载完成后，您将看到其余组件，因为它们在 PersistGate 中定义。所以我不明白你为什么需要使用这个加载组件中的导航。

如果您确实需要从 SplashScreen 访问导航道具，您可以按照以下指南操作：https://reactnavigation.org/docs/en/connecting-navigation-prop.html

【讨论】：

在实现 redux 之前，我将此页面用作我的应用程序的入口屏幕，显示为启动屏幕，并在检查用户是否已通过身份验证，如果已通过身份验证重定向到登录页面其他仪表板。它工作正常，但现在我使用了 redux，然后场景工作类似，只是 diff 这个屏幕不可见，因为 redux persis 从存储中加载数据
我明白了。现在，当从 PersistGate 使用 SplashScreen 时，它无法访问导航道具。但是在加载 Navigator 时它将具有访问权限。因此，也许您可以在 componentDidMount 内部检查导航道具是否存在，然后再使用它。这种方式第一次被 PersistGate 使用时它不会做任何事情，但是一旦加载完成，SplashScreen 将再次加载，这次由导航器加载，它会做你想做的事情。此外，使用本指南可能值得更改您的身份验证流程：reactnavigation.org/docs/en/auth-flow.html
我做了类似reactnavigation.org/docs/en/auth-flow.html中重定向的方法
我已将代码更改为 if (this.state.isAuthenticated) { this.props.navigation.navigate("App"); } else { this.props.navigation.navigate("AuthStack"); } }
它现在正在显示，但需要一些时间才能显示，知道如何在应用加载后立即显示

【解决方案2】：

您的代码似乎无法在 SplashScreen 组件中找到导航。

1) 尝试在 SplashScreen 组件的渲染方法中进行控制台。 2) 还要检查 redux 配置，有可能是你的 redux 配置有问题，因为你的组件无法访问导航道具。

【讨论】：

我已将启动画面设置为默认导航