Javascript 如何处理相同子组件中的React Native animated.timeing

父组件：

routes.forEach((data, index) => {
  content.push(<Item key={index} offset={688} route={route} />)
})

scrollAnimate (toValue) {
  const { offset } = this.props;

  Animated.timing(
    this.state.xTranslate,
    {
      toValue,
      duration: 20000,
      easing: Easing.linear,
      useNativeDriver: true
    }
  ).start((e) => {
    if (e.finished) {
      const newState = {xTranslate: new Animated.Value(offset)}
      this.setState(newState, () => { this.scrollAnimate(toValue) })
    }
  });
}

---

我希望每个

项目

组件循环分别设置动画，但事实是所有

项目

组件动画结束，然后所有

项目

组件一起启动动画。如何修复它？

看起来所有动画都是在同一时间开始并具有相同的持续时间，因此显然它们将在同一时间结束

如果要阻止同步，可以为它们指定不同的持续时间或添加不同的延迟：

Animated.time(
this.state.xTranslate，
{
toValue，
持续时间：20000，
放松：放松，线性，
useNativeDriver：没错，
delay:Math.random（）*1000，//或将其作为this.props.delay传递
}
)

何时调用scrollAnimate？