我有一个FlatList，在其页脚中呈现一个选项卡视图。该选项卡视图允许用户在一个FlatList或另一个FlatList之间切换。所以这些FlatLists是同级的。
第一个FlatList "A" 的高度大于第二个FlatList "B"。当我选择第二个列表时，它的高度与"A" FlatList的高度相同。
我已经在食品盒（Snack）中复制了此问题，您可以看到类似的代码。我承认代码有点长但非常简单，只需专注于父FlatList（在App组件中）和在每个选项卡中呈现的两个FlatLists（在代码末尾）
有什么想法解决这个问题吗？我不知道问题是样式还是我必须做其他事情才能使其正常工作（所有FlatLists都必须具有自己的高度，而不是更大的高度）。
谢谢，我真的很感激您的帮助。
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}
/>
样式：
hidden: { display: "none" }
我已更新小吃点的解决方案！
由于在小吃点中我实现了自己的TabView，因此我决定使用库“react-native-tab-view”来实现相同的解决方案，因为它是目前最好的适用于React Native的标签。
想一想，一些遇到这个问题的人将能够解决它。
基本上，我们需要做的就是动态计算每个选项卡场景的高度，并将其传递给TabView的样式，使用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}
/>
注意：对于使用无限滚动和分页的选项卡，您不应该这样做。相反，您需要将高度设置为null ，以允许父FlatList自动获取其高度。
最终我把选项卡控件的标签内容全部删除了。这样做有些取巧，但对我来说起到了作用...
render() {
const {index} = this.state;
return (
<ScrollView>
<TabView
renderPager={this._renderPager}
renderScene={() => null}
onIndexChange={index => this.setState({index})}
initialLayout={{height: 0, width: Dimensions.get('window').width}}
/>
{index === 0 && <Tab1Content />}
{index === 1 && <Tab2Content />}
</ScrollView>
);
来源：- https://github.com/satya164/react-native-tab-view/issues/290#issuecomment-447941998
这个问题的解决方法是在每个标签页中使用相同的键来存储它们的状态。如果你为每个标签页使用不同的键，则会导致状态丢失和混淆，因为每个标签页都会有自己的状态副本。display: "none"（请查看更新 ;)） - Victor Molina