React Native中headerStyle无法完全变色及标题上移问题求助

用户代码 #

<NavigationContainer independent={true}>
  <Stack.Navigator initialRouteName='Nav'>
    <Stack.Screen name="Nav" component={Nav}
      options={{
        title: "Welcome",
        headerStyle: {
          backgroundColor: '#f4511e',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }} />
    <Stack.Screen name="Form" component={Form} />
    <Stack.Screen name="Login" component={LoginForm} />
    <Stack.Screen name="network" component={Networking} initialParams={{ name: "Guest" }} />
  </Stack.Navigator>
</NavigationContainer>

问题描述 #

设备顶部状态栏（显示时间、电量，中间含摄像头）仍为白色，headerStyle设置的背景色未覆盖该区域；尝试用headerTitleStyle将Welcome标题上移，但无效果。

问题1：状态栏背景色未与Header统一 #

要让Header背景色覆盖状态栏区域，可通过以下两种方式实现：

方式一：在Screen的options中配置 #

先导入StatusBar组件，再修改Nav页面的配置，让Header背景延伸到状态栏：

import { StatusBar } from 'react-native';

<Stack.Screen name="Nav" component={Nav}
  options={{
    title: "Welcome",
    headerStyle: {
      backgroundColor: '#f4511e',
      // 让Header背景覆盖状态栏区域
      paddingTop: StatusBar.currentHeight,
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    // 设置状态栏文字为浅色，适配深色背景
    statusBarStyle: 'light-content',
  }} />

方式二：全局设置状态栏 #

在NavigationContainer外层添加StatusBar组件，全局统一状态栏样式：

import { StatusBar } from 'react-native';

<StatusBar backgroundColor="#f4511e" barStyle="light-content" translucent={false} />
<NavigationContainer independent={true}>
  {/* 导航内容 */}
</NavigationContainer>

问题2：Header标题无法上移 #

headerTitleStyle无法直接调整标题垂直位置，需使用headerTitleContainerStyle控制标题容器布局：

<Stack.Screen name="Nav" component={Nav}
  options={{
    title: "Welcome",
    headerStyle: {
      backgroundColor: '#f4511e',
      paddingTop: StatusBar.currentHeight,
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
    statusBarStyle: 'light-content',
    // 调整负数数值控制上移幅度，按需修改
    headerTitleContainerStyle: {
      marginTop: -8,
    },
  }} />

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