Flatlist + React Native Router Flux:慢速导航过渡

时间:2017-09-28 13:25:01

标签: react-native jsx react-native-flatlist react-native-router-flux

我有一个包含800多个条目的数据源,我使用FlatList进行渲染。

每个renderItem都会在项目按下时接收导航到另一个屏幕的功能。

问题是屏幕之间的转换非常缓慢。

我注意到即使滚动工作速度很快,仍然会为DOM中的所有800个条目调用renderItem。当最终渲染所有项目时,导航工作正常。

我尝试过使用initialNumToRender,getItemLayout和waitForInteraction道具,并尝试将我的renderItem组件(现在是无状态组件)更改为纯组件。到目前为止似乎没有任何工作。

任何建议都将受到赞赏。

这里有一些代码可能会有所帮助:

 <FlatList
   data={this.state.listDataSource}
   renderItem={({ item, index }) => this.renderListItem(item, index)}
   keyExtractor={this._keyExtractor}
   style={{
     flex: 1,
     marginHorizontal: 30,
     borderTopWidth: 1,
     borderColor: '#919191',
   }}/>


renderListItem(item, index) {
    return <ListItem dotFunc={() => this.onListItemPress(index)} item={item} />;
  }

onListItemPress(index) {
    Actions.itemDetail({
      index
    });
  }


// ListItem.js correctly exported
const ListItem = ({ dotFunc, item }) => (
<TouchableOpacity onPress={() => Actions.contactDetail({rowID})}>
<Text>{Item}</Text>
</TouchableOpacity>
}

由于

0 个答案:

没有答案
相关问题