Клон пользовательского интерфейса главного экрана Airbnb с помощью React Native #4 : Раздел Animate Top Tag

Это руководство является четвертой частью нашего клона пользовательского интерфейса главного экрана Airbnb с использованием React Native. В предыдущей части мы успешно реализовали разделы «Вокруг света» с домашними пакетами. Этот урок является продолжением того же урока, на котором мы остановились в предыдущей части. Поэтому рекомендуется пройти предыдущие части для лучшего понимания и знания всего проекта.

Как указывалось в предыдущих частях, вдохновением для этой серии руководств послужил React нативный шаблон недвижимости что позволяет нам разрабатывать удивительные готовые к развертыванию приложения, которые каждый может использовать для создания стартапов или продажи шаблонов приложений. И эта четвертая часть также является продолжением реализации кодирования и дизайна из видеоурока Youtube от Неуверенный программист для клона Airbnb.

В этой части мы собираемся реализовать анимацию реагирования с помощью React Native. Идея состоит в том, чтобы реализовать раздел тегов, как на главном экране оригинального приложения Airbnb, в нижней части панели поиска. Анимация вступает в игру, когда мы прокручиваем главный экран сверху вниз или наоборот. На этапе прокрутки сверху вниз мы собираемся скрыть раздел тегов с анимацией и сделать так, чтобы он отображался с анимацией при прокрутке вверх.

Итак, начнем!

На этом этапе мы собираемся сначала реализовать общий раздел тегов с любой анимацией. Идея состоит в том, чтобы реализовать раздел тегов в файле экрана Explore.js, а затем переместить его в отдельный компонент, чтобы его можно было использовать повторно.

Импорт требуемого компонента

Прежде всего, мы собираемся импортировать необходимые компоненты для общего руководства. Компонент, который необходимо импортировать здесь, это Animated компонент, который предоставляет свойства анимации для приложений, ориентированных на реакцию. Итак, давайте импортируем Animated компонент из пакета react-native, как показано во фрагменте кода ниже:

import { 
 View, 
 Text, 
 StyleSheet, 
 SafeAreaView, 
 TextInput, 
 Platform, 
 StatusBar, 
 ScrollView, 
 Image, 
 Dimensions, 
 Animated } from "react-native";

Добавление обертки тегов

Здесь мы собираемся добавить элемент-оболочку для включения раздела вкладок сразу под разделом панели поиска в файле Explore.js. Для элемента-обертки. мы собираемся использовать это Animated View компонент, который позволяет нам интегрировать свойства анимации в View составная часть. Вместе с Animated View wrapper, мы добавим некоторые встроенные стили, как показано во фрагменте кода ниже:

<Animated.View style={{ flexDirection: 'row', marginHorizontal: 20, position: 'relative' }}> 
</Animated.View>

Добавление тега

Теперь мы собираемся создать фактический тег внутри Animated View обертка, которую мы создали на предыдущем шаге. Для раздела тегов мы будем использовать Text компонент, заключенный в View элемент. Text компонент будет содержать текст с упоминанием имени тега с некоторыми стилями шрифта и View компонент будет обертывать Text компонент со стилями, чтобы область тега выглядела правильно и привлекательно. Код для реализации этого приведен во фрагменте кода ниже:

<View style={{ minHeight: 20, minWidth: 40, padding: 5, backgroundColor: "white", borderColor: "#dddddd", borderWidth: 1, borderRadius: 2, marginRight: 5 }}> 
  <Text style={{ fontWeight: "700", fontSize: 10 }}>Guest</Text> 
</View>

Следовательно, мы получим следующий результат на экране нашего эмулятора:

Как мы видим, у нас есть тег чуть ниже панели поиска, но тег прилипает к нижней части раздела панели поиска. Итак, чтобы решить эту проблему, мы добавим несколько стилей, чтобы тег занял правильное положение. Некоторые стили, содержащие свойства top и margin, должны быть добавлены в Animated View компонент, как показано во фрагменте кода ниже:

</View> 
<Animated.View style={{ flexDirection: "row", marginHorizontal: 20, position: "relative", top: 5 }}>

Поэтому на экране нашего эмулятора мы получим следующий результат:

Теперь мы собираемся создать второй тег, скопировав тот же фрагмент кода внутри тега. Animated View компонент и вставьте его под элементом View, заключив первый тег с другим именем. Тогда мы получим следующий результат с двумя тегами на экране эмулятора:

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

Создание нового компонента для раздела «Теги»

На этом этапе мы собираемся создать новый компонент в нашем каталоге ‘./components’. Итак, давайте создадим новый файл с именем Tag.js внутри каталога «./components». Затем внутри файла компонента Tag.js нам нужно импортировать все необходимые компоненты, необходимые для раздела тегов, который мы импортировали ранее на экране Explore.js. После этого нам нужно создать class называется Tag который распространяется на Component модуль. И внутри Tag учебный класс render() нам нужно включить шаблон кода, необходимый для одного тега, из файла Explore.js.

Практически говоря, нам нужно скопировать код, заключенный внутри Animated View компонент экрана Explore.js, а затем вставьте его сюда внутри render() функция. Затем нам нужно заменить имя тега внутри Text компонент со значением свойства, называемым name который должен быть передан от родительского компонента. Вся реализация кода, необходимая для компонента тега, представлена ​​во фрагменте кода ниже:

import React, { Component } from "react"; 
import { View, Text, Image } from "react-native"; 

class Tag extends Component { 
  render() { 
    return ( 
      <View style={{ minHeight: 20, minWidth: 40, padding: 5, backgroundColor: "white", borderColor: "#dddddd", borderWidth: 1, borderRadius: 2, marginRight: 5 }} > 
        <Text style={{ fontWeight: "700", fontSize: 10 }}> {this.props.name} </Text> 
      </View> 
    ); 
  } 
} 
export default Tag;

