react-native - 如何在 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

Stack.Navigator 的 headerStyle 属性不支持设置自定义高度。来自official documentation :

headerStyle​

Style object for header. Supported properties:

• backgroundColor

就我而言，这与 react-navigation v5 相比有所改变。

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

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