React Native 中的 headerStyle 不会完全改变标题颜色

Question

这是

index.jsx

<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>

这是我正在使用的物理设备的屏幕截图

队伍中央有一个摄像头，我可以在那里查看击球时间百分比等。

为什么颜色没有显示在顶部白条中？

以及如何将

welcome

文本拉近顶部，我只用

headerTitleStyle

尝试过，但似乎没有任何效果。

Answer 1

您需要使状态栏半透明。

import { StatusBar } from 'react-native';

// Inside your component
<StatusBar translucent />