React Native多步骤表单中AnimatedLabel动画仅触发一次如何修复

• 组件复用导致动画未触发：你的多步骤表单每个步骤返回的结构高度相似，同位置的AnimatedLabel没有设置唯一标识，React Diff算法会直接复用组件实例，仅更新文本内容，不会触发组件的挂载/卸载流程。因此useEffect仅在首次加载（步骤0）时执行一次，后续切换步骤既不会触发新组件的淡入动画，也不会触发旧组件的卸载逻辑。
• 卸载动画被强制中断：即便组件触发卸载，useEffect清理函数中的淡出动画刚启动，组件实例就会被销毁，动画会被React Native直接终止，因此看不到淡出效果。

最简修复（实现各步骤淡入效果，改动量最小） #

步骤1：优化AnimatedLabel实现 #

移除冗余的useState封装，直接用useRef存储动画值：

import React, { useRef, useEffect } from 'react';
import { Animated } from 'react-native';
import styled from 'styled-components/native';

const Label = styled.Text`
  padding: 10px;
  font-family: 'Inter-Regular';
  color: #3a3a3a;
  font-size: 20px;
`;
const MainLabel = Animated.createAnimatedComponent(Label);

export const AnimatedLabel = props => {
  const opacityValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // 挂载时执行淡入
    Animated.timing(opacityValue, {
      toValue: 1,
      duration: 1500,
      useNativeDriver: true,
    }).start();
  }, [opacityValue]);

  return (
    <MainLabel style={{opacity: opacityValue}}>{props.children}</MainLabel>
  );
};

步骤2：给步骤根组件加唯一key #

在表单组件的switch分支中，给每个步骤的根组件Container添加key={step}属性，强制React切换步骤时销毁旧组件、挂载新组件：

// 每个case的返回都按此修改，以case 0为例
case 0:
  return (
    <Container key={step}>
      <AnimatedLabel>Welcome, What's Your Name?</AnimatedLabel>
      <AnimatedView>
        <DefaultInput placeholder="Name" />
        <Button onPress={() => handleNext()}>Next</Button>
      </AnimatedView>
    </Container>
  );

修改完成后，所有步骤的AnimatedLabel和AnimatedView都会在切换步骤时正常触发挂载淡入动画。

扩展修复（同时实现卸载淡出效果） #

如果需要组件切换时先执行淡出再切换步骤，可调整父组件逻辑，增加动画等待流程：

1. 给父组件新增transitioning状态，切换步骤时先设置为true，触发旧组件的淡出动画
2. 监听旧组件的淡出动画完成回调，再更新step并设置transitioning为false
3. 所有步骤同时渲染，通过opacity和pointerEvents控制显隐，避免组件被直接销毁

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