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

Question

尝试了不同的方法 none 它们都有效，文档也没有帮助

<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>
        ),
  }
/>

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

How to change header height in react-navigation v6

react-native

react-navigation