Недавно, работая над своим проектом, я хотел создать эффект перехода, когда пользователь переключает карты в моем приложении. Сначала я прошел через apis встроенной анимации, хотя и использовал LayoutAnimation, но затем наткнулся на модуль response-native-animatable.

Это значительно упростило шаги, необходимые для создания пользовательских переходов между представлениями в react native.

Итак, вот шаги по интеграции и использованию react-native-animatable в вашем проекте:

Установите модуль npm:

npm install react-native-animatable --save

Импортируйте модуль в свой проект:

import * as Animatable from 'react-native-animatable';

Инициализируйте вид как Animatable и определите его свойства:

<Animatable.View ref="view" style={styles.cardContainer}>
    {this.state.cardView}
</Animatable.View>

Здесь вы можете использовать свои собственные элементы с представлением.

Теперь, чтобы управлять переходами, вы можете использовать ссылку следующим образом:

this.refs.view.fadeInRight(300);

Здесь fadeInRight - это анимация с длительностью 300 мс.

Я использовал его при нажатии следующей и предыдущей кнопок следующим образом:

renderNext(currentIndex){
		this.refs.view.fadeInLeft(300);
}
render() {
return (
<Animatable.View ref="view" style={styles.cardContainer}>
	{this.state.cardView}
</Animatable.View>
<Button success iconRight style={styles.nextButton} onPress={()=> this.renderNext(this.state.firstItem)}>
     Next
     <Icon name="ios-arrow-forward"/>
</Button>
 )
}

Доступно множество различных анимаций затухания:

  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInUp
  • fadeInUpBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig

Вы можете ознакомиться с множеством других видов переходов и эффектов, доступных в официальном репозитории github здесь.

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

Это все, что вам нужно для сегодняшнего короткого руководства.

Подключите глубже

Пожалуйста, порекомендуйте эту статью другим, нажав 💚, если она вам нравится, и подпишитесь на меня, чтобы прочитать больше таких статей в будущем.

Вы можете ознакомиться с моими предыдущими техническими статьями, в основном посвященными реакции и реакции здесь.

Источник изображения: Pixabay