react-native - 当 FlatList 正在加载新项目时，FlatList 项目不会响应触摸

Question

我的列表组件是这样的:

<List>
  <FlatList
    data={films}
    renderItem={({ item }) => (
      <FilmListItem
        filmSummary={item}
        navigateToDetailsScreen={navigateToDetailsScreen}
      />
    )}
    keyExtractor={() => cuid.slug()}
    ListHeaderComponent={<Header totalResults={totalResults} />}
    ListFooterComponent={<Footer />}
    onEndReached={() => dispatchFetchPage()}
  />
</List>

FilmListItem 渲染函数如下所示:

  render() {
    const { filmSummary } = this.props
    return (
      <TouchableOpacity onPress={this.onPress}>
        <ListItem title={filmSummary.Title} subtitle={filmSummary.Year} />
      </TouchableOpacity>
    )
  }

FlatList 载入满屏项目，然后继续载入另外三个满屏项目。但是，在 FlatList 完成加载其他页面之前，已经呈现的 TouchableOpacity 项目不会响应触摸。

一旦 FlatList 完成加载，项目就会响应触摸，但之前不会。如果我将列表滚动到底部并且 FlatList 继续加载更多项目，可见项目将再次变得无响应。

我错过了什么吗？

Answer 1

这似乎与性能问题有关。我的建议:

1. 为您的渲染项目功能使用纯组件。它会比较浅，所以它不会那么容易地重新渲染。性能提升。

2. 不要在您的 props 上使用匿名函数。将它移到渲染函数之外。因此，每次您的组件重新呈现时，该函数都不会重新创建。

3. 将 initialNumToRender={number} 属性添加到 Flatlist。它只会显示屏幕上可见的那些组件。

示例代码:

// 1. make sure your FilmListItem is pure component!!
class FilmListItem extends React.PureComponent {
  render() {
    // ....
  }
}

// 2. Move out all anonymouse function
_renderItem = ({ item }) => (
  <FilmListItem
    filmSummary={item}
    navigateToDetailsScreen={navigateToDetailsScreen}
  />
);

_keyExtractor = () => cuid.slug();

// render of your main component
render() {
  return (
    <List>
      <FlatList
        initialNumToRender={number} // 3. try add initialNumToRender
        data={films}
        renderItem={this._renderItem}
        keyExtractor={this._keyExtractor}
        ListHeaderComponent={<Header totalResults={totalResults} />}
        ListFooterComponent={<Footer />}
        onEndReached={dispatchFetchPage} // no need anonymouse function
      />
    </List>
  );
}

您可以在这里查看类似的性能问题:

https://github.com/facebook/react-native/issues/13649