Question

我正在使用Expo并在我的应用程序中响应本机导航5。我的问题是，在第一个渲染中，在开发模式下，选项卡图标显示缓慢，我的意思是，它们在稍加延迟后才出现。这是一个错误吗？有人经历过吗？在生产模式下会消失吗？

在App.js中，我有条件渲染（启动屏幕或导航器），但是我想这不是问题。为什么会这样呢？这只是一个条件渲染。

App.js中的条件渲染：

render() {
    const { isLoading, missingPermissions } = this.state;

    /*
      The main content of tha app will be rendered only when:
        1) All custom fonts are loaded
        2) The user auth state is checked

      Pd: All these actions are handled by the Splash screen
    */

    return (
      <SafeAreaView
        style={styles.container}
        forceInset={{ top: "never", bottom: "never" }}
      >
        <StatusBarPlaceholder />
        {!isLoading ? (
            <AppContent missingPermissions={missingPermissions} />
        ) : (
            <SplashScreen handleIsLoading={this.handleIsLoading} />
        )}
      </SafeAreaView>
    );
  }
}

Pd：handleIsLoading只是将App.js的isLoading状态设置为false，并在加载所有字体后在SplashScreen中调用。

我找到的一种解决方法是：

render() {
    const { isLoading, missingPermissions } = this.state;

    /*
      The main content of tha app will be rendered only when:
        1) All custom fonts are loaded
        2) The user auth state is checked

      Pd: All these actions are handled by the Splash screen
    */

    return (
      <SafeAreaView
        style={styles.container}
        forceInset={{ top: "never", bottom: "never" }}
      >
        <StatusBarPlaceholder />
        {!isLoading && <AppContent missingPermissions={missingPermissions} />}
        <SplashScreen handleIsLoading={this.handleIsLoading} />
      </SafeAreaView>
    );
  }
}

但不是我想要的。

应用内容代码：

function AppContent({ missingPermissions }) {
  if (missingPermissions.length)
    return <PermissionsController permission={missingPermissions[0]} />;

  return (
    <View style={styles.appContainer}>
      <NavigationContainer>
        <RootNavigator />
      </NavigationContainer>
    </View>
  );
}

反应本机导航5慢速渲染？

0 个答案: