如何控制其他组件对本机动画的反应？

Question

我有这样的建筑。
目标是通过Child2在屏幕上和屏幕外制作Child1的动画。

const [value] = useState(new Animate.Value(0))
<Parent>
  <Child1 value={value}>
  <Child2 value={value}>
</Parent>

Child1

Animated.timing(props.value, {toValue: 100, duration:300})

Child2

<Animated.View style={{bottom:props.value}}>...</Animate.View>

1. 对于动画的发生，我们无法更新会导致重新渲染的状态吗？

2. 已尝试为Child1中的value设置动画，但没有任何反应。可以进行建筑吗？如何从Child1控制Child2？

Answer 1

我犯了一些错误。
1.叫Aminate.timing，不带.start()。
2.尝试将Animate.Value传递给似乎不受支持的样式化组件。

将Animate.View用于内联样式后，实际上我可以通过

调用Child1来触发Child2中的动画

Animated.timing(props.value, {toValue: 100, duration:300}).start()

Answer 2

您可以将回调作为属性传递给孩子，然后从那里调用它。像这样：

...

someCallback () {
    this.setState({//SET SOMETHING})
}

<Parent>
  <Child1 value={value} animationCallback={this.someCallback}>
...
</Parent>

在您的孩子内部，您用this.props.animationCallback()称呼它

Answer 3

首先，您需要使用Animated而不是Animate，即Animated.View和Animated.timing

您应该将Animated.timing函数放在父组件中。将功能向下（作为道具）传递给要触发它的孩子。然后将Animated值传递给显示动画本身的子级。

这样，您可以使动画由Child2中的某物触发，但动画本身发生在Child1中。