React Native中为FlatList内Lottie动画绑定唯一ID实现单独播放

嘿，我懂你现在的困扰——想让FlatList里的每个Lottie动画点击时单独播放，结果要么点了没反应，要么全一起动。咱们来一步步把这个问题修好！

问题出在哪？ #

你的代码有两个核心问题：

• 在anim_star函数里，你把Animated.timing的目标写成了整个this.state.progress对象，而不是对应点击项id的那个Animated.Value，动画自然没法触发。
• 每次点击才给progress[id]创建新的Animated.Value，不仅会丢失之前的状态，还会因为React状态更新的异步性，导致你调用动画时拿到的不是最新的状态引用。

修复步骤 #

1. 提前初始化每个item对应的Animated.Value

不要等到点击时才创建Animated.Value，应该在你的数据源加载完成后，给每个分类id都初始化一个值为0的Animated.Value。比如在你获取dataSource的回调里处理：

// 假设你是在componentDidMount里获取数据
componentDidMount() {
  // 模拟获取你的8个分类数据
  const yourDataSource = [/* 你的8个分类数据，每个带id */];
  // 初始化progress对象，每个id对应一个Animated.Value(0)
  const initialProgress = yourDataSource.reduce((acc, item) => {
    acc[item.id] = new Animated.Value(0);
    return acc;
  }, {});
  this.setState({
    dataSource: yourDataSource,
    isLoading: false,
    progress: initialProgress
  });
}

2. 修正anim_star函数

现在点击时，只需要找到对应id的Animated.Value，重置它的值然后执行动画即可，注意不要直接修改state对象：

import { Animated, Easing } from 'react-native';

anim_star = (id) => {
  // 先重置对应id的动画进度为0
  this.state.progress[id].setValue(0);
  // 执行动画，目标是对应id的Animated.Value
  Animated.timing(this.state.progress[id], {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
    useNativeDriver: false, // Lottie的progress不支持native driver，记得设为false
  }).start();
};

3. FlatList的渲染代码保持不变（确认绑定正确）

你的FlatList里的Animation组件progress={this.state.progress[item.id]}是对的，不用改，确保每个项绑定的是自己id对应的进度值。

完整修正后的关键代码片段 #

构造函数（简化）

constructor(props) {
  super(props);
  this.state = {
    isLoading: true,
    dataSource: [],
    progress: {},
  };
}

数据加载与初始化（示例）

componentDidMount() {
  // 替换成你实际获取数据源的逻辑
  setTimeout(() => {
    const mockData = [
      { id: '1', name: '分类1' },
      { id: '2', name: '分类2' },
      { id: '3', name: '分类3' },
      // ... 剩下的5个分类
    ];
    const initialProgress = mockData.reduce((acc, item) => {
      acc[item.id] = new Animated.Value(0);
      return acc;
    }, {});
    this.setState({
      dataSource: mockData,
      isLoading: false,
      progress: initialProgress
    });
  }, 1000);
}

修正后的anim_star函数

anim_star = (id) => {
  const targetProgress = this.state.progress[id];
  if (!targetProgress) return; // 防止找不到对应id的情况
  targetProgress.setValue(0);
  Animated.timing(targetProgress, {
    toValue: 1,
    duration: 2000,
    easing: Easing.linear,
    useNativeDriver: false,
  }).start(() => {
    // 动画结束后可以做些操作，比如重置进度
    // targetProgress.setValue(0);
  });
};

这样修改后，你点击哪个分类项，对应的Lottie动画就会单独播放啦！

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