ReactNative FlatList react-native-swipeout性能问题

时间:2017-12-21 07:16:41

标签: react-native react-native-flatlist

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

问题1:在此期间,我无法执行向右滑动操作(即,在呈现所有(100)行之前,我无法执行滑动操作)。

问题2:当我添加代码行' extraData = {this.state.activeRow}'时,我也可以看到滑动性能滞后(即滑动动画响应非常慢)。到平面列表。在由于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,以改善平面列表的滑动性能。

0 个答案:

没有答案