javascript - react native : How to properly disable touchable feedback when performing swiping gestures?

Question

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

我正在竭尽全力让这项工作成功，我不明白像 Facebook 这样的应用程序如何如此出色地完成这项工作。这似乎是一件很容易实现的事情，但我一辈子都弄不明白。

仅供引用:我使用的是一个带有 Touchable 组件的 FlatList。我一直在摆弄 FlatList Prop (滚动、滚动开始拖动、滚动结束拖动等)以及 Touchable Prop (按下、按下、按下延迟等)。

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

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

应用程序.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

我完全理解这种挫败感。 我 +1 ucup 的建议 以检查 react-native-gesture-handler。与此同时，我在滚动时禁用了 TouchableOpacity，并拨回了 delayPressIn，它似乎工作得很好。看看你的想法:

添加状态跟踪canPress

export default function App() {
  const [canPress, setCanPress] = useState(true); //
  const [refreshing, setRefreshing] = useState(false);
  ...

连接到 FlatList

<SafeAreaView style={styles.container}>
    <FlatList
      data={posts}
      onScrollBeginDrag={() => setCanPress(false)} //
      onScrollEndDrag={() => setCanPress(true)} //
      renderItem={({item}) => <Post post={item} canPress={canPress} />} //
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={onRefresh}
    />
</SafeAreaView>

然后连接到您的TouchableOpacity

<TouchableOpacity
      disabled={!canPress} //
      activeOpacity={0.5}
      delayPressIn={50} //
      onPress={() => console.log(`Press id ${post.id}`)}>
      ...

祝你好运!