反应原生启动页面警告答案

【问题标题】：react native splash page warning反应原生启动页面警告
【发布时间】：2020-10-19 12:36:23
【问题描述】：

我制作了一个如下所示的启动页面：

export default class Splash extends Component {
  performTimeConsumingTask = async () => {
    return new Promise((resolve) =>
      setTimeout(() => {
        resolve('result');
      }),
    );
  };

  async componentDidMount() {
    const data = await this.performTimeConsumingTask();
    // const navigation = useNavigation();
    if (data !== null) {
      this.props.navigation.navigate('BottomMainNavgigation');
    }
  }

  render() {
    return (
      <View style={styles.viewStyles}>
        {/* <Text style={styles.textStyles}>Welcome</Text> */}
        <Image
          style={styles.tinyLogo}
          source={{
            uri: URL.logov2,
          }}
        />
      </View>
    );
  }
}

那么我在导航中这样使用它：

const RootStackScreen = (props) => {
  const [t] = useTranslation();
  return (
    <SplashRootStack.Navigator>
      <SplashRootStack.Screen
        name="Main"
        component={Splash}
        options={{headerShown: false, headerBackTitle: t('back')}}
      />
      <SplashRootStack.Screen
        name="BottomMainNavgigation"
        component={BottomMainNavgigation}
        options={{headerShown: false, headerBackTitle: t('back')}}
      />
    </SplashRootStack.Navigator>
  );
};

还有：

<PaperProvider theme={MyTheme}>
  <NavigationContainer linking={linking} fallback={<Splash />}>
    <RootStackScreen />
  </NavigationContainer>
</PaperProvider>

在我的 app.js 中像这样：

const App = () => {
  return (
    <Provider store={store}>
      <PersistGate loading={<Splash />} persistor={persistor}>
        <Suspense fallback={<Splash />}>
          <Navigation />
        </Suspense>
      </PersistGate>
    </Provider>
  );
};

export default App;

当我运行应用程序时，它看起来像这样：

有一个警告：

我收到这个 id= 0、1 和 2 的警告，我也收到这个警告：

我有什么不正确的广告如何删除这些警告，当我在模拟器中加载应用程序时，我会在获得自己的启动页面然后进入我的应用程序之前获得几秒钟的白屏。

我怎样才能做得更好？

【问题讨论】：

标签： react-native react-native-android splash-screen

【解决方案1】：

您在 redux 中使用 Splash 组件作为加载程序持久化，并且在您的 Splash 组件中没有任何可用的导航道具，因为它是父组件而不是导航树的一部分，您需要使用 switch navigator 来实现相同的目的，但是除非您在导航器树内移动导航部分，否则当前结构的导航将不起作用。现在的解决方案是，

仅使用 splash 作为静态 UI 组件。
将导航或 componentDidMount 逻辑移动到堆栈导航器中。

添加简单的活动指示器作为后备。

<PersistGate
    loading={<ActivityIndicator style={{top: '45%'}}
      animating color={theme.appColor} size='large' />}
    persistor={ReduxStore.persistor}>
    <Navigator />
</PersistGate>

【讨论】：

我的 rootstack 导航是这样定义的： const SplashRootStack = createStackNavigator();
我说的是你定义为后备的启动组件，导航容器在此之后加载。

【解决方案2】：

你的警告

未定义不是对象：问题是您使用 Splash 作为后备组件，因此在解决深层链接之前会显示 Splash，并且此处的 Splash 不是导航的一部分，不会获得“导航”道具，因此您会收到警告。对于 PersistGate 和 suspense 等其他高阶组件也是如此，您可以为所有内容提供飞溅，所有这些都是局外人导航。 resolution : 使用活动指示器而不是splash作为后备
这是由于您在 redux 中的一个中间件需要更长的时间，最好检查您的 redux 中间件。
白屏，这是导致白屏的原因可能与您的中间件警告或组件确实安装了启动画面的原因相同。而且您有多个提供商，因此最好删除一两个并检查导致该问题的原因。

您可以查看此示例以了解有关使用初始屏幕和身份验证的信息。 https://snack.expo.io/@guruparan/rnn-v5

【讨论】：

而不是使用使用它应该可以工作