React Native OnPress在其他过程运行时无法触发

Question

我正在使用flatlist渲染我的列表，每个列表项目都是可单击的；但是，当我单击该项目时，它在加载所有内容之前都无法工作。

似乎当其他项目仍在渲染时，您无法执行操作或事件，直到所有内容都被满载为止。

这是我的代码：

return (
      <FlatList
        refreshing={this.props.refreshLoading}
        horizontal={false}
        initialNumToRender={20}
        maxToRenderPerBatch={20}
        showsVerticalScrollIndicator={true}
        numColumns={2}
        onEndReachedThreshold={0.1}
        bounces={true}
        keyExtractor={(item) => item}
        data={userList}
        renderItem={(item) => {
          return (
            <UserCard
              index={item.item[1]}
              userInfo={item.item[1]}
              contentSize={this.state.contentSize}
              navigation={this.props.navigation}/>
          )
        }}
        onEndReached={this.onLoadMore}
        onRefresh={this.onRefresh}
      />
    );

是否有适当的处理方法？

Answer 1

这是因为JavaScript线程被屏幕上的渲染阻止。一旦完成一批行的渲染，它将打开点击事件的线程。这种渲染发生在批处理中，可以调整。

在github上查看此问题。

基本上，您可以使用列表上的initialNumToRender和maxToRenderPerBatch参数播放，直到您获得对您有用的东西，并且在渲染时看起来不会看起来很跳动（它会呈现列表，如果值太低，则可能看起来很奇怪 - 称为填充率）。

您可以在反应本地文档中阅读有关这些参数的信息：

初始numtorender

maxtorenderperbatch