react-native - 需要按 flatlist child 2/3 秒才能实际移动到链接

Question

怎么了 ：

我有一个平面列表，它渲染了一个内部带有 onPress 的组件。它正在完成这项工作，但我需要按下平面列表大约两到三秒钟，以便 onPress 触发破坏用户体验。

我试过了：

• 用 onPressOut 替换 onPress ，每次靠近按钮时都会立即触发（导致意外按下按钮）

• 在平面列表的 renderItem 中移动 onPress（不在调用的组件中）

平面清单：

travelToOperation = (papi) => { this.props.link.navigate('Operation', { papi: papi }); }

<FlatList
      style={styles.collaboratorList}
      data={latestOperation.stack}
      keyExtractor={(item) => item.NUMERO}
      maxToRenderPerBatch={1}
      renderItem={({ item }) => <LastOperation data={item} 
       operationDetail={this.travelToOperation} />
      }
 />

lastOperation 组件：

<TouchableWithoutFeedback onPress={() => this.props.operationDetail(this.props.data)}> <View>//somestuff </View> </TouchableWithoutFeedback>

我想要的是 ：

只是 onPress 的基本结果（就像我在应用程序中所做的所有其他 onPress 一样），这是一个基本的点击

感谢您的任何建议，我对 react-native 很陌生，所以我可以假设这是一些基本的东西......

Answer 1

什么有效：用 react-native 替换 Touchable

import { TouchableOpacity } from 'react-native-gesture-handler';

Answer 2

使用“TouchableHighlight”、“TouchableOpacity”而不是“TouchableWithoutFeedback”的行为是否相同？顺便说一句，您可以使用“ https://kmagiera.github.io/react-native-gesture-handler ”获得最佳用户体验。为什么使用“TouchableWithoutFeedback”？

Answer 3

你有这个问题是因为财产

maxToRenderPerBatch={1}

正如文档所说，该属性的缺点正在阻止其他进程。

优点：设置更大的数字意味着滚动时视觉空白区域更少（增加填充率）。

缺点：每批更多的项目意味着更长的 JavaScript 执行时间可能会阻塞其他事件处理，例如按下，从而损害响应能力。

您必须删除此道具才能使 UI 呈现异步。

如果这对你有帮助，请喜欢它。