Клон пользовательского интерфейса главного экрана Airbnb с помощью React Native #3 : Дом по всему миру

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

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

Эта часть нашей серии руководств довольно проста. Здесь мы собираемся реализовать раздел, который отображает домашние пакеты в пользовательском интерфейсе главного экрана. Идея состоит в том, чтобы включить изображение с описанием, заголовком и ценой в макет в виде сетки. Затем мы также собираемся включить звездные рейтинги из реакция-родной-звездный-рейтинг пакет позже.

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

Добавление заголовка

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

<View style={{ marginTop: 40 }}> 
  <Text style={{ fontSize: 24, fontWeight: "700", paddingHorizontal: 20 }} > Homes around the world </Text> 
</View>

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

Добавление изображения и описания

Теперь нам нужно добавить изображение и его описание сразу под заголовком, который мы только что реализовали. Для изображения мы будем использовать Dimensions компонент, предоставляемый пакетом react-native. Dimensions Компонент позволяет нам получить полную ширину и высоту экрана нашего приложения. Итак, нам нужно импортировать компонент Dimensions вместе с другими компонентами из реактивного пакета. И затем нам нужно присвоить две константы height а также width которые инициализируются на всю высоту и ширину экрана с помощью get() метод, предоставленный Dimentions компонент, как показано во фрагменте кода ниже:

import { View, TextInput, Text, Image, SafeAreaView, ScrollView, Dimensions } from "react-native"; 
import Category from "../components/Category"; 
const { height, width } = Dimensions.get("window");

Затем нам нужно создать новый View обертки. Во-первых, нам нужно определить родителя View компонент, а затем два View компоненты внутри родителя, которые являются дочерними View составные части. Добавлены дочерние компоненты представления, содержащие изображение и текстовое описание.

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

<View style={{ paddingHorizontal: 20, marginTop: 20 }}> 
  <View style={{ width: width / 2, height: width / 3 }}> 
    <Image style={{ flex: 1, width: null, height: null, resizeMode: "cover" }} source={require("../images/home.jpeg")} /> 
  </View> 
  <View style={{ flex: 1 }}>
  </View> 
</View>

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

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

<View style={{ flex: 1, alignItems: "flex-start", justifyContent: "space-evenly", paddingLeft: 10 }} > 
  <Text style={{ fontSize: 10, color: "#b63838" }}> Private Roome - 4 Beds 
  </Text> 
  <Text style={{ fontSize: 12, fontWeight: "bold" }}> The Spring House 
  </Text> 
  <Text style={{ fontSize: 10 }}>65$</Text>
</View>

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

Теперь мы успешно создали раздел домашнего пакета только с одним отображаемым пакетом. Но нам нужно отобразить несколько пакетов в разделе домашнего пакета. Для этого мы создадим отдельный компонент для этого раздела пакета. Затем повторно используйте его несколько раз в файле Explore.js, чтобы отобразить полный раздел домашнего пакета.

Реализация отдельного компонента

На этом шаге мы собираемся создать отдельный компонент, который включает раздел изображения и раздел описания, которые мы реализовали ранее. Здесь нам нужно создать файл компонента с именем Home.js в каталоге «./components».

Затем в файле Home.js нам нужно импортировать все необходимые пакеты, чтобы реализовать раздел «Изображение и описание». Затем нам нужно создать class называется Home который распространяется на Component модуль. После этого нам нужно включить код раздела изображения и описания, который мы реализовали на предыдущем шаге, внутри render() функция Home учебный класс. Затем нам нужно заменить статические данные реквизитами из родительского компонента. Реквизиты, которые нам нужно отправить из родительского компонента и получить здесь, в этом дочернем компоненте Home.js, имеют высоту и свойства, тип, имя и цену, как показано во фрагменте кода ниже:

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

class Home extends Component { 
  render() { 
    return ( 
      <View style={{ width: this.props.width / 2 - 30, height: this.props.width / 2 - 30, borderWidth: 0.5, borderColor: "#dddddd" }}> 
        <View style={{ flex: 1 }}>
          <Image style={{ flex: 1, width: null, height: null, resizeMode: "cover" }} source={require("../images/home.jpeg")} /> 
        </View> 
        <View style={{ flex: 1, alignItems: "flex-start", justifyContent: "space-evenly", paddingLeft: 10 }}> 
          <Text style={{ fontSize: 10, color: "#b63838" }}> {this.props.type} </Text> 
          <Text style={{ fontSize: 12, fontWeight: "bold" }}> {this.props.name}</Text> 
          <Text style={{ fontSize: 10 }}>{this.props.price}$</Text> 
        </View> 
       </View> 
    ); 
  } 
} 
export default Home;

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

