如何使用TabNavigation在反应导航中显示标题

问题描述：

我注意到StackNavigation中的视图显示标题标题，但如果我在TabNavigation中设置了相同的屏幕，它将不显示标题。如果我在每个选项卡周围包装StackNavigation，或者将嵌套在StackNavigation内的TabNavigation包装起来，它只会显示标题。如何使用TabNavigation在反应导航中显示标题

为什么TabNavigation中的屏幕不显示标题 - 是否会出现预期的行为？如果是这样，在每个选项卡中使用StackNavigation还是在TabNavigation周围使用一个大型StackNavigation更好？

//标签导航不中每个屏幕显示的标题标题

const TabsNavigator = TabNavigator({ 
    Home: { 
    screen:HomeScreen, 
    }, 
    Profile: { 
    screen: ProfileScreen, 
    }, 
}, { 
    tabBarOptions: { 
    activeTintColor: '#e91e63', 
    }, 
    navigationOptions: { 
    header: { 
     visible: true, 
    }, 
    }, 
});

页眉显示，当我把它包在一个StackNavigator

default StackNavigator({ 
    Home: { screen: TabsNavigator }, 
});

或者是更好地做这种方式

export TabsNavigator = TabNavigator({ 
     Home: { 
     screen:StackNavigator({ 
      Home: { screen: HomeScreen }, 
     }), 
     }, 
     Profile: { 
     screen: StackNavigator({Profile: {screen: ProfileScreen}}), 
     }, 
    }, { 
     tabBarOptions: { 
     activeTintColor: '#e91e63', 
     }, 
     navigationOptions: { 
     header: { 
      visible: true, 
     }, 
     }, 
    });

它是预期的行为。如果你想拥有一个头部，你必须在每个Tab中放置一个StackNavigator，否则你必须自己创建一个头部。 – ixje

答

根据React-Navigation TabNavigator Docs没有标题navigationOption。因此，当您编写下面的代码时，您实际上正在设置一个不存在的值，因此您所做的事情不会影响任何内容。

navigationOptions: { 
    header: { visible: true }, 
}

不幸的是，在这种情况下你需要一个StackNavigator。

我不完全确定这是否是新的，但'StackNavigator'文档中的'navigationOptions'中***是'header'属性，但他可能错过的是'navigationOptions'对象它不是具有所有共同属性的全局对象，它们取决于导航器本身。https://reactnavigation.org/docs/navigators/stack#header –

谢谢你让我知道。当我写这个答案时，我不记得现有的，但它可能在此期间已经改变。 –

@JuanCarlosAlpizarChinchilla感谢您的源代码！漂亮而甜美！ – shimatai

答

即使这是一个相当古老的问题，几天前我也有过自己的这个问题，所以我会加上我的两分钱，希望这对未来的其他人也有用。

React Navigation是一款具有大量定制功能的令人惊叹的产品，但有时也会导致混淆，这也适用于文档的某些部分。 navigationOptions截至当前版本状态，对于所有屏幕都很常见，但“可用导航选项列表取决于屏幕添加到的导航器”。 https://reactnavigation.org/docs/tab-navigator.html#navigationoptions-used-by-tabnavigator因此header选项不起作用，因为它不适用于TabNavigator本身。

关于你的问题，哪种方法是最好的，取决于你想用你的应用程序本身的导航完成什么。如果您将TabNavigator置于StackNavigator之内，则标头组件对于TabNavigator内的所有标签都是通用的，这意味着标签转换将生效，但标头不会从其顶部位置移动。如果您另一方面选择在每个选项卡中嵌套一个StackNavigator，则标题将在每个选项卡内呈现，这意味着标题将沿选项卡过渡动画移动。

我做了一个快速的demo为你看到的差异，code也可用，如果你想玩它。

谢谢你的回答！它看起来很笨拙，但增加了另一个StackNavigator，但它像一个魅力。 – user1791914

如何使用TabNavigation在反应导航中显示标题

相关推荐