React Native中React Navigation栈导航及全局设置header为null的方法

一、让HomeStack的头部设置生效的正确方式 #

你之前的写法里，HomeStack.navigationOptions是给父导航器（比如TabNavigator）使用的配置（比如你设置的tabBarLabel就是给Tab栏用的），它并不会作用于栈内部屏幕的头部配置。要让栈里的所有屏幕都去掉头部，需要在创建createStackNavigator时，通过第二个参数的defaultNavigationOptions来设置：

// 正确的写法
const HomeStack = createStackNavigator(
  { Home: HomeScreen },
  {
    // 这里设置栈内所有屏幕的默认导航选项
    defaultNavigationOptions: {
      header: null
    }
  }
);

// 给父Tab导航器的配置单独放在这里
HomeStack.navigationOptions = {
  tabBarLabel: 'Home'
};

这样设置后，HomeStack里的所有屏幕都会自动应用header: null，不需要再在单个屏幕组件里重复设置。

二、全局设置所有页面都去掉头部 #

如果你的所有页面都不需要头部，可以根据你的导航结构选择以下两种方式：

方式1：在根导航器统一设置

如果你的整个App是基于一个根Stack Navigator（或者嵌套导航的最外层导航器），直接在根导航器的defaultNavigationOptions里设置header: null，所有子导航器的屏幕都会继承这个配置：

const RootStack = createStackNavigator(
  {
    Home: HomeStack,
    Profile: ProfileStack,
    // 其他所有页面/栈
  },
  {
    defaultNavigationOptions: {
      header: null
    }
  }
);

const AppContainer = createAppContainer(RootStack);

方式2：自定义全局默认导航选项

如果你需要更灵活的全局配置，可以在项目入口文件里全局覆盖Stack Navigator的默认导航选项：

// 在项目入口文件（比如App.js）里添加
import { createStackNavigator } from 'react-navigation-stack';

// 全局覆盖Stack Navigator的默认导航选项
createStackNavigator.navigationOptions = () => ({
  header: null
});

这种方式适合所有页面都基于Stack导航的场景，所有新建的Stack Navigator都会自动继承这个头部隐藏的设置。

内容的提问来源于stack exchange，提问作者deadcoder0904