React Native Android端react-navigation Header与状态栏间出现空白间隙问题

问题原因 #

你同时引入了两套完全独立的React Native导航框架，二者的默认适配逻辑叠加导致了顶部空白：

• 一套是社区维护的 @react-navigation/native，你在App.js中用它实现了页面栈逻辑
• 另一套是Wix开源的 react-native-navigation，你在index.js中用它注册了应用根组件、配置了根导航栈

两套导航框架都会默认对安卓系统状态栏做适配，各自添加了顶部预留间距，部分版本还会默认预留header高度，叠加后就出现了无法定位节点的多余空白。

解决方案 #

根据你想要保留的导航框架二选一即可：

方案1：保留@react-navigation/native，移除Wix导航配置 #

替换index.js的全部代码为React Native默认的组件注册逻辑：

import { AppRegistry } from 'react-native';
import App from './src/App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

如果调整后仍有小范围间距异常，可以给Stack.Navigator添加screenOptions配置调整状态栏适配：

<Stack.Navigator
  screenOptions={{
    headerStatusBarHeight: 0, // 可根据需求调整数值，或设置为StatusBar.currentHeight
  }}
>
  {/* 页面配置 */}
</Stack.Navigator>

方案2：保留react-native-navigation，移除@react-navigation相关代码 #

清空App.js中@react-navigation的相关逻辑，直接返回首页组件即可：

import React from 'react';
import { HomePage } from './pages';

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

后续所有页面跳转逻辑都通过react-native-navigation提供的API实现即可。

额外排查点 #

如果修改后仍存在空白：

• 检查HomePage组件的根容器是否设置了多余的paddingTop或marginTop
• 可以给导航栈全局配置headerShown: false先隐藏默认导航头，排查是否是多层header叠加导致的问题
• 可引入React Native自带的StatusBar组件，设置translucent={true}让状态栏透明，页面内容可延伸到状态栏下方，再手动调整适配间距即可。

内容的提问来源于stack exchange，提问作者Ali Hadi Ozturk