如何在React Native（Expo环境）中移除导航头的内边距和外边距

问题根源 #

上下黑条由多重多余边距配置叠加导致，核心问题如下：

• NavigationContainer 组件本身不支持style属性，你定义的NotchAware样式不会生效，全局边距配置位置错误
• Welcome页面根容器SafeAreaView硬编码了marginTop:50、marginBottom:20，直接造成了上下留白
• 栈导航默认的内容容器未配置边距清零，存在默认占位

解决方案 #

按以下步骤修改即可移除黑条：

1. 移除NavigationContainer上绑定的style属性，在栈导航上配置全局内容样式

// 修改后的App.js
export default function App() {
  const Stack = createStackNavigator();
  return (
    <NavigationContainer>
      <Stack.Navigator 
        initialRouteName="Home"
        screenOptions={{
          headerShown: false,
          // 全局配置路由页面边距清零，占满全屏
          contentStyle: { flex: 1, margin: 0, padding: 0, backgroundColor: '#fff' }
        }}
      >
        <Stack.Screen name="Home" component={Welcome} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 修正Welcome页面根容器样式，移除多余的上下边距

// Welcome组件的container样式修改后
container: {
  flex: 1,
  backgroundColor: '#fff',
  justifyContent: 'space-between',
  // 原来的marginTop、marginBottom直接删除
  // 如果需要左右、底部的小留白，用padding代替margin避免出现黑底
  paddingHorizontal: 5,
  paddingBottom: 5,
  // 安卓状态栏适配保留，用padding不用margin
  paddingTop: Platform.OS === 'android' ? 25 : 0,
},

3. 可选配置：如果需要内容延伸到状态栏区域，在app.json的expo配置节点下添加透明状态栏配置：

"androidStatusBar": {
  "translucent": true,
  "backgroundColor": "transparent"
},
"ios": {
  "statusBar": {
    "translucent": true
  }
}

修改后重启Expo服务即可看到黑条完全消失。

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