reactjs - 如何在 React Native 中加快应用程序启动时间

Question

我正在使用 React Native 开发新闻应用程序，我的问题是应用程序的启动或启动时间很慢(在主屏幕显示之前)，我将不胜感激任何提高速度的建议。大约需要 3-4 秒最初加载到我的手机上。

我的 package.json 看起来像这样:

{
  "name": "tageblattapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/masked-view": "^0.1.7",
    "moment": "^2.24.0",
    "native-base": "^2.13.12",
    "react": "16.11.0",
    "react-native": "0.62.0",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-optimized-flatlist": "^1.0.4",
    "react-native-reanimated": "^1.7.1",
    "react-native-render-html": "^4.2.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-safe-area-view": "^1.0.0",
    "react-native-screens": "^2.7.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-webview": "^9.3.0",
    "react-navigation": "^4.3.5",
    "react-navigation-drawer": "^2.4.12",
    "react-navigation-stack": "^2.3.9"
  },
  "devDependencies": {
    "@babel/core": "7.9.0",
    "@babel/runtime": "7.9.2",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.58.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "rnpm": {
    "assets": [
      "../assets/fonts/"
    ]
  }
}

我的进口是:

import React,{PureComponent} from 'react';
import {AsyncStorage, Linking ,Share, View ,Image,ActivityIndicator ,StyleSheet, TouchableOpacity,Dimensions,ScrollView,SafeAreaView, TextInput ,FlatList} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { createAppContainer } from 'react-navigation';
import {Container, Header, Left, Body, Right, Button, Title,Text,Content, List, ListItem,Thumbnail} from 'native-base';
import { createStackNavigator } from 'react-navigation-stack';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { IMAGE } from '../constants/image';
import {  getMenusideGategory} from '../services/news';
import HTML from 'react-native-render-html';
import  Time  from '../components/time';
import moment from 'moment';
import  FeedDetail  from './FeedDetail';
import  ArticleLink  from './ArticleLink';
import  Comments  from './Comments';
import  AddComments  from './AddComments';

我有一条警告消息:

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.
    in Context.Consumer (at VirtualizedList.js:1137)
    in VirtualizedList (at FlatList.js:633)
    in FlatList (at Home.js:244)
    in Feed (created by SceneView)
    in SceneView (created by CardContainer)
    in CardContainer (created by CardStack)
    in CardStack (created by KeyboardManager)
    in KeyboardManager (created by Context.Consumer)
    in Context.Consumer (created by StackView)
    in StackView (created by StackView)
    in StackView (created by Anonymous)
    in Anonymous (created by Navigator)
    in Navigator (created by SceneView)
    in SceneView (created by Drawer)
    in Drawer (created by DrawerView)
    in DrawerView (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer

Answer 1

About the warning.

react-native 中的黄色警告揭示了应用程序中低效的代码，最终导致性能问题或内存消耗增加。

Yes, the warning nesting VirtualizedList inside a plain ScrollView is bad for your app.

这通常发生在 ScrollView 内渲染 Flatlist 时。 (来自您的导入)

• Flatlist 无法计算当前窗口的大小，并且会尝试同时渲染所有内容，这会导致性能问题。

How to get rid of the warning

解决此问题很容易，只需删除 ScrollView 并将 Flatlist 周围的组件移动到 ListHeaderComponent 和 ListFooterComponent >

export default function WithWarning() {
    return (
      <ScrollView>
        <ExampleComponent />
        <Text> Headlines </Text>
        <FlatList
          data={DATA}
          renderItem={({ item }) => <Item title={item.title} />}
          keyExtractor={item => item.id}
          />
         <Text> Footer </Text>
      </ScrollView>
    );
 }

Now lets get rid of the ScrollView and use props ListFooterComponent and ListHeaderComponent

export default function WithoutWarning() {
  return (
    <>
      <FlatList
        data={DATA}
        LisHeaderComponent={(
          <>
            <ExampleComponent />
            <Text> Headlines </Text>
          </>
        )}
        renderItem={({ item }) => <Item title={item.title} />}
        keyExtractor={item => item.id}
        ListFooterComponent={<Text> Footer </Text>}
      />
    </>
  );
}

有关更多详细信息和优化 react native 应用程序性能的方法，请访问 here