如何隐藏原生导航栏？ReactNative iOS跳转原生页返回后导航栏异常显示咨询

问题现象 #

• 进入原生页面前RN页面显示正常：
  
• 从原生页面返回后顶部意外出现原生导航栏：
  

问题根因 #

iOS系统的UINavigationController导航栏显隐状态是全局生效的，跳转原生页面时原生页默认会展示导航栏，pop返回RN容器页时没有重置导航栏显隐状态，就会出现原生导航栏和RN页面内容/自定义导航栏重叠的问题。

修复方案 #

方案1：RN容器页强制隐藏导航栏（推荐） #

在承载RN页面的原生ViewController的viewWillAppear生命周期方法中，强制隐藏当前导航控制器的导航栏，和转场动画保持同步避免闪烁：
Objective-C代码：

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    [self.navigationController setNavigationBarHidden:YES animated:animated];
}

Swift代码：

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    navigationController?.setNavigationBarHidden(true, animated: animated)
}

方案2：状态记录恢复（适用于RN容器需要动态控制导航栏显隐的场景） #

如果你的RN容器页存在需要展示原生导航栏的场景，不要全局固定隐藏，可以在跳转到原生页面前记录当前导航栏的显隐状态，在原生页面执行pop操作前，将导航栏恢复到跳转前的状态即可。

方案3：RN侧兜底触发隐藏 #

如果你使用react-navigation等RN侧导航库，可以在页面聚焦时调用原生暴露的方法隐藏导航栏：

1. 原生侧暴露隐藏导航栏的方法给RN调用
2. RN侧监听页面聚焦状态触发隐藏：

import { useEffect } from 'react';
import { NativeModules } from 'react-native';
import { useIsFocused } from '@react-navigation/native';

const RnPage = () => {
  const isFocused = useIsFocused();
  useEffect(() => {
    isFocused && NativeModules.NavUtil.hideNavgationBar();
  }, [isFocused]);
  // 其余页面逻辑
}

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