react-native - 反应原生启动页面警告

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

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

我怎样才能做得更好？

标签： react-nativereact-native-androidsplash-screen

Answer 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>