Question

当数据计数为100时，flatlist按批次呈现记录，如下所示0到10,0到20,0到30,0到40 .... 0到100.因此渲染全部需要大约20秒行。

问题1：在此期间，我无法执行向右滑动操作（即，在呈现所有（100）行之前，我无法执行滑动操作）。

问题2：当我添加代码行＆＃39; extraData = {this.state.activeRow}＆＃39;时，我也可以看到滑动性能滞后（即滑动动画响应非常慢）。到平面列表。在由于activeRow中的状态更改而重新呈现平面列表时，在呈现所有100行之前，我无法执行另一次滑动操作。

< FlatList data={this.state.data} renderItem={this._renderRow} extraData= {this.state.activeRow} />

_renderRow({item, index}){
let swipeBtns = [
  {
text: 'Edit',
    backgroundColor: '#5DAE5D',
    underlayColor: 'rgba(0, 0, 0, 1, 0.6)',
 },
];

return (
    <View>
        <Swipeout right={swipeBtns}
          close={(this.state.activeRow !== index)}
          rowID={index}
          sectionId= {1}
          autoClose = {true}
         backgroundColor= 'transparent'
          sensitivity = {20}
          onOpen = {(secId, rowId, direction) => this.onSwipeOpen(rowId, direction)}
          onClose= {(secId, rowId, direction) => this.onSwipeClose(rowId, direction)}
          >
          <TouchableOpacity>
            <Text>Sample Test</Text>
          </TouchableOpacity>
        </Swipeout>
    </View>
);
} 

onSwipeOpen(rowId, direction) {
    if(typeof direction !== 'undefined'){
        this.setState({activeRow:rowId});
    }
}

onSwipeClose(rowId, direction) {
  if (rowId === this.state.activeRow && typeof direction !== 'undefined') {
      this.setState({ activeRow: null });
  }
}

请建议解决问题1和问题2，以改善平面列表的滑动性能。

ReactNative FlatList react-native-swipeout性能问题

0 个答案: