如何将选项卡导航器标题减少到状态栏？

Question

我正在使用底部选项卡导航器及其标题。 但是我的标题比我想要的要长。 它在状态栏上，我想减少它。 如何减少页眉的上边距？ 我已经尝试在headerStyle使用marginTop但它说它在headerStyle不起作用。

            <Stack.Screen
              name="Home"
              component={TabNavigator}
              options={{
                headerShown: true,
                headerStyle: {
                  backgroundColor: 'rgba(8, 0, 122, 0.91)',
                  marginTop: Constants.statusBarHeight
                },
                headerTintColor: '#fff',
                headerLeft: null,
                headerTitleStyle: {
                  fontWeight: 'bold',
                  alignSelf: 'center',
                }}}/>

什么也没有发生。 我无法嵌入图片，我不知道为什么：/我该怎么办？？？

Answer 1

在您的情况下，标题与状态栏不重叠。 它看起来重叠的原因是因为更改headerStyle上的背景颜色也会更改状态栏的颜色。

因此，如果您想让状态栏与标题不同，只需给状态栏一个背景颜色：

StatusBar.setBackgroundColor("blue");

你可以把它放在你的主应用程序组件中的useEffect使用一个空的依赖数组，或者如果你在componentDidMount使用一个类。

https://reactnative.dev/docs/statusbar#setbackgroundcolor