Как контролировать реакцию родной анимации с другого компонента?

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. Попытка анимировать value в Child1, но ничего не происходит. Возможно ли создание архива? Как мне управлять Child2 от Child1?

Answer 1

Некоторые ошибки, которые я сделал.
1. Вызывается Aminate.timing без .start().
2. Попытка передать Animate.Value компонентам styled, которые, похоже, не поддерживаются.

После использования Animate.View со встроенным стилем я действительно смог вызвать Child1, чтобы запустить анимацию в Child2 с

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

Answer 2

Во-первых, вам нужно использовать Animated вместо Animate, то есть Animated.View и Animated.timing

Вы должны поместить свою функцию Animated.timing в родительский компонент. Передайте функцию (как опору) ребенку, которого вы хотите вызвать. Затем передайте значение Animated дочернему элементу, который отображает саму анимацию.

Таким образом, анимация может быть вызвана чем-то в Child2, но сама анимация происходит в Child1.

Answer 3

Вы можете передать обратный вызов как собственность своим детям и позвонить оттуда. Примерно так:

...

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

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

И внутри вашего ребенка вы называете это this.props.animationCallback()