<View style={{ padding: 20, marginTop: 20, flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between" }} >
  <Home width={width} name="The Cozy Place" type="PRIVATE ROOM - 2 BEDS" price={82} /> 
  <Home width={width} name="The Cozy Place" type="PRIVATE ROOM - 2 BEDS" price={82} /> 
  <Home width={width} name="The Cozy Place" type="PRIVATE ROOM - 2 BEDS" price={82} /> 
</View>

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

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

Внедрение звездного рейтинга

На этом последнем шаге этого урока мы собираемся добавить звездный рейтинг чуть ниже Text компонент, показывающий цену пакета. Для этого нам нужно установить реакция-родной-звездный-рейтинг пакет, который позволяет нам добавить необходимый компонент звездного рейтинга со всеми необходимыми конфигурациями. Этот пакет предоставляет компонент React Native для создания и отображения интерактивных звездных рейтингов, доступных как в iOS, так и в Android. Итак, чтобы установить этот пакет, нам нужно запустить следующую команду в каталог нашего проекта:

yarn add react-native-star-rating

Затем нам нужно импортировать пакет react-native-star-rating в наш файловый компонент Home.js, как показано во фрагменте кода ниже:

import { View, Text, StyleSheet, Image } from "react-native"; 
import StarRating from 'react-native-star-rating'; 
class Home extends Component {

Затем нам нужно инициализировать StarRating компонент, который мы импортировали чуть ниже Text компонент с ценой пакета, как показано во фрагменте кода ниже:

<View style={{ flex: 1, alignItems: 'flex-start', justifyContent: 'space-evenly', paddingLeft: 10 }}> 
  <Text style={{ fontSize: 10, color: '#b63838' }}>{this.props.type}</Text> 
  <Text style={{ fontSize: 12, fontWeight: 'bold' }}>{this.props.name}</Text> 
  <Text style={{ fontSize: 10 }}>{this.props.price}$</Text> 
  <StarRating disable={true} maxStars={5} rating={this.props.rating} starSize={10} /> 
</View>

Здесь некоторые реквизиты установлены на StarRating компонента, чтобы настроить его правильно.

Свойство disable имеет значение true, чтобы сделать звезды доступными только для чтения.
maxStars prop имеет значение 5, чтобы отображать только 5 звезд.
ratings prop устанавливается на значение prop, которое должно быть получено от родительского компонента. Этот rating prop используется для отображения количества звезд, которые имеет домашний пакет среди 5 звезд.

Теперь нам нужно перейти к файлу Explore.js и установить другую опору для нашего компонента Home. rating prop с требуемым значением необходимо передать дочернему компоненту Home, как показано во фрагменте кода ниже:

<Home width={width} name="The Cozy Place" type="PRIVATE ROOM - 2 BEDS" price={82} rating={4} /> 
<Home width={width} name="The Cozy Place" type="PRIVATE ROOM - 2 BEDS" price={82} rating={3} /> 
<Home width={width} name="The Cozy Place" type="PRIVATE ROOM - 2 BEDS" price={82} rating={5} />

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

Наконец, мы успешно создали все разделы, необходимые для отображения раздела «Домашние пакеты» в клоне пользовательского интерфейса главного экрана Airbnb.

Вывод

Это руководство является третьей частью серии руководств по клонированию пользовательского интерфейса главного экрана Airbnb. В этой части мы продолжили с того места, на котором остановились в первой части этой серии руководств. Здесь мы узнали, как реализовать повторно используемый компонент и использовать его в нескольких местах в файлах экрана. Мы также узнали, как расположить компоненты домашнего пакета в виде сетки, используя Dimensions составная часть. Затем мы получили представление о том, как использовать пакет react-native-star-rating для отображения звездных рейтингов в наших домашних пакетах. И затем мы, наконец, отобразили раздел «Домашние пакеты» в нашем клоне пользовательского интерфейса домашнего экрана с помощью React Native. В следующей части мы приступим к реализации анимации строки поиска.

Пост Клон пользовательского интерфейса главного экрана Airbnb с помощью React Native # 3: Дом по всему миру появился первым на Крисс.