You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

React Native中如何移除StackNavigator所有页面的头部导航栏

解决StackNavigator全局隐藏头部导航栏不生效的问题

嘿,我看你尝试移除StackNavigator所有页面的头部导航栏但没成功,问题出在你的配置方式上——你把全局导航选项写在了navigationOptions里,但在createStackNavigator的配置参数中,全局默认的导航选项应该用defaultNavigationOptions,这也是你的设置没生效的原因。

修正后的代码如下:

import React, {Component} from 'react';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Home from './telas/Home'
import Login from './telas/Login'
import Cadastro from './telas/Cadastro'

const stackNavigator = createStackNavigator(
  {
    Home:{ screen:Home },
    Login:{ screen:Login },
    Cadastro:{ screen:Cadastro },
  }, 
  { 
    // 全局默认导航选项要放在defaultNavigationOptions下
    defaultNavigationOptions:{ 
      header: null 
    } 
  }
)

const AppContainer = createAppContainer(stackNavigator);
export default AppContainer;

另外补充个小技巧:如果之后某个页面需要单独显示头部导航栏,你可以在对应的页面组件里单独配置navigationOptions来覆盖全局设置,比如在Home组件里:

class Home extends Component {
  // 单独为Home页面设置头部
  static navigationOptions = {
    header: () => <YourCustomHeaderComponent />, // 可以自定义头部,也可以设置为默认头部
  };

  // 组件其他逻辑
  render() {
    return (
      // ... 页面内容
    )
  }
}

内容的提问来源于stack exchange,提问作者wesif

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.14 07:28:12