使用没有标题的反应导航答案

【问题标题】：Use react-navigation without header使用没有标题的反应导航
【发布时间】：2019-01-02 22:18:04
【问题描述】：

有没有办法告诉 react-navigation 库我不想在我的应用程序的所有屏幕中使用标题？

而不是设置 navigationOptions = { 标头：空， } 在每个屏幕中，是否有一些导航器级别设置我只能设置一次？

【问题讨论】：

我认为这是不可能的，因为当您在StackNavigation 中创建新屏幕时，您需要告诉屏幕您不想显示屏幕本身的标题
Hide header in stack navigator React navigation的可能重复

【解决方案1】：

在 navigationOptions 上将其设置为 null，如下所示：

export const StackRouter = StackNavigator({

  Screen1: {
    screen: Screen1,
  },
  Screen2: {
    screen: Screen2,
  },
  Screen3: {
    screen: Screen3,
  },
  Screen4: {
    screen: Screen4,
  }
},
{
  headerMode: 'float',
  navigationOptions:({navigation}) => ({
    header: null,
  }),

});

【讨论】：

【解决方案2】：

这是帮助您修改 React Navigation 标题的方法。

    export default createStackNavigator({
     Home: {
       screen: HomeScreen
     },
     Login: {
       screen: LoginScreen
    }
   },
  {
   initialRouteName: 'Home',
   mode: 'modal',
   headerMode: 'none'
  })

看代码，你可以看到它有一个对象来配置你在 React Navigation 中想要的一切。

检查this link 以了解它。！

加油！

【讨论】：

【解决方案3】：

您可以选择在所有屏幕中隐藏导航区域。像这样更新你的代码。

export const Root = StackNavigator({
      Login: {
        screen: Home,
      },
    },{
      mode: 'modal',
      navigationOptions: {
             header: null//Will hide header for all screens of current stack navigator, 
       },
      initialRouteName: 'Home',
    })

【讨论】：

【解决方案4】：

如果您想应用堆栈的所有屏幕但不想显示标题，只需执行此操作。

export const stackScreens = StackNavigator(
{ 
   Screen1: { screen: Screen1 },
   Screen2: { screen: Screen2 }
}, 
{ 
   navigationOptions : ({ navigation }) => ({
     header: null
   })
});

【讨论】：