像 Threads 的串文,點擊能進入串文頁面,而串文中的圖片、影片又要可以水平滑動。
如果照下面這樣寫,水平滑動是無效的:
<Pressable onPress={()=>{}}>
...
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
>
...
</ScrollView>
</Pressable>解決方法
在 ScrollView 裡面加一層 View,並且設置 onStartShouldSetResponder={() => true} 就能解決。
<Pressable onPress={()=>{}}>
...
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
>
<View className="flex-row gap-4" onStartShouldSetResponder={() => true}>
...
</View>
</ScrollView>
</Pressable>這是 React Native 常見的手勢衝突問題,Pressable 預設會攔截觸控事件來做點擊判斷,當 Pressable 包住一個 ScrollView,水平滑動可能會被判定為點擊手勢,導致 ScrollView 沒辦法正常處理滑動手勢。
加上 onStartShouldSetResponder={() => true} 後,觸控事件就不會往外冒泡到 Pressable,也就不會被 Pressable 捕捉到作為點擊。
![[React Native]解決水平 ScrollView 在 Pressable 內無法滑動的BUG 7 React Native logo](https://www.may-notes.com/wp-content/uploads/2023/10/1_ub1DguhAtkCLvhUGuVGr6w.png)
