如何提高启动时间反应原生应用程序？答案

【问题标题】：How can I improve the launch time react native app?如何提高启动时间反应原生应用程序？
【发布时间】：2021-05-11 14:13:47
【问题描述】：

我已经发布了一个适用于 IOS 和 Android 的应用程序。

但该应用的启动时间约为 5 秒。

我检测到它在 Routes 中加载第一个屏幕大约需要 5 秒

app.tsx 代码如下：

import React, {useEffect} from 'react';
import configureStore from './Store';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/es/integration/react';
import {NavigationContainer} from '@react-navigation/native';
import Routes from './configs/Routes';
import {navigationRef} from './services/NavigationService';
import {LocalizationProvider} from './locales/Translation';
import ModalContainer from './modules/ModalGlobal/containers/ModalContainer';
import NetInfoContainer from './containers/NetInfoContainer';
import {
  listenNotificationForeground,
  requestUserPermission,
} from './services/NotificationService';
import axios from 'axios';
import {removeCurrentSession} from './modules/Setting/service/SettingService';
import {UNAUTHORIZED} from './configs/Constants';

axios.interceptors.response.use(
  response => response,
  error => {
    const {status} = error.response;
    if (status === UNAUTHORIZED) {
      removeCurrentSession();
    }
    return Promise.reject(error);
  },
); // User for HTTP code difirrent 200 from axios

const App = () => {
  useEffect(() => {
    let listenBackground: any;
    async function _notificationHandle() {
      await requestUserPermission();
      listenBackground = listenNotificationForeground();
    }
    _notificationHandle();
    return listenBackground;
  }, []);

  return (
    <Provider store={configureStore().store}>
      <PersistGate loading={null} persistor={configureStore().persistor}>
        <SafeAreaProvider>
          <LocalizationProvider>     // Locale language
            <NetInfoContainer />     // Use to show lost connection
            <NavigationContainer ref={navigationRef}>
              <Routes />
            </NavigationContainer>
            <ModalContainer />      // Define global modal to use many routes
          </LocalizationProvider>
        </SafeAreaProvider>
      </PersistGate>
    </Provider>
  );
};

export default App;

我可以改进这段代码中的任何内容吗？或者有什么方法可以缩短启动时间？

非常感谢！

【问题讨论】：

希望我的回答有帮助
我会试试你的建议。我正在使用另一个功能，所以我没有尝试过。我回复最终结果。谢谢
如果有帮助，请标记为已接受，并点赞！它有很大帮助！ :)

标签： android ios react-native performance

【解决方案1】：

对于 android，您可以通过在 app/build.gradle 上启用 hermes 来消除项目开始时的空白屏幕。 Hermes 将 js 代码转换为 java 代码。如果你背叛了你的发布 apk，你可以在启用 hermes 后只看到 java 文件，并且有一个改变来减少你的应用程序的大小。完整的说明和文档见this

【讨论】：

谢谢。我已经启用了爱马仕投影。但发射时间并没有减少。

【解决方案2】：

您可以使用react-native-screens来优化您的应用程序的内存使用和性能，使用如下（使用yarn add react-native-screens安装后）：

您的android/app/src/main/java/<your package name>/MainActivity.java 需要如下所示：

import android.os.Bundle;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
}

在您的入口文件（主要是 App.js）上，添加以下内容：

import { enableScreens } from 'react-native-screens';

enableScreens(false);

在此处了解更多信息：Optimize memory usage and performance using react-native-screens

【讨论】：

你好。感谢您的回答。该模块无助于改善加载时间。我还将hermes 添加到该项目中。但仍然没有改善任何东西:(((

【解决方案3】：

您还应该添加一个启动画面（如果您没有），因为在 react-native 加载其依赖项时，在 1 秒开始时总会有一个空白屏幕。设置启动画面会让人不明显。

我使用 react-native-splash-screen

【讨论】：

谢谢。我已经添加了启动画面。