React Native: Как выборочно включить LayoutAnimation

Я бы хотел включить анимацию макета для некоторых компонентов, но после ее активации все компоненты, на которые выполняется рендеринг, подвержены влиянию анимации макета. Например, у меня есть

<container>
  <waterfall/>
  <menu/>
</container>

Я только хочу использовать анимацию макета для меню компонентов, но анимация применяется к рендерингу водопада, который уже имеет свой собственный код анимации.

Возможно ли это с реакцией родного?

Источник

2 ответа

Я столкнулся с подобной проблемой, вот как я решил ее с layoutanimation:

объяснение

Сохраните переменную состояния в компоненте контейнера, который передается в качестве опоры в меню: <menu reload={this.state.doSomethingInMenu}>

В компоненте контейнера используйте setTimeout установить переменную меню, чтобы управление передавалось обратно в DOM и изменения отображались (без анимации). После запуска setTimeout переменная будет обновлена, и параметры меню будут изменены, что приведет к перезагрузке.

В компоненте меню проверьте, обновлена ​​ли эта переменная до ожидаемого значения. Если есть, позвоните LayoutAnimation.configureNext, Это приведет к анимированию следующего рендеринга (только изменения в меню).

Обзор кода

контейнерный компонент

getInitialState: function() {
  return { doSomethingInMenu: false };
},

// Do something that causes the change
// Then call setTimeout to change the state variable
setTimeout(() => {
  this.setState({ doSomethingInMenu: true });
},750)

<menu reload={this.state.doSomethingInMenu} />

компонент меню

componentWillReceiveProps: function(nextProps) {
    if (nextProps.reload) {
      LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
      // Set the menu state variable that causes the update
      this.setState({field: value})
    }
  },
Источник

Если приведенное выше решение не работает, попробуйте изменить его с LayoutAnimation на Animated, это позволит вам лучше контролировать анимацию.

Источник

Вы можете проверить реанимированные переходы с https://github.com/kmagiera/react-native-reanimated

Он работает так же, как LayoutAnimations, но дает больше контроля над тем, как будет работать анимация.

Источник
Другие вопросы по тегам