设置堆栈导航器标题高度的全局位置答案

【问题标题】：a global place to set header height of stack navigator设置堆栈导航器标题高度的全局位置
【发布时间】：2020-11-19 09:59:39
【问题描述】：

我已经创建了一个堆栈导航器：

const MyScreen = ({navigation}) => {
  const MyStack = createStackNavigator();
  return (
    <MyStack.Navigator
      initialRouteName=...
      screenOptions={{headerShown: true}}>
      <MyStack.Screen
        name=“MyScreen”
        component={MyScreen}
        options={{
          title: ‘Hello’,
          headerLeft: () => <Image...>,
        }}
      />
    </MyStack.Navigator>
  );
};

正如您在上面看到的，我已指定显示标题并显示headerLeft 图像。但是如何设置此堆栈导航器托管的所有屏幕的标题高度？是否有一个全球性的地方可以做到这一点？

【问题讨论】：

标签： react-native react-navigation react-native-navigation react-navigation-stack react-navigation-v5

【解决方案1】：

您可以使用 screenOptions 中的标题样式设置高度，如下所示

<MyStack.Navigator
  screenOptions={{
    headerShown: true,
    headerStyle: { backgroundColor: 'tomato', height: 20 },
  }}>

【讨论】：

【解决方案2】：

您可以在Stack.Navigator 上使用 screenOptions 属性。（参见文档here）

类似这样的：

<Stack.Navigator
      screenOptions={{
        headerLeft: () => <Image...>,
      }}
    >
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'My home' }}
      />
    </Stack.Navigator>

【讨论】：