问题描述
我正在顶部 TabView(来自 react-native-gesture-handler)的其中一个页面内呈现一个水平 FlatList(来自 react-native-tab-view)
我遇到的主要问题是 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)
解决方法
您是否尝试过在 FlatList 中将滚动启用设置为 false?
https://reactnative.dev/docs/scrollview#scrollenabled
,如果是这样,你为什么需要 flatList 组件作为水平滚动?
无论如何,我发现了一个有点棘手的解决方案:将 flatList 的 renderItem 的整个组件结果包装为
<TouchableWithoutFeedback/>
。