如何在 React Native 上隐藏 createStackNavigator 的标题？答案

【问题标题】：How to hide header of createStackNavigator on React Native?如何在 React Native 上隐藏 createStackNavigator 的标题？
【发布时间】：2018-07-02 05:14:35
【问题描述】：

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

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;

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

【问题讨论】：

标签： react-native stack-navigator

【解决方案1】：

像这样更新你的代码

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

如果你不想要所有屏幕的标题，那么

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

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

【讨论】：

@JustAhead Awesome...如果有帮助，请点赞并接受答案。谢谢！
@JustAhead 我的回答有什么问题吗？
不，完美，当我试图为你的答案投票时，它说我“由声誉低于 15 的人投票，但不要更改公开显示的帖子分数”
你应该获得 15 分或更多来支持..但你可以接受我猜的答案
'navigationOptions' 中的弃用： - 'header: null' 将在未来版本中删除。改用'headerShown：false'

【解决方案2】：

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

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

参考：StackNavigatorConfig - createStackNavigator - React Navigation

【讨论】：

谢谢，这是在 react-navigation 3.5.1 中唯一对我有用的答案
与@Dror Bar 相同，这是使用 react-navigation@3.5.1 对我有用的唯一解决方案
当我使用两个，一个嵌套在另一个中时，创建StackNavigators，这工作而navigationOptions没有。

【解决方案3】：

你可以试试：

static navigationOptions = {
    header: null
}

在您的屏幕组件内部。

【讨论】：

【解决方案4】：

要隐藏特定屏幕或全局的标题，您可以这样做

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
    }
})

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我使用以下代码隐藏标题。

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

    }

【讨论】：

【解决方案7】：

2020 年更新 - REACT NAVIGATION 5+

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

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

【讨论】：

headerMode: 'none' 不需要，headerShown : false 就足够了。

【解决方案8】：

navigationOptions: { 
    header: null
}

已弃用。新的是

navigationOptions: { 
    headerShown: false
}

参考：https://stackoverflow.com/a/62732551/8724367

【讨论】：

【解决方案9】：

出于某种原因，我能找到的所有答案都来自 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/

【讨论】：

【解决方案10】：

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

以下解决方案不再起作用：

navigationOptions: {
  header: null,
},

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

options={{
  headerShown: true,
}}

【讨论】：