在 TabView 内嵌套水平 FlatList（方向相同）答案

【问题标题】：Nesting Horizontal FlatList inside TabView (same orientation)在 TabView 内嵌套水平 FlatList（方向相同）
【发布时间】：2021-02-18 05:04:25
【问题描述】：

我正在顶部 TabView 的一个页面内（来自 react-native-tab-view）渲染一个水平 FlatList（来自 react-native-gesture-handler）

我遇到的主要问题是 FlatList 滚动“优先级”大于 TabView 的滚动“优先级”，所以如果我想滑动顶部的 TabView，我必须将手指放在 FlatList 之外（这不是很专业)。

这是 FlatList 代码：

<FlatList
  data={data}
  renderItem={renderItem}
  horizontal
  pagingEnabled
  showsHorizontalScrollIndicator={false}
  style={styles.container}
/>

以及 TabView 的代码：

<TabView
  style={styles.tabView}
  renderTabBar={renderTabBar}
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={setIndex}
  initialLayout={initialLayout}
  removeClippedSubviews={false} // Pd: Don't enable this on iOS where this is buggy and views don't re-appear.
  swipeEnabled={true}
  swipeVelocityImpact={0.2}
  gestureHandlerProps={{
    activeOffsetX: [-30, 30], // To solve swipe problems on Android
  }}
/>

有没有办法让用户在滚动子组件（水平 FlatList）时滑动父组件（TabView）

【问题讨论】：

标签： javascript reactjs react-native horizontal-scrolling react-native-tab-view

【解决方案1】：

您是否尝试在 FlatList 中将滚动启用设置为 false？

https://reactnative.dev/docs/scrollview#scrollenabled

【讨论】：

【解决方案2】：

如果是这样，为什么需要将 flatList 组件作为水平滚动？

无论如何，我找到了一个有点棘手的解决方案：将 flatList 的 renderItem 的整个组件结果包装为 <TouchableWithoutFeedback/>.

【讨论】：