Question

我正在使用一个平面列表来呈现服务器中的数据，但是我遇到的问题是当我渲染大量数据时，我的应用程序变得太慢了

 <FlatList
      data={this.state.product}
      numColumns={2}
      inverted
      renderItem={({item}) =>
        <TouchableOpacity style={styles.homeGride}>
        <View style={styles.offer}>
        <Text style={styles.offerText}>{item.offer}%</Text>
        </View>
        <ImageBackground style={styles.homeImage} source={{uri:`${item.img}`}}>

        </ImageBackground>
        <Text style={styles.homeProductText}>{item.title}</Text>
        <View style={{flexDirection:"row-reverse"}}>
        <Text style={{flex:1,fontFamily:"FaNum"}}>{item.price}</Text>
        <Text style={{flex:1,fontFamily:"FaNum"}}>{item.new_price}</Text>
        </View>
        <Button small danger>
          <Text style={{padding:5}}>خرید</Text>
        </Button>
        </TouchableOpacity>
      }  
      keyExtractor={({id}, index) => id}
      />

Answer 1

您应该考虑使用FlatList的onEndReached属性。首先定义一个page状态

this.setState({page:1});

从服务器获取数据时，发送page参数以对数据进行分块例如在laravel服务器端框架中执行此操作：

$data = Data::where("sth","sth")->paginate(10,'page');

现在在您的本机应用程序中：

<FlatList
  data={this.state.product}
  numColumns={2}
  inverted
  onEndReached={this.handleLoadMore}
  onEndThreshold={10}
  renderItem={({item}) =>
    ..sth..
  }  
  keyExtractor={({id}, index) => id}
  />

现在处于handleLoadMore中，将1编号添加到page状态，然后再次获取数据这将帮助您提高速度和性能，并在需要时获取其他数据！

Answer 2

我建议您使用recyclerListView component 在Android设备上具有更好的性能。

平板列表分页使应用在Android上的运行速度变慢

2 个答案: