Flexbox 标题：Flex 行中的中心项目

【问题标题】：Flexbox Header: Center item in a Flex RowFlexbox 标题：Flex 行中的中心项目
【发布时间】：2022-11-15 03:02:02
【问题描述】：

我想在 React Native 中使用 flexbox 实现以下标题样式。图像应始终居中，箭头按钮必须始终位于左侧。

到目前为止我尝试了什么：

        <View style={{ flexDirection: 'row' }}>
          <Ionicons name="chevron-back" size={32} />

          <Image
            style={{ height: 120, width: 120 }}
            source={{
              uri: imgUrl,
            }}
          />
        </View>

【问题讨论】：

标签： css react-native flexbox tailwind-css

【解决方案1】：

使用justifyContent 将图像居中，并使用绝对的position 作为箭头。

<View style={{ flexDirection: 'row', justifyContent: 'center' }}>
  <Ionicons style={{position: 'absolute', left: 8}} name="chevron-back" size={32} />
  <Image
    style={{ height: 120, width: 120 }}
    source={{
      uri: 'https://via.placeholder.com/150',
    }}
  />
</View>

【讨论】：