[React Native]解決水平 ScrollView 在 Pressable 內無法滑動的BUG

內容目錄 隱藏

像 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>