Question

我正在React Native Expo上开发移动应用程序。我有一个大问题-加载内容。每页最少需要4秒。我想使加载不是4秒而是1。我该怎么做。我试图使代码更简单，并且有所帮助，但是加载内容仍然花费大量时间。我如何优化代码代码：

import React, { Component } from 'react';
import { StyleSheet, View, Button, Image, Text, TouchableOpacity, ScrollView, SafeAreaView, ActivityIndicator } from 'react-native';
import { Header } from 'react-navigation';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons'

import CoursesPlan from '../components/CoursesPlan'
import CoursesPlanView from '../components/CoursesPlanView'

class HtmlPlan extends Component {
  state = {
    showIndicator: true,
       fontLoaded: false
  }
  closeActivityIndicator = () => {
    this.setState({ showIndicator: false });
  }

    delay = () => {
      const that = this;
      return new Promise(function (resolve, reject) {
        setTimeout(() => {
          resolve();
        }, 1000)
      });
    }

    componentDidMount = () => {
      this.delay()
        .then(() => this.closeActivityIndicator())
        .catch(e => console.log(e))


    }

async componentDidMount() {
    await Expo.Font.loadAsync({
      'OpenSans-R': require('../../assets/fonts/OpenSans-Regular.ttf'),
   });
   this.setState({ fontLoaded: true });

 }



  render() {
    return (

      <SafeAreaView>
        {this.state.showIndicator ? (
          <View style={{flex: 1, paddingTop: 20}}>
            <ActivityIndicator />
          </View>
        ) : (


          <ScrollView>
          <View style={styles.MainContainer}>




          <CoursesPlanView
            numTopBox={styles.numTopBox}
            viewStyleBox={styles.ViewStyle}
          topHomeCourses={styles.topHomeCourses}
    number="1"
    title="Комментарии"
          />


<CoursesPlan
 styleTextBox={styles.textStyleBox}
 styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="1"
title="text1"
/>
<CoursesPlan
 styleTextBox={styles.textStyleBox}
 styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="2"
title="text2"
/>


<CoursesPlanView
  numTopBox={styles.numTopBox}
  viewStyleBox={styles.ViewStyle}
topHomeCourses={styles.topHomeCourses}
number="1"
title="Комментарии"
/>


<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="1"
title="text3"
/>
<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="2"
title="text4"
/>


<CoursesPlanView
  numTopBox={styles.numTopBox}
  viewStyleBox={styles.ViewStyle}
topHomeCourses={styles.topHomeCourses}
number="1"
title="text5"
/>


<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="1"
title="text6"
/>
<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="2"
title="text7"
/>

<CoursesPlanView
  numTopBox={styles.numTopBox}
  viewStyleBox={styles.ViewStyle}
topHomeCourses={styles.topHomeCourses}
number="1"
title="text8"
/>


<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="1"
title="text9"
/>
<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="2"
title="text10"
/>


<CoursesPlanView
  numTopBox={styles.numTopBox}
  viewStyleBox={styles.ViewStyle}
topHomeCourses={styles.topHomeCourses}
number="1"
title="text11"
/>


<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="1"
title="text12"
/>
<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="2"
title="text13"
/>


<CoursesPlanView
  numTopBox={styles.numTopBox}
  viewStyleBox={styles.ViewStyle}
topHomeCourses={styles.topHomeCourses}
number="1"
title="text14"
/>


<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="1"
title="Text15"
/>
<CoursesPlan
styleTextBox={styles.textStyleBox}
styleBox={styles.ViewStyleBox}
style={styles.topHomeCourses}
number="2"
title="Тext16"
/>






          </View>
                      </ScrollView>


        )}
      </SafeAreaView>







    );
  }
}

const styles = StyleSheet.create({
  MainContainer: {
    padding:10
  },

    topHomeCourses :{
          fontFamily: 'OpenSans-R',
          fontSize:16,
          width:'80%'
    },

ViewStyle :{
  flexDirection: 'row',
                     justifyContent: 'space-between',
                     borderColor:'#dddddd',
                    borderWidth:1,
                    padding:10,
                    borderTopRightRadius:4,
              borderTopLeftRadius:4
},
ViewStyleBox :{
  flexDirection: 'row',
     justifyContent: 'space-between',
      borderColor:'#dddddd',
      borderBottomWidth:1,
        borderLeftWidth:1,
            borderRightWidth:1,
      padding:10,
      borderBottomRightRadius:4,
borderBottomLeftRadius:4
},
textStyleBox :{
  fontFamily: 'OpenSans-R', marginRight:3, marginLeft:28, fontSize:16
},
numTopBox :{
   fontFamily: 'OpenSans-R', marginRight:5, marginLeft:5, fontSize:17
}

});


export default createStackNavigator(
  {
    Main: {
      screen: HtmlPlan,
      navigationOptions: {
        header: null,
      },
    },
    CoursesPlan: {
      screen: CoursesPlan,
    },
    CoursesPlanView: {
      screen: CoursesPlanView,
    },
  },
  {
    initialRouteName: 'Main',
  }
);

我尝试了循环，但没有帮助

Answer 1

以加载为状态（isloading：true）并将初始值设为true，并在收到响应后在componentDidMount中将加载设置为false。在渲染方法中，检查加载是否为true。 isLoading？ “我是空的”：//您的代码

加载页面没有问题

1 个答案: