React Native：透明度过渡动画仅在componentDidMount时运行

结合你描述的Mobx环境、父组件多次渲染该组件的场景，动画仅在componentDidMount运行一次、后续触发无效果的核心原因主要有两个：动画值未重置，或者Mobx触发的组件重渲染导致动画状态丢失。下面是具体的分析和解决办法：

1. 核心问题拆解 #

先假设你的组件代码大致如下（补全你未写完的部分）：

import React, { Component } from 'react';
import { Animated, View, Text } from 'react-native';
import { observer } from 'mobx-react';

@observer
class FadeOut extends Component {
  state = {
    fadeAnim: new Animated.Value(1), // 初始完全不透明
  };

  componentDidMount() {
    this.startFade();
  }

  startFade = () => {
    Animated.timing(this.state.fadeAnim, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  render() {
    return (
      <Animated.View style={{ opacity: this.state.fadeAnim }}>
        <Text>{this.props.content}</Text>
      </Animated.View>
    );
  }
}

问题根源：

• 第一次动画执行后，fadeAnim的值已经变为0，后续再调用startFade时，动画是从0到0，自然没有视觉变化；
• 如果Mobx状态变化导致父组件频繁重渲染，若动画值存在state中，或者组件被意外卸载重建，会导致动画状态丢失或重置异常。

2. 具体解决方案 #

方案一：重置动画值再执行动画 #

每次触发动画前，先把fadeAnim重置为初始值（比如1），再启动动画：

startFade = () => {
  // 关键：先重置动画值到初始状态
  this.state.fadeAnim.setValue(1);
  Animated.timing(this.state.fadeAnim, {
    toValue: 0,
    duration: 1000,
    useNativeDriver: true,
  }).start();
};

方案二：将动画值存为组件实例属性（更稳定） #

把fadeAnim从state移到组件实例上，避免state更新或Mobx触发的重渲染干扰动画实例：

@observer
class FadeOut extends Component {
  // 直接作为组件实例属性，而非state
  fadeAnim = new Animated.Value(1);

  componentDidMount() {
    this.startFade();
  }

  startFade = () => {
    this.fadeAnim.setValue(1); // 重置
    Animated.timing(this.fadeAnim, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  render() {
    return (
      <Animated.View style={{ opacity: this.fadeAnim }}>
        <Text>{this.props.content}</Text>
      </Animated.View>
    );
  }
}

方案三：避免组件意外重建（父组件优化） #

如果父组件循环渲染6个FadeOut组件，一定要给每个组件添加唯一的key，防止React因为key重复销毁重建组件实例：

// 父组件中的渲染代码
{Array.from({ length: 6 }).map((_, index) => (
  <FadeOut key={`fade-item-${index}`} content={`Item ${index + 1}`} />
))}

（如果有业务唯一标识，优先用业务id而非index作为key）

方案四：转函数组件+useRef（推荐Mobx场景） #

如果可以改用函数组件，用useRef保存动画实例，配合Mobx的observer（函数组件用mobx-react-lite的observer），能更好适配函数组件生命周期：

import React, { useRef, useEffect } from 'react';
import { Animated, View, Text } from 'react-native';
import { observer } from 'mobx-react-lite';

const FadeOut = observer(({ content, shouldTriggerFade }) => {
  // 用useRef持久化动画实例，不受组件重渲染影响
  const fadeAnim = useRef(new Animated.Value(1)).current;

  // 组件挂载时执行一次动画
  useEffect(() => {
    startFade();
  }, []);

  // 监听外部触发信号（比如Mobx状态），触发动画
  useEffect(() => {
    if (shouldTriggerFade) {
      startFade();
    }
  }, [shouldTriggerFade]);

  const startFade = () => {
    fadeAnim.setValue(1);
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      <Text>{content}</Text>
    </Animated.View>
  );
});

3. 额外排查点 #

• 先确认startFade函数确实被触发：可以在函数内加console.log('触发动画')，验证每次调用都能执行；
• 检查Mobx状态变化是否导致组件被卸载：如果父组件有条件渲染逻辑，可能会导致FadeOut被卸载后重新挂载，这时候componentDidMount会再次执行，但之前的动画状态会丢失。

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