Как ускорить время запуска приложения в режиме реагирования

Question

Я занимаюсь разработкой новостного приложения с использованием собственного реагирования, и моя проблема в том, что время запуска или запуска приложения медленное (до появления главного экрана). Буду признателен за любые советы по повышению скорости. Это займет около 3-4 секунд. для начальной загрузки на мой телефон.

Моя посылка. json lokks вот так:

{
  "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

О предупреждении.

Желтые предупреждения в реактивном нативном коде раскрывают неэффективный код в вашем приложении, что в конечном итоге приводит к снижению производительности или увеличению потребления памяти.

Да, вложение предупреждения VirtualizedList внутри простого ScrollView плохо для вашего приложения.

Это обычно происходит при рендеринге Flatlist внутри ScrollView. (из вашего импорта)

• Flatlist не может рассчитать размер текущего окна и попытается отрендерить все одновременно, что приводит к проблемам с производительностью.

Как избавиться от предупреждения

Эту проблему легко решить, просто убрав 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>
    );
 }

Теперь давайте избавимся от ScrollView и используем реквизиты ListFooterComponent и 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>}
      />
    </>
  );
}

для получения дополнительной информации и способов оптимизации производительности в Реагирующее нативное приложение доступно здесь