如何避免在react native中滚动sectionList时不触发波纹

Question

我将sectionList与可按项目一起使用。它可能是这样的：

<SectionList
data={list}
renderItem={(item) => {
return <Pressable android_ripple={{ color: gray, borderless: true }} />
}}
/>

波纹提供了一种简单的方式来实现按下后的用户效果，但我发现它会在滚动时触发。那真不好看。有什么办法可以避免吗？

Answer 1

如果您不需要使用onPressIn或onPressOut，我建议您使用TouchableOpacity。它的动画不会被滚动触发。如果你需要使用Pressable，你可以在滚动时去除波纹效应：

const [isScrolling, setIsScrolling] = useState(false)
return (
<SectionList
data={list}
renderItem={(item) => {
return (
<Pressable
android_ripple={!isScrolling &&{ color: gray, borderless: true }}
unstable_pressDelay={200}
/>
)
}}
onScrollBeginDrag={()=>{
console.log('Scroll started')
setIsScrolling(true)
}}
onScrollEndDrag={()=>{
console.log('Scroll ended')
setIsScrolling(false)
}}
/>
)

这种方法的问题是，有时可按下的onPressIn事件在isScrolling更新之前触发，并且无论如何都会发生波纹效应。我正在使用unstable_pressDelay来延迟足够长的时间来更新