如何在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的 prop不Stack.Navigator支持设置自定义高度。来自官方文档：

\n

\n

标题样式\xe2\x80\x8b

\n

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

\n

\n
• 背景颜色
\n

\n

\n

就我而言，与react-navigation相比，这已经发生了变化v5。

\n

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

\n

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

\n