Question

我创建了一个Stack导航器：

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图片。但是，如何为该堆栈导航器托管的所有屏幕设置页眉高度？有全球性的地方吗？

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

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

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

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

2 个答案: