gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 02:28:49 30 4
gpt4 key购买 nike

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

我正在竭尽全力让这项工作成功,我不明白像 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>
);
}

最佳答案

我完全理解这种挫败感。 我 +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}`)}>
...

祝你好运!

关于javascript - react native : How to properly disable touchable feedback when performing swiping gestures?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72524555/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com