需要按 flatlist child 2/3 秒才能实际前往 link

Question

发生了什么：

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

我试过了:

将 onPress 替换为 onPressOut，每次您靠近按钮时都会立即触发（导致按钮被意外按下）
在flatlist的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

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

Answer 2

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

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

Answer 3

你遇到这个问题是因为属性

maxToRenderPerBatch={1}

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

Pros: Setting a bigger number means less visual blank areas when scrolling (increases the fill rate).

Cons: More items per batch means longer periods of JavaScript execution potentially blocking other event processing, like presses, hurting responsiveness.

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

如果对您有帮助请点个赞

需要按 flatlist child 2/3 秒才能实际前往 link

need to press flatlist child for 2/3 second to actually travel to link

react-native

react-native-flatlist

onpress

发生了什么：

我试过了:

我想要什么：