将标题置于 React Native 的标题中心并在填充上获得良好的缓冲

Question

我们正在尝试将标题放在 React Native 中居中，同时将其尽可能靠近右侧和左侧的图标。正如您从图片中看到的，此应用程序上的此版本并未扩展至执行此操作。开发人员正在右侧图标上设置百分比来处理中心标题的宽度。我确信有更好的方法来处理这种情况。右侧的图标不会超过两个或更少。

[![在此处输入图像描述][2]][2]

<AppView style={[styles.titleAbsolute]}>
      <AppView
        useButton={dropDown}
        onPress={onTitlePress}
        flexDirection="row"
        paddingLeft={title?.length > 30 ? 7 : 0}
        justifyContent="center"
        width={
          headerLink?.length > 1
            ? (AppSizes.width * (dropDown ? 55 : 62)) / 100
            : drawerHeader
            ? '85%'
            : !headerLink
            ? '90%'
            : headerLink.length === 1
            ? '84%'
            : '90%'
        }

Answer 1

可以通过将所有项目用

View

包装在

flexDirection: "row"

中并将文本放入用

View

的

flex: 1

中来实现。

图标文字中心：

export default function App() {
  return (
    <SafeAreaView style={{ paddingTop: StatusBar.currentHeight }}>
      <View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
        <BackIcon size={iconSize} />

        <View style={{ flex: 1, paddingHorizontal: 8, alignItems: "center" }}>
          <SomeLongText />
        </View>

        <StarIcon size={iconSize} />
        <ShareIcon size={iconSize} />
      </View>
    </SafeAreaView>
  );
}

屏幕文字中心：

export default function App() {
  return (
    <SafeAreaView style={{ paddingTop: StatusBar.currentHeight }}>
      <View style={{ padding: 8, flexDirection: "row", alignItems: "center" }}>
        <View style={{ width: iconViewSizeBy2 }}>
          <BackIcon size={iconSize} />
        </View>

        <View style={{ flex: 1, paddingHorizontal: 8, alignItems: "center" }}>
          <SomeLongText />
        </View>

        <View style={{ width: iconViewSizeBy2, flexDirection: "row" }}>
          <StarIcon size={iconSize} />
          <ShareIcon size={iconSize} />
        </View>
      </View>
    </SafeAreaView>
  );
}