设置 header 堆栈导航器高度的全局位置

Question

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

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>
  );
};

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

Answer 1

您可以在 Stack.Navigator 上使用 screenOptions 道具。 （在文档中查看 here）

像这样：

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

Answer 2

您可以使用屏幕选项中的 header 样式设置高度，如下所示

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