如何在 header 左侧或 header 右侧添加边距？

Question

我正在尝试做一个 Twitter 克隆来练习。我需要为左侧的图像和右侧的图标添加一些边距。这是现在的header。

我试过的代码：

<BottomTab.Screen
  name="Home"
  component={TabOneScreen}
  options={({ navigation }: RootTabScreenProps<"TabOne">) => ({
    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"
        }
      />
    ),
  })}
/>

它不会给出错误，但也不会增加边距。

Answer 1

您是否尝试过以下任何一项

将边距添加到组件而不是容器
在 headerRightContainerStyle

paddingRight

marginRight

有时向使用 flexbox 的容器（在本机反应中的所有组件）添加边距会导致错误和不一致，这些错误和不一致可以通过使用填充来避免

如何在 header 左侧或 header 右侧添加边距？

how to add margin in header left or header right in react native?

header

reactjs

react-native