如何在React Native Navigation中全局关闭所有页面的Header

当然可以全局关闭所有屏幕的Header，无需在每个屏幕单独设置。你可以通过给每个createStackNavigator添加defaultNavigationOptions配置来实现，具体修改后的代码如下：

import { Text, View } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation'
import SigninScreen from './src/Screen/SigninScreen';
import MapScreen from './src/Screen/MapScreen';

const switchNavigator = createStackNavigator({
  loginFlow: createStackNavigator({
    Signin: SigninScreen
  }, {
    // 全局隐藏loginFlow栈内所有屏幕的Header
    defaultNavigationOptions: {
      headerShown: false
    }
  }),
  mainFlow: createStackNavigator({
      Map: MapScreen
  }, {
    // 全局隐藏mainFlow栈内所有屏幕的Header
    defaultNavigationOptions: {
      headerShown: false
    }
  })
}, {
  // 若最外层栈存在Header，也可在此全局隐藏
  defaultNavigationOptions: {
    headerShown: false
  }
})

const App = createAppContainer(switchNavigator)

export default () => {
  return (
    <App />
  )
}

关键说明： #

• 每个createStackNavigator的第二个参数是全局配置项，defaultNavigationOptions会作用于该栈下的所有屏幕，设置headerShown: false即可统一隐藏Header。
• 如果后续某个特定屏幕需要单独显示Header，只需在该屏幕的navigationOptions中设置headerShown: true，即可覆盖全局配置。

内容的提问来源于stack exchange，提问作者olighta-dog