反应本机启动页面警告

Question

我制作的初始页面如下所示：

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 的警告，我也收到此警告：

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

我怎样才能做得更好？

Answer 1

您在 redux persist 中使用 Splash 组件作为加载器，而在您的 Splash 组件中没有任何可用的导航道具，因为它是父组件而不是导航树的一部分，您需要使用 switch navigator目的，但使用当前结构导航将不起作用，除非您将导航部分移动到导航树中。现在的解决方案是，

仅将启动画面用作静态 UI 组件。
将导航或 componentDidMount 逻辑移到堆栈导航器中。

添加简单的 Activity 指标作为后备。

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

Answer 2

您的警告

未定义不是对象：问题是您正在使用 Splash 作为后备组件，因此在您的深层链接得到解决之前，将显示 Splash，并且此处的 Splash 不是导航的一部分，导航不会获得 'navigation' 道具，因此您会收到警告。对于 PersistGate 和 suspense 等其他高阶组件也是如此，您可以为所有内容提供启动画面，所有这些都是局外人导航。解决方案：使用 activity 指标而不是飞溅作为后备
这是由于你的redux中间件之一耗时较长，最好检查你的redux中间件。
白屏，这是导致白屏的原因，可能与您的中间件警告或组件安装启动画面的原因相同。而且您有多个提供商，所以最好删除一两个并检查是什么原因造成的。

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

反应本机启动页面警告

react native splash page warning

splash-screen

react-native

react-native-android