时间戳

首页 > 解决方案 > React Native onPress 在其他进程运行时无法触发

javascript - React Native onPress 在其他进程运行时无法触发

问题描述

我正在使用 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}
      />
    );

有正确的处理方法吗？

标签： javascriptreact-native

解决方案

这是因为 Javascript 线程被屏幕上的渲染阻塞了。一旦这批行的渲染完成，它将为点击事件打开线程。这种渲染是分批进行的，可以进行调整。

在 Github 上查看此问题。

基本上你可以在列表中使用initialNumToRender和maxToRenderPerBatch参数，直到你得到适合你的东西，并且在渲染时看起来不会跳动（它会逐渐渲染列表，如果值太低可能看起来很奇怪 - 称为填充率） .

您可以在 react-native 文档中了解这些参数：

initialNumToRender

maxToRenderPerBatch

推荐阅读