Question

我试图从数组中创建一个表。但是，加载它需要一点时间。有没有办法加快速度？

allData包含大约250个数组

生成行的功能

renderRow = (num,one,three,four,five) => {
  return (
    <View key={num} style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
        <View style={{ flex: 0.5, alignSelf: 'stretch' }}>
          <Text style={{ textAlign: 'center' }}>{num}</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
          <Text style={{ textAlign: 'center' }}>{one}</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
          <Text style={{ textAlign: 'center' }}>{three}</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
          <Text style={{ textAlign: 'center' }}>{four}</Text>
        </View>
        <View style={{ flex: 1, alignSelf: 'stretch' }}>
          <Text style={{ textAlign: 'center' }}>{five}</Text>
        </View>
    </View>
  );
}

显示表大约需要5秒

DrawSchedule = () => {

  var allData = this.state.allData;
  var Rows = [];
  var Table = [];

  allData.map((datum) => {
      Rows.push(this.renderRow(datum[0],datum[1],datum[3],datum[4],datum[5]));
  })

  Table = [];

  Table.push(
    <View key="head" style={styles.tableContainer}>
      <View style={{ flex: 1, alignSelf: 'stretch', flexDirection: 'row' }}>
            <View style={{ flex: 0.5, alignSelf: 'stretch' }}>
              <Text style={{ textAlign: 'center' }}>Title A</Text>
            </View>
            <View style={{ flex: 1, alignSelf: 'stretch' }}>
              <Text style={{ textAlign: 'center' }}>Title B</Text>
            </View>
            <View style={{ flex: 1, alignSelf: 'stretch' }}>
              <Text style={{ textAlign: 'center' }}>Title C</Text>
            </View>
            <View style={{ flex: 1, alignSelf: 'stretch' }}>
              <Text style={{ textAlign: 'center' }}>Title D</Text>
            </View>
            <View style={{ flex: 1, alignSelf: 'stretch' }}>
              <Text style={{ textAlign: 'center' }}>Title E</Text>
            </View>
      </View>
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>  
            {Rows}
        </View>
    </View>     
  )

  this.state.Table = Table;
  this.setState({Table: this.state.Table});

}

render() {
  return (
  <View style={styles.container}>
    <ScrollView>
        <Button
          style={styles.loginButton}
          onPress={this.DrawSchedule}
          title="Load Data"
        />
      {this.state.Table}
    </ScrollView>
  </View>
  );
}

Answer 1

使用FlatList呈现大型效果列表：

import { FlatList } from 'react-native';

render() {
    return (
        <FlatList
            data={this.state.data}
            keyExtractor={(item) => ....}
            renderItem={({ item }) => (
                <View>
                    ...
                </View>
            )}
        />
    );
}

请阅读FlatList

以编程方式加载视图需要太长时间

1 个答案: