标头高度 - React Native / Expo 路由器

Question

我正在开发一个 React Native 项目，使用 Expo 路由器来处理标题/或顶部导航栏。

在

<Stack.Screen  name="usage"  options={usageHeader} 

有不同的方法来设置标题，可以使用

header

为整个标题设置自定义组件，或者使用导航功能，然后使用

headerTitle 

和

headerLeft 

和

headerRight

。我使用第二种方法，因为我不必担心安全区域等问题。但问题是我找不到增加标题高度的方法。

headerStyle

仅接受背景颜色。

有解决办法吗，还是我遗漏了什么？ 我在 gitHub 上发现了一个关于此问题的问题，但除了使用标头和定义整个自定义组件之外，我没有看到任何解决方案。

https://github.com/react-navigation/react-navigation/issues/10097

headerStyle: { backgroundColor: '#E9FDFF', height: 100, // not doing anything marginTop: 100, // not doing anything paddingTop: 100, // not doing anything },

Answer 1

您可以使用 headerStyle 更改背景和高度属性。但对于 headerStyle，您无法更改 margin 或 padding 属性，您可以编辑标题。

示例：

<Stack.Screen options={{
                headerStyle: {
                    height: 300,
                    backgroundColor: '#E9FDFF',
                },
                headerTitleStyle: {
                    marginTop: 100,
                    padding: 100
                }
            }} name="AboutProduct" component={AboutProduct} />

输出