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

Posted 2023-04-18

【中文标题】需要按 flatlist child 2/3 秒才能实际移动到链接

【英文标题】：need to press flatlist child for 2/3 second to actually travel to link

【发布时间】：2019-10-25 17:55:39

【问题描述】：

发生了什么：

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

我试过了：

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

在平面列表的 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 还很陌生，所以我可以假设这是一些基本的东西......

【问题讨论】：

这是在真实设备上还是在模拟器模拟器中？在模拟器/模拟器中可能性能不佳，也许在真实设备上运行应用程序会解决问题。

不，如果我点击然后等待它什么也不做。如果我想触发 onPress，我需要将手指放在按钮上（正如我所说的 2/3 秒）然后松开。当我释放时 onPress 触发器（因为它应该）

是的，我使用的是真实设备。为了检查这是否是延迟问题，我尝试在生产模式下编译应用程序。不仅如此，当我使用 onPressOut 时，它会立即触发，因此可以这样做，我只是做错了事，但不能指望它！

【参考方案1】：

有效的方法：将 react-native 中的 Touchable 替换为

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

【参考方案2】：

你有这个问题是因为财产

maxToRenderPerBatch=1

正如文档所说，来自此属性的 CONS 正在阻止其他进程。

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

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

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

如果对你有帮助，请点赞。

【讨论】：

感谢您的回答。这确实是问题所在，我解决了它甚至不明白为什么它不起作用。我使用 maxToRenderPerBatch 来优化我的平面列表的渲染，因为它很长，因此渲染时间很长。最近我把这个：import TouchableOpacity from 'react-native'; 改成了这个：import TouchableOpacity from 'react-native-gesture-handler';，它解决了这个问题，因为新的必须解决这个问题。谢谢你的解释！

【参考方案3】：

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

【讨论】：

是的，它是相同的行为（除了明显的点击动画，因为它应该是）。顺便说一句，点击动画是在我希望它移动的时候完成的（即使我不长按也不会有延迟）。我不知道手势处理程序，我会看看它

我检查了 react native 手势处理程序，当我使用 expo 时，安装非常复杂（我需要使用 ReactRootView 的特殊子类来响应本机导航和手势处理程序）

如果行为与 TouchableHighlight/TouchableOpacity 相同，那么我猜你的 FlatList 存在性能问题。看看你的 FlatList 的渲染函数被调用了多少次。