React Native中如何给headerLeft与headerRight组件添加外边距？

问题原因 #

你目前只给头部右侧容器设置了右外边距，没有给左侧容器配置对应的边距属性，另外部分版本的React Navigation的header默认容器样式优先级更高，也会导致自定义的margin配置不生效。

解决方案1：同时配置左右容器边距 #

React Navigation提供了headerLeftContainerStyle和headerRightContainerStyle两个配置项，分别控制头部左右容器的样式，补全左侧配置即可：

<BottomTab.Screen
  name="Home"
  component={TabOneScreen}
  options={({ navigation }: RootTabScreenProps<"TabOne">) => ({
    // 新增左侧容器边距配置
    headerLeftContainerStyle: {
      marginLeft: 10,
    },
    headerRightContainerStyle: {
      marginRight: 10,
    },
    tabBarIcon: ({ color }) => <TabBarIcon name="md-home" color={color} />,
    headerTitle: () => (
      <TabBarIcon name={"logo-twitter"} size={30} color={Colors.light.tint} />
    ),
    headerRight: () => (
      <MaterialCommunityIcons
        name={"star-four-points-outline"}
        size={30}
        color={Colors.light.tint}
      />
    ),
    headerLeft: () => (
      <ProfilePicture
        size={40}
        image={"https://pbs.twimg.com/profile_images/1431295293564280838/25cTnq7B_400x400.jpg"}
      />
    ),
  })}
/>

解决方案2：直接给内部元素加边距 #

如果方案1不生效，大概率是当前React Navigation版本的默认header容器样式优先级更高，直接给你渲染的头像和图标组件加margin即可：

<BottomTab.Screen
  name="Home"
  component={TabOneScreen}
  options={({ navigation }: RootTabScreenProps<"TabOne">) => ({
    tabBarIcon: ({ color }) => <TabBarIcon name="md-home" color={color} />,
    headerTitle: () => (
      <TabBarIcon name={"logo-twitter"} size={30} color={Colors.light.tint} />
    ),
    headerRight: () => (
      <MaterialCommunityIcons
        name={"star-four-points-outline"}
        size={30}
        color={Colors.light.tint}
        // 直接给右侧图标加右外边距
        style={{ marginRight: 10 }}
      />
    ),
    headerLeft: () => (
      <ProfilePicture
        size={40}
        image={"https://pbs.twimg.com/profile_images/1431295293564280838/25cTnq7B_400x400.jpg"}
        // 直接给左侧头像加左外边距
        style={{ marginLeft: 10 }}
      />
    ),
  })}
/>

如果方案2还是没生效，检查下你的ProfilePicture组件有没有透传style属性到内部的Image组件，没有的话补一下透传逻辑即可。

内容的提问来源于stack exchange，提问作者Oğulcan