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

Posted 2023-02-19

【中文标题】React Native - TabNavigator 在 Android 的 ScrollView 中不起作用

【英文标题】：React Native - TabNavigator isn't working inside ScrollView in Android

【发布时间】：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

【参考方案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% .这实际上并不能解决问题。