Airbnb Home Screen UI клон с реактивным родным № 3: дом по всему миру

Автор оригинала: Absekk.

Этот учебник – это третья часть нашего класса Airbnb Home Screen UI клона, используя React Native. В предыдущей части мы успешно реализовали категорию и разделы Airbnb Plus. Этот учебник является продолжением того же учебника, откуда мы остановились в последней части. Итак, рекомендуется пройти через предыдущие части для лучшего понимания и представления об общем проекте.

Как уже упоминалось в предыдущих частях, этот учебник серии был вдохновлен Реагировать нативный шаблон недвижимости Что помогает нам построить некоторые удивительные, готовые к развертыванию приложений, которые любой может использовать для создания запуска или продажи шаблонов приложений. И эта третья часть также является продолжением реализации кодирования и дизайна из видеоурок на YouTube by Unsure Programmer Для клона Airbnb.

Эта часть нашего обучания серии довольно проста. Здесь мы собираемся реализовать раздел, который отображает домашние пакеты на домашнем экране UI. Идея состоит в том, чтобы включить изображение с помощью некоторого описания, названия и ценой в макете стиля сетки. Тогда мы также собираемся включить звездные рейтинги из React – Nature-Star-Rating пакет позже.

Итак, давайте начнем !!

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

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

 
   Homes around the world

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

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

Теперь нам нужно добавить изображение и его описание чуть ниже раздела заголовка, которое мы только что реализовали. Для изображения мы собираемся использовать Размеры Компонент, предоставляемый активный пакет реагирования. Размеры Компонент позволяет нам получить всю ширину и высоту нашего экрана приложения. Итак, нам нужно импортировать компонент размеров вместе с другими компонентами из текущего пакета реагирования. А потом нам нужно назначить две константы Высота и ширина которые инициализируются на всей высоте и ширине экрана, используя Получить () Метод, предоставленный Dimentions Компонент, как показано в фрагменте кода ниже:

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

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

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

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

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

 
   Private Roome - 4 Beds 
   
   The Spring House 
   
  65$

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

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

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

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

Затем в файле home.js нам нужно импортировать все необходимые пакеты, чтобы реализовать раздел изображения и описания. Тогда нам нужно создать Класс называется Главная который простирается на Компонент модуль. После этого нам необходимо включить код для раздела изображения и описания, который мы реализовали на предыдущем шаге внутри Render () Функция Главная класс. Затем нам нужно заменить статические данные с реквизитами из родительского компонента. Реквизиты, которые нам нужно отправить от родительского компонента и получать здесь в этом Home.js дочерний компонент высота и со свойствами, типа, именем и ценой, как показано в фрагменте кода ниже:

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

class Home extends Component { 
  render() { 
    return ( 
       
        
           
         
         
           {this.props.type}  
           {this.props.name} 
          {this.props.price}$ 
         
        
    ); 
  } 
} 
export default Home;

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

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

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

Реализация звездного рейтинга

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

yarn add react-native-star-rating

Далее нам необходимо импортировать пакет React-Nate-Star-Rating Package в наш файл home.js, как показано в фрагменте кода ниже:

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

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

 
  {this.props.type} 
  {this.props.name} 
  {this.props.price}$

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

Отключение отключения имеет значение true, чтобы сделать звезды только для чтения.
MaxStars PROP имеет значение 5 для отображения всего 5 звезд.
Рейтинги PROP установлен на значение SPOP, которое должно быть получено от родительского компонента. Это Рейтинг PROP используется для отображения количества звезд, что домашний пакет имеет среди всего 5 звезд.

Теперь нам нужно перейти к файлу explore.js и установить еще один подпер для нашего домашнего компонента. Рейтинг PROP с необходимой ценностью необходимо передавать до домашнего дочернего компонента, как показано в фрагменте кода ниже:

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

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

Заключение

Это руководство – это третья частью серии UI Clone Clone Clone Clone Airbnb. В этой части мы продолжили откуда мы остановились в первой части этого учебника. Здесь мы узнали, как реализовать RE -OVABLE компонент и использовать его в нескольких местах в файлах экрана. Мы также узнали, как организовать компоненты домашнего пакета в стиле сетки, что делает использование Размеры составная часть. Тогда мы получили представление о том, как использовать пакет React-Nate-Star-Rating, чтобы отобразить звездочные рейтинги в наши домашние пакеты. И тогда мы, наконец, показали раздел домашних пакетов к нашему клону пользовательского интерфейса домашнего экрана, используя React Native. В следующей части мы начнем реализацию анимации панели поиска.

Пост Airbnb Home Screen UI клон с реактивным родным № 3: Дом по всему миру появился в первую очередь на Крисс Отказ

Раскрытие

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