React Native带左侧图片的动画进度条图片定位错位如何解决

效果对比 #

• 当前实现效果：
  
• 期望实现效果：
  

你设置left: '-62%'不生效是两个核心原因导致的：

• React Native 中绝对定位元素的百分比偏移值，是相对于最近定位父元素的尺寸计算，且多数版本对负百分比偏移的兼容存在问题，无法按Web端的逻辑正常渲染
• 你把图标放在高度30的进度条轨道容器内部，安卓端默认会裁切超出父容器边界的子元素，就算偏移值正确，超出的图标部分也会被隐藏；同时原有代码里Image的样式重复写了两次height: 44，漏写了width: 44，也会导致图标尺寸渲染异常。

调整布局结构，把图标和进度条轨道改为平级元素，放到外层公共容器下做绝对定位，避免裁切问题，同时用transform属性控制位置（动画性能远高于直接修改left/top属性），完整实现代码如下：

<View
  style={{
    flexDirection: "row",
    alignSelf: "center",
    marginBottom: "20%",
    marginTop: "10%",
    width: "90%",
    position: "relative",
  }}
>
  {/* 进度条轨道 */}
  <View
    style={{
      width: "100%",
      height: 30,
      padding: 2.5,
      backgroundColor: "#00000020",
      borderRadius: 30,
      overflow: "visible", // 安卓端必加，允许子元素超出边界不被裁切
    }}
  >
    <Animated.View
      style={[
        {
          height: 25,
          borderRadius: 15,
          backgroundColor: "#f5de41",
        },
        {
          width: progressAnim, // 保留原有进度宽度动画逻辑
        },
      ]}
    />
  </View>
  {/* 进度标识狮子图标 */}
  <Animated.Image
    source={require("./assets/lion.png")}
    style={{
      width: 44,
      height: 44,
      position: "absolute",
      left: 0,
      top: "50%",
      marginTop: -22, // 上移图标高度的一半，实现垂直居中对齐
      // 固定在进度条最左端外侧用这个偏移
      // transform: [{ translateX: -22 }],
      // 跟着进度条移动、对齐填充末端用这个偏移
      transform: [{ translateX: Animated.subtract(progressAnim, 22) }],
    }}
    resizeMode="contain"
  />
</View>

• 不要用负百分比做定位偏移，RN下优先用固定数值配合transform实现位移，兼容性和动画性能都更好
• 涉及到超出父容器显示的元素，一定要在父容器上加overflow: 'visible'，否则安卓端会默认裁切超出部分
• 图标跟随进度移动时，用Animated.subtract(progressAnim, 22)是为了让图标中心点对齐进度条填充的最右端，和期望效果完全匹配

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