React Native - TabNavigator 在 Android 的 ScrollView 中不起作用答案

【问题标题】：React Native - TabNavigator isn't working inside ScrollView in AndroidReact Native - TabNavigator 在 Android 的 ScrollView 中不起作用
【发布时间】：2019-02-17 22:56:19
【问题描述】：

我在 ScrollView 中有一个 TabNavigator，它在 ios 中运行良好，但在 android 中却不行。 TAB 内容不可见，并且单击选项卡不起作用。请参阅下面链接中的工作示例。

试过了：

为 ScrollView 添加 flex: 1 或高度。
给标签添加 flex: 1 或高度。

export default class App extends React.Component { render() { return ( <View style={styles.container}> <TabNavigator/> <Text style={styles.paragraph}> Change code in the editor and watch it change on your phone! Save to get a shareable url. </Text> <View> <AssetExample/> </View> <ScrollView style={{height: 500}}> <TabNavigator/> </ScrollView> </View> ); } } const TabNavigator = createMaterialTopTabNavigator({ TabOne: Tab1, TabTwo: Tab2, }, { tabBarOptions: { activeTintColor: '#5B71F9', inactiveTintColor: '#888888', showIcon: false, labelStyle: { fontSize: 14 }, style: { backgroundColor: '#fff', shadowColor: '#fff', shadowOffset: { width: 0, height: 0, }, shadowOpacity: 0, shadowRadius: 0, elevation: 0, height: 47, borderBottomWidth: 1, borderBottomColor: '#E8E8E8' }, indicatorStyle: { height: 2, backgroundColor: '#5B71F9' } } });

例子：https://snack.expo.io/@15101668168/joyous-tortilla

【问题讨论】：

请更具体地说明您面临的问题，并粘贴一些代码示例并说明您到目前为止尝试过的内容。
嘿，伙计们。当ScrollView里面的TabNavigator，TAB面板消失，下面的链接就可以看到效果了[link](snack.expo.io/@15101668168/joyous-tortilla)@OriPrice
请在问题中添加特定代码 sn-ps，以及您迄今为止尝试过的内容，以便我们为您提供指导。
好的，谢谢！ @OriPrice

标签： android react-native scrollview react-navigation tabcontrol

【解决方案1】：

这是预期的行为：

ios下和android下scrollview TabNavigator的内容都可以正常工作。使用滚动和滚动页面创建 Material TopTabNavigator，而不是 TAB 窗格滚动。

示例：Example

参考：Reference for the answer

【讨论】：

是的，Listingzhao就是我。 github.com/react-navigation/react-navigation/issues/4987但是问题已经解决了。
是的，他们给了你一个解决方案，这就是它关闭的原因。你试过了吗？
是的，我试过了，但他的实现不是我的期望，我觉得这是一个问题的反应 - 原生，并问他们问题。 github.com/facebook/react-native/issues/21109
这个答案不起作用。如果我还需要滚动选项卡导航器以及其他组件怎么办。即父级是 ScrollView。它有其他组件和选项卡导航器。如果选项卡导航。在scrollView里面，它不起作用

【解决方案2】：

不确定这是否对您有所帮助，但您可以尝试将 TabNavigator 组件包含在具有一定高度的视图中，它应该可以解决您的问题，因为它解决了我的问题。

<View style={{ height: 400 }}>
    <TabNavigator/>
</View>

【讨论】：

当我们使用 ScrollViews 时，不应该将高度设置为滚动视图的固定常数，因为通常我们将滚动视图的高度设置为它的父级的 100% .这实际上并不能解决问题。