React Native：如何让绝对定位的Animated View在各屏幕位置一致

问题描述：尝试将一个视图以动画形式移入屏幕，但该视图在不同尺寸的屏幕上显示的位置不同，希望在所有设备上的最终位置保持一致。

原代码：

const ScreenTop = dimensions.SCREEN_HEIGHT;

  const textAnimation = useRef(new Animated.Value(ScreenTop)).current;

  const slideIn = () => {
    Animated.spring(textAnimation, {
      toValue: ScreenTop * 0.55,
      useNativeDriver: false,
    }).start();
  };

  return (
    <IntroLayout>
      <ImageBackground
        source={patrolMan}
        resizeMode="contain"
        imageStyle={{
          resizeMode: 'cover',
          alignSelf: 'flex-end',
        }}
        style={styles.image}>
        <Animated.View
          style={{
            width: '100%',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'absolute',
            bottom: textAnimation,
          }}>
          ...
        </Animated.View>
      </ImageBackground>
    </IntroLayout>
  );
};

const styles = StyleSheet.create({
  image: {
    width: '100%',
    height: 350,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 40,
    position: 'absolute',
    bottom: 40,
  },
});

问题根源 #

你现在是基于屏幕整体高度计算动画的bottom值，但父容器ImageBackground本身是固定高度350且距离屏幕底部40，这种跨容器的尺寸计算会导致不同屏幕下，视图相对于父容器的位置不一致。

解决方案：基于父容器定位 #

让动画视图相对于直接父容器ImageBackground定位，而非整个屏幕，具体改动如下：

1. 用父容器的固定高度作为动画计算基准
2. 改用transform: translateY实现位移，更灵活且贴合父容器位置
3. 固定相对于父容器的最终位置，确保所有设备上位置一致

修改后的代码：

// 父容器固定高度，直接作为计算基准
const CONTAINER_HEIGHT = 350;
// 最终位置：距离父容器底部20px，负数表示向上移动
const FINAL_POSITION = -20;

const textAnimation = useRef(new Animated.Value(CONTAINER_HEIGHT)).current;

const slideIn = () => {
  Animated.spring(textAnimation, {
    toValue: FINAL_POSITION,
    useNativeDriver: true, // 开启native驱动提升动画性能
  }).start();
};

return (
  <IntroLayout>
    <ImageBackground
      source={patrolMan}
      resizeMode="contain"
      imageStyle={{
        resizeMode: 'cover',
        alignSelf: 'flex-end',
      }}
      style={styles.image}>
      <Animated.View
        style={{
          width: '100%',
          alignItems: 'center',
          justifyContent: 'center',
          position: 'absolute',
          bottom: 0, // 锚定在父容器底部
          transform: [{ translateY: textAnimation }], // 通过 translateY 实现上下移动
        }}>
        ...
      </Animated.View>
    </ImageBackground>
  </IntroLayout>
);
};

const styles = StyleSheet.create({
  image: {
    width: '100%',
    height: 350,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 40,
    position: 'absolute',
    bottom: 40,
  },
});

改动说明 #

• 初始时textAnimation设为CONTAINER_HEIGHT，让视图刚好在父容器下方（完全移出屏幕）
• 动画目标值FINAL_POSITION设为-20，让视图向上移动到父容器底部上方20px的固定位置
• 若需要视图居中，只需把FINAL_POSITION改成-CONTAINER_HEIGHT / 2即可

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