Question

我有一个包含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>
}

由于

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

0 个答案: