React Native：执行滑动手势时如何正确禁用可触摸反馈？

Question

滑动手势，即滚动、拉动刷新等。

我正在绞尽脑汁地尝试让这项工作成功，我不明白像 Facebook 这样的应用程序如何能如此出色地完成这项工作。实现起来似乎很简单，但我一生都无法弄清楚。

仅供参考：我使用的是带有 Touchable 组件的 FlatList。我一直在摆弄 FlatList 道具（在滚动时、在滚动开始拖动时、在滚动结束拖动时等）以及 Touchable 道具（在按下时、按下时、按下延迟时等）。

我想要的：在 Facebook 应用程序上，当我开始滚动或拉动刷新时，点击反馈被禁用，因此看起来不像我点击了帖子。但与此同时，当我点击帖子的那一刻，点击反馈的反应非常灵敏。这是怎么做到的？

我得到的结果：当我开始滚动或拉动刷新时，即使我想滚动/刷新，也会播放点击反馈。为了解决这个问题，我尝试设置pressDelayIn50 毫秒。但现在，快速点击帖子不会播放反馈。

应用程序.js

export default function App() {
  const [refreshing, setRefreshing] = useState(false);
  const [posts, setPosts] = useState([
    {
      id: 1,
      username: '@somedude',
      body: 'This is the best app ever, wow.',
    },
    {
      id: 2,
      username: '@doggo',
      body: 'Woof woof. Woof woof woof! Woof... Woof woof? Woof!',
    },
  ]);

  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => setRefreshing(false), 1000);
  }

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={posts}
        renderItem={({ item }) => <Post post={item} />}
        keyExtractor={item => item.id}
        refreshing={refreshing}
        onRefresh={onRefresh}
      />
    </SafeAreaView>
  );
}

Post.js

export const Post = ({ post }) => {
  return (
  <TouchableOpacity
    activeOpacity={0.5}
    onPress={() => console.log(`Press id ${post.id}`)}
  >
    <View style={styles.postPontainer}>
      <View style={{ marginBottom: 5 }}>
        <Text>{post.username}</Text>
      </View>
      <View style={styles.textContainer}>
        <Text>{post.body}</Text>
      </View>
    </View>
  </TouchableOpacity>
  );
}

Answer 1

你可以检查这个答案，我认为它会帮助你解决你的问题。

我认为pointerEvents这是你需要处理这个问题的财产。该属性控制View是否可以作为触摸事件的目标。

参考文献1

参考2