javascript - 有没有办法让 Animated.Value 在 React Native 中成为一个数组？

Question

我想将多个<View>s 的高度存储在一个数组中，并将所有这些值一起设置动画。像这样的东西：

<Animated.View style={{height: this.state.heights[0]}}/>
<Animated.View style={{height: this.state.heights[1]}}/>
<Animated.View style={{height: this.state.heights[2]}}/>

但是，当我尝试这样做时：

this.state = {
  heights: new Animated.Value([10, 20, 30])
}

这不起作用。

有小费吗？

Answer 1

Animated.Value创建一个类似的数组

this.heights = [new Animated.Value(10), new Animated.Value(20), new Animated.Value(30)];

然后使用组合动画功能根据您的要求运行这些动画

Animated.parallel([
  Animated.timing(this.heights[0], { toValue: **, duration: **}),
  Animated.timing(this.heights[1], { toValue: **, duration: **}),
  Animated.timing(this.heights[2], { toValue: **, duration: **})
]).start()

然后this.heights在渲染器方法中使用

<Animated.View style={{height: this.heights[0]}}/>
<Animated.View style={{height: this.heights[1]}}/>
<Animated.View style={{height: this.heights[2]}}/>

希望这会有所帮助！