如何在 React Native 上隐藏 createStackNavigator 的 header？

Question

我想隐藏 header 因为我已经在代码中设置了工具栏的样式：

import {createStackNavigator}
from 'react-navigation'
const AppStackNavigator = createStackNavigator ({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
})
class App extends Component {
render() {
  return (
  <AppStackNavigator initialRouteName='Home'/>`<br>
  );
  }
}
export default App;

我应该在我的代码中添加什么？

Answer 1

像这样更新你的代码

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage, 
        navigationOptions: {
            header: null,
        },
    },
})

如果您不希望 header 适用于所有屏幕，则

const AppStackNavigator = createStackNavigator ({
    Home: {
        screen: HomePage,
    },
},
{
    navigationOptions: {
        header: null,
    },
})

注意：此解决方案适用于旧版本的 React Navigation。

Answer 2

要针对特定屏幕或全局隐藏 headers，您可以执行

const StackNavigator = createStackNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {
            header: null // Will hide header for HomePage
        }
    }
}, {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack navigator,
        headerLeft: <HeaderLeft /> // Component to be displayed in left side of header (Generally it can be Hamburger)
        headerRight: <HeaderRight /> // Component to be displayed in right side of header
    }
})

另请注意，屏幕特定设置将覆盖全局设置。希望，这会有所帮助。

Answer 3

我使用以下代码隐藏了 header。

   {
    navigationOptions: {
        header: null // Will hide header for all screens of current stack 

    }

Answer 4

要为 createStackNavigator 中的所有视图禁用 headers，您可以使用 headerMode 选项。

const AppStackNavigator = createStackNavigator({
  Home: HomePage,
  Friend: AddFriend,
  Bill: AddBill,
},
{
  headerMode: 'none',
})

参考：StackNavigatorConfig - createStackNavigator - React Navigation

Answer 5

你能试试吗：

static navigationOptions = {
    header: null
}

在您的屏幕组件内。

Answer 6

2020 年更新 - React 导航 5+

使用 header : null 将不再有效。在选项中，您需要将 headerMode 设置为 none 连同 headerShown 到 false如下：

<AuthStack.Navigator>
   <AuthStack.Screen name="AUTH" component={AuthScreen} options={{headerMode: 'none', headerShown : false}}/>
</AuthStack.Navigator>

Answer 7

试试这个
options ={{ header: () => {}}}
由于您明确没有为 header 函数提供任何参数，因此它不会显示任何 header.
有关更多信息，请参阅：react native docs

Answer 8

出于某种原因，我能找到的所有答案都来自 React navigation v4，这在 v5 中不起作用。在花了一些时间之后，我想出了一种在 v5 中隐藏工具栏的方法。这是：

import { createStackNavigator } from "@react-navigation/stack";
import { NavigationContainer } from "@react-navigation/native";

...

const Stack = createStackNavigator();

....
//and inside render
render(){
    return (
          <NavigationContainer>
            <Stack.Navigator>
              <Stack.Screen
                name="Home"
                component={HomeScreen}
                options={{
                  title: "Home",
                  headerShown: false,
                }}
              />
}

headerShown: false, 这样就可以了

如果您需要有关从 v4 迁移到 v5 的帮助 -> https://reactnavigation.org/docs/upgrading-from-4.x/

Answer 9

navigationOptions: { 
    header: null
}

已弃用。新的是

navigationOptions: { 
    headerShown: false
}

参考：

Answer 10

React Navigation 6（从 10 月 21 日开始）

下面的解决方案不再有效：

navigationOptions: {
  header: null,
},

而不是 navigationOptions，您只想使用 options，并将 headerShown 设置为 true，将 header 设置为 null。工作解决方案：

options={{
  headerShown: true,
}}

如何在 React Native 上隐藏 createStackNavigator 的 header？

How to hide header of createStackNavigator on React Native?

react-native

stack-navigator