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

Question

TouchableOpacity 使事物可触摸，或者如 React Native 所说：

A wrapper for making views respond properly to touches.

但是在 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>
    );
  }}
/>;

您可以找到更多相关信息 Here。

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

Make TouchableOpacity not highlight element when starting to scroll [React Native]

javascript

listview

scroll

scrollview

react-native