开始滚动时,使TouchableOpacity不突出显示元素[React Native]

Question

TouchableOpacity 使事物可触摸,或者如React Native所说:

用于使视图正确响应触摸的包装器.

但是当我们(或者至少我)不想要它时,在内部使用它ScrollView或ListView导致突出显示.

向下滚动ListView填充元素有三个步骤:

• 触摸元素
• 向上移动手指
• 释放手指

触摸元素会立即生成高亮动画.但在这种情况下,我们只想滚动.我们不想对该元素做任何事情,无论是突出显示还是打开详细视图等.

这不会一直发生,但大部分时间都在我的Android设备上.

处理这个问题的正确方法是什么？

Answer 1

滚动手势应取消TouchableOpacity触摸响应者,但如果您认为TouchableOpacity突出显示是提前触发的,则可以尝试调整delayPressIn属性.

Answer 2

您可以使用delayPressIn={1000}，这将延迟动画，直到您按下 1 秒。

delayPressIn延迟属性<TouchableOpacity>，以毫秒为单位，从触摸开始，调用 onPressIn 之前。

使用示例：

<FlatList
  horizontal
  contentContainerStyle={{ paddingRight: 16 }}   // this set the padding to last item
  showsHorizontalScrollIndicator={false}         // hide the scroller
  data={results}
  keyExtractor={(result) => result.data.id}
  renderItem={({ item }) => {
    return (
      <TouchableOpacity
        delayPressIn={1000}         // delay animation for 1 second
        onPress={() => navigation.navigate('ResultsShow')}
      >
        <ResultsDetail result={item.data} />
      </TouchableOpacity>
    );
  }}
/>;

您可以在这里找到更多相关信息。