Question

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

<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)];

然后根据需要使用composing animation function来运行那些动画

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]}}/>

希望这会有所帮助！

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

1 个答案: