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线程被屏幕上的呈现所阻止。一旦完成了这批行的渲染，它将为click事件打开线程。此渲染可以分批进行，可以进行调整。

请参阅Github上的this问题。

基本上，您可以在列表上使用initialNumToRender和maxToRenderPerBatch参数，直到获得适合您的内容，并且在渲染时看起来并不跳动（它将逐步渲染列表，这可能会逐渐如果值太低则看起来很奇怪-称为填充率）。

您可以在react-native文档中了解有关这些参数的信息：

initialNumToRender

maxToRenderPerBatch

当其他进程正在运行时，React Native onPress无法触发

1 个答案: