我们正在尝试将标题放在 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%'
}
可以通过将所有项目用
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>
);
}