Теперь нам нужно импортировать наш Tag компонент из каталога ‘./components’ в файл экрана Explore.js, как показано во фрагменте кода ниже:

import Tag from "../components/Tag";

Теперь нам нужно включить Tag компонент внутри нашего Animated View компонент с prop называется name определяется с помощью правильного имени тега. name реквизит передается Tag компонент, как показано во фрагменте кода ниже:

 <Animated.View style={{ flexDirection: "row", marginHorizontal: 20, position: "relative", top: 5 }}> 
   <Tag name={"Guest"} />
   <Tag name={"Dates"} /> 
 <Animated.View> 
</View>

Следовательно, мы получаем тот же результат, что и раньше, но с использованием компонента, как показано на снимке экрана эмулятора ниже:

Как видим, мы успешно реализовали раздел тегов, создав отдельный компонент тегов. Теперь пришло время поработать над анимацией.

Реализация анимации

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

Настройка вертикальной анимации

Здесь мы собираемся добавить конфигурацию анимации в ScrollView компонент в файле экрана Explore.js. Для этого нам нужно включить event конфигурация метода предоставлена Animated компонент внутри onScroll событие ScrollView компонент для извлечения смещения по оси Y в переменную, как показано во фрагменте кода ниже:

<ScrollView scrollEventThrottle={16} 
  onScroll={Animated.event( [{ nativeEvent: { contentOffset: { y: this.scrollY } } }] )}>

Далее нам нужно определить анимированную переменную с именем scrollY инициализируется значением 0. Затем нам также нужно определить начальную высоту раздела вкладки как startHeaderHeight инициализируется значением 0. Точно так же конечная высота раздела вкладки как endHeaderHeight инициализируется значением 50, как показано во фрагменте кода ниже:

constructor(props) { 
  super(props); 
  this.scrollY = new Animated.Value(0); 
  this.startHeaderHeight = 80; 
  this.endHeaderHeight = 50; 
}

Теперь мы готовы добавить анимацию в раздел вкладок.

Здесь мы собираемся добавить вертикальную анимацию, используя scrollY переменная анимации для animatedHeaderHeight переменная. Идея анимации состоит в том, чтобы уменьшить высотуAnimated View обертка при прокрутке вниз и увеличение высоты до нормального при прокрутке назад. scrollY переменная, инициализированная значением Animated, обеспечивает interpolate() метод, который принимает параметр как inputRange а также outputRange конфигурация вместе с extrapolate вариант. outputRange настроен на начальную высоту и конечную высоту раздела вкладки с extrapolate вариант как clamp как показано в фрагменте кода ниже:

this.animatedHeaderHeight = this.scrollY.interpolate({ 
  inputRange: [0, 50], 
  outputRange: [this.startHeaderHeight, this.endHeaderHeight],
  extrapolate: "clamp" 
});

Далее нам нужно запустить анимацию в основной строке поиска. Для этого нам нужно добавить обертку Animated View . Затем нам нужно добавить animatedHeaderHeight переменная, которую мы настроили ранее для height свойство Animated View в своем свойстве стиля, как показано во фрагменте кода ниже:

<Animated.View style={{ backgroundColor: "white", height: this.animatedHeaderHeight, borderBottomWidth: 1, borderBottomColor: "#dddddd" }}>

Следовательно, мы получаем следующий результат в нашей симуляции эмулятора ниже:

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

Добавление свойства непрозрачности к анимации

Теперь мы собираемся добавить свойство opacity к Animated View обертка раздела тегов. Для этого нам нужно определить переменную с именем animatedOpacity. Затем инициализируйте его в interpolate() метод, как показано в фрагменте кода ниже:

this.animatedOpacity = this.scrollY.interpolate({ 
  inputRange: [this.endHeaderHeight, this.startHeaderHeight], 
  outputRange: [0, 1], 
  extrapolate: "clamp" }
);

Затем мы добавляем animatedOpacity переменная для свойства стиля непрозрачности Animated View компонент, как показано во фрагменте кода ниже:

<Animated.View style={{ flexDirection: "row", marginHorizontal: 20, position: "relative", top: 5, opacity: this.animatedOpacity }}> 
  <Tag name={"Guest"} /> 
  <Tag name={"Dates"} /> 
</Animated.View>

В результате мы получаем плавную анимацию раздела вкладок, как показано в симуляции эмулятора ниже:

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

Вывод

Это руководство является четвертой частью серии руководств по клонированию пользовательского интерфейса главного экрана Airbnb. В этой части мы продолжили с того места, на котором остановились в третьей части этой серии руководств. Здесь мы узнали, как реализовать раздел тегов в повторно используемом компоненте и использовать его в нескольких местах, которые дали раздел тегов. Мы также узнали, как добавить стиль вертикальной анимации, используя Animated Компонент и его свойства. И затем мы, наконец, отобразили раздел вкладок со скрытием и отображением анимации во время прокрутки к нашему клону пользовательского интерфейса главного экрана с помощью React Native.

Резюме серии

До сих пор в этой серии руководств мы научились загружать макет точно так же, как Airbnb в нативном React. Мы также научились создавать различные разделы с компонентами и добавлять анимацию. В следующих частях мы расскажем, как настроить реагирующую нативную навигацию.

Пост Клон пользовательского интерфейса главного экрана Airbnb с помощью React Native # 4: Animate Top Tag Section появился первым на Крисс.

Раскрытие информации

Этот пост содержит партнерские ссылки; Я могу получить компенсацию, если вы купите
продукты или услуги по разным ссылкам, приведенным в этой статье