2022 年更新
const renderScene = ({ route }) => {
//
// ???? Note: We are hidding tabs in order to avoid the
// "FlexBox Equal Height Columns" typical problem
//
switch (route.key) {
case "bitcoin":
return (
<View style={index !== 0 && styles.hidden}>
<Bitcoin />
</View>
);
case "ethereum":
return (
<View style={index !== 1 && styles.hidden}>
<Etherum />
</View>
);
case "rose":
return (
<View style={index !== 2 && styles.hidden}>
<Rose />
</View>
);
default:
return null;
}
};
...
<TabView
renderTabBar={renderTabBar}
navigationState={{ index, routes }}
renderScene={renderScene}
onIndexChange={handleOnIndexChange}
initialLayout={{ width: layout.width }}
removeClippedSubviews={false}
swipeEnabled
swipeVelocityImpact={0.2}
gestureHandlerProps={{
activeOffsetX: [-30, 30], // To solve swipe problems on Android
}}
style={globalStyles.flexContainer}
/>
Styles:
hidden: { display: "none" }
我已经用解决方案更新了零食!
正如在小吃中我实现了自己的 TabView 一样,我决定使用“react-native-tab-view”库实现相同的解决方案,因为它是目前 React Native 的最佳选项卡。
认为有些人有这个issue https://github.com/satya164/react-native-tab-view/issues/290就能解决它。
基本上,我们需要做的是动态计算每个选项卡场景的高度,并使用 onLayout 属性将其传递给选项卡视图的样式。
像这样:
const renderScene = ({ route }) => {
switch (route.key) {
case "inifiniteScrollFlatList":
return (
<FirstRoute />
);
case "rawDataFlatList":
return (
<View
onLayout={(event) => setTab1Height(event.nativeEvent.layout.height + TAB_HEIGHT)}
>
<SecondRoute />
</View>
);
case "otherRawDataFlatList":
return (
<View
onLayout={(event) => setTab2Height(event.nativeEvent.layout.height + TAB_HEIGHT)}
>
<ThirdRoute />
</View>
);
default:
return null;
}
};
<TabView
style={ index !== 0 && {
height: index === 1 ? tab1Height : tab2Height,
}}
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}
/>
Pd:您不应该对使用无限滚动和分页的选项卡执行此操作。相反,您必须将高度设置为 null 以允许父 FlatList 自动获取其高度。