如何在react-navigation v6中更改标题高度

Question

尝试了不同的方法，但没有一个起作用，文档也没有帮助

<MainFlowStack.Navigator
      screenOptions={{headerTitleAlign: 'left', shadowColor: 'transparent', headerStyle: {height: 200}}}
    >
      <MainFlowStack.Screen name="RoutinesList" component={RoutinesListScreen} option={{headerStyle: {height: 600}}} options={{
        headerTitle: (props) =>
          (<View style={{width: '100%'}}>
            <Text style={styles.header1}>
              Your Workouts
            </Text>
          </View>),
        headerShadowVisible: false,
        headerStyle: {height: 100}
      }} />
      <MainFlowStack.Screen name="RoutineScreen" component={RoutineScreen} options={({ route }) => ({ title: route.params.name })} />
    </MainFlowStack.Navigator>

Answer 1

headerStyle

的

Stack.Navigator

属性不支持设置自定义高度。来自官方文档：

标题样式

标题的样式对象。支持的属性：

• 背景颜色

就我而言，与反应导航相比，这已经改变了

v5

。

但是，我们可以提供自定义标题组件并以这种方式设置特定高度。

<Stack.Screen
  options={
    header: (props) =>
        (
          <View style={{ height: 100 }}>
            ... 
          </View>
        ),
  }
/>

Answer 2

我没有足够的声誉来写评论，但@fabriziocucci 我实际上是对的。您可以编辑标题的高度。

我为 header 创建了自定义组件，然后将其传递到 header prop 中，如下所示：

<Tab.Navigator
      screenOptions={({route}) => ({
      header: NavHeader,
      })}>
    <Tab.Screen name="myComponent" component={myComponent}/>
</Tab.Navigator>

然后是样式：

style={{width: '100%', maxHeight: 20}}

Answer 3

在这里，我使用 ... headerStyle height 更改标题的高度。相信我，有效！

<Stack.Screen
  name="Preferences"
  component={ProfilePreferences}
  options={{
    headerTitle: () => <Header name="Preferences" />,
    headerStyle: {
      height: 102,
      backgroundColor: colors.dark,
      elevation: 0
    },
  }}
/>

Answer 4

大卫的回答并不完全正确。尽管 V6 文档没有提到它，但我刚刚测试过，您实际上可以按如下方式设置标题高度：

<Stack.Screen
  component={MyScreen}
  name="TripScreen"
  options={() => ({
    headerStyle: { height: 96 }
  })}
/>