react-native - 如何减少反应原生应用程序的启动时间

问题描述

我正在使用 react native 开发新闻应用程序，我的问题是应用程序的启动或启动时间很长（在主屏幕显示之前），我会很感激任何提高速度的建议。最初加载大约需要 4 秒和 2 js的秒数。我有 36 篇文章要在主屏幕上显示，并且 json 响应很大，这可能是问题的原因。

我的 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';

获取文章的功能：

export async function getArticles(){

    try {
        let articles = await fetch(`${articles_url}`,{
            headers:{
                'X-API-KEY':_api_key
            }
        });

        let result = await articles.json();

        return result.articles;

    } catch (error) {
        throw error
    }
}

显示文章的 home.js 是：

export class HomeScreen extends PureComponent {

    constructor(props) {
        super(props);
        this._handleItemDataOnPress = this._handleItemDataOnPress.bind(this)
        this.state = {
            isLoading: true,
            data: null,
            isError: false,
            setModalVisible: false,
            modalArticleData: {}
        }
    }

    _handleItemDataOnPress(articleData) {
        this.setState({
            setModalVisible: true,
            modalArticleData: articleData
        })
    }

    componentDidMount() {
        getArticles().then(data => {
            this.setState({
                isLoading: false,
                data: data
            })
        }, error => {
            Alert.alert("Error", "Something happend, please try again")
        })
    }

    render() {
        let view = this.state.isLoading ? (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <ActivityIndicator animating={this.state.isLoading} color="#00f0ff" />
                <Text style={{ marginTop: 8 }} children="Please wait..." />
            </View>
        ) : (
                <FlatList
                    dataArray={this.state.data}
                    renderRow={(item) => {
                        return (
                            <ListItem>
                                <ListDataItem onPress={this._handleItemDataOnPress} data={item} />
                            </ListItem>
                        )
                    }} />

            )
        return (
            <Container>
                <Header>
                    <Body>
                        <Title children="RN NewsApp" />
                    </Body>
                </Header>
                <Content
                    contentContainerStyle={{ flex: 1, backgroundColor: '#fff' }}
                    padder={false}>
                        {view}
                </Content>
            </Container>
        )
    }
}

在列表 renderRow 中显示单个数据项的 ListDataItem 类：

export default class ListDataItem extends PureComponent{
    constructor(props){
        super(props);
        this.data = props.data;
        this._handlePress = this._handlePress.bind(this)
    }

    _handlePress(){
        const {url, title} = this.data
        this.props.onPress({url,title})
    }

    render(){
        return(
            <TouchableOpacity onPress={this._handlePress} style={{flexDirection:'row'}} activeOpacity={0.5}>
                <Thumbnail style={{ backgroundColor: '#eee', alignSelf: 'center' }} square large  source={{ cache:'force-cache', uri: this.data.urlToImage != null ? this.data.urlToImage : null }} />
                <Body>
                    <Text style={{fontSize: 16 }} numberOfLines={2}>{this.data.title}</Text>
                    <Text note numberOfLines={3}>{this.data.description}</Text>
                    <View style={{ flex: 1, flexDirection: 'row', marginTop: 8, marginLeft: 8 }}>
                        <Text note>{this.data.source.name}</Text>
                        <TimeAgo date={this.data.publishedAt} />
                    </View>
                </Body>
            </TouchableOpacity>
        )
    }
}

我还尝试使用 LisHeaderComponent 将标题放在平面列表中，但没有区别。

标签： react-native

react-native - 如何减少反应原生应用程序的启动时间

问题描述

解决方案

推荐阅读