React Native Navigation 5 - медленный рендеринг? - PullRequest
Новая
       127

React Native Navigation 5 - медленный рендеринг?

0 голосов
/ 21 июня 2020

Я использую Expo и реагирую на встроенную навигацию 5 в моем приложении. Проблема, с которой я столкнулся, заключается в том, что при первом рендеринге в режиме разработки значки вкладок отображаются медленно, я имею в виду, они появляются после небольшой задержки. Это ошибка? Кто-нибудь испытал это? Будет ли это исчезнуть в производственном режиме?

В приложении. js У меня есть условный рендер (экран spla sh или навигатор), но я полагаю, это не проблема. Почему это могло быть? Это просто условный рендеринг.

Условный рендеринг в приложении. 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>
    );
  }
}

Но не совсем то, что я хочу.

THE КОД AppContent: 

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

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