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中使用Splash组件作为加载程序持续存在，并且在您的Splash组件中没有可用的导航道具，因为它是父组件，不是导航树的一部分，您出于相同的目的需要使用switch Navigator除非您将导航部件移到导航器树中，否则使用当前结构的导航将无法正常工作。现在的解决方案是，

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

添加简单的“活动指标”作为后备广告。

<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）相同，您可以为所有内容提供启动标记，而所有这些都是外部人员导航。分辨率：使用活动指标代替后退作为飞溅
这是由于您的Redux中间件花费了更长的时间，因此请更好地检查您的Redux中间件。
白屏，这是导致白屏的原因，可能是与您的中间件警告或组件安装了初始屏幕的原因相同。而且您有多个提供程序，因此最好删除一两个，然后检查是什么原因造成的。

您可以检查此样本以获取有关使用初始屏幕和身份验证的想法。 https://snack.expo.io/@guruparan/rnn-v5

反应本机启动页面警告

2 个答案: