React Native中使用绝对定位居中Image组件失败求助

你在Web里用的margin: auto配合绝对定位的居中方式，在React Native里不适用——RN的样式引擎对这种布局逻辑的处理和CSS存在差异。要实现绝对定位的Image在父View中居中，同时覆盖其他组件，有两种简单可行的方法：

方法1：百分比偏移 + 反向平移 #

这种方法适合动态宽高的场景，不需要硬编码偏移值：

import { Image, View } from 'react-native';

<View
  style={{
    width: 48,
    height: 48,
    alignSelf: "center",
    position: "relative",
  }}
>
  <Image
    style={{
      width: 32,
      height: 32,
      position: "absolute",
      // 先让图片左上角移到父容器中心
      left: "50%",
      top: "50%",
      // 反向平移自身宽高的一半，让中心对齐父容器中心
      transform: [{ translateX: -16 }, { translateY: -16 }],
    }}
    source={spinner}
  />
</View>

这里translateX: -16和translateY: -16是因为图片宽高都是32，取一半数值就能精准让图片中心与父容器中心重合。

方法2：直接计算固定偏移量 #

如果父容器和图片的宽高都是固定值，直接计算偏移量更直观：

import { Image, View } from 'react-native';

<View
  style={{
    width: 48,
    height: 48,
    alignSelf: "center",
    position: "relative",
  }}
>
  <Image
    style={{
      width: 32,
      height: 32,
      position: "absolute",
      // 父容器宽48-图片宽32=16，左右各分配8；上下同理
      left: 8,
      top: 8,
    }}
    source={spinner}
  />
</View>

两种方法都能让图片保持绝对定位，同时覆盖View内的其他组件，且实现完美居中。

内容的提问来源于stack exchange，提问作者Bob