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

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

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

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

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

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

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

Во-первых, мы собираемся импортировать необходимые компоненты в файл Explore.js из пакета react-native. Необходимые компоненты ScrollView, Image а также Text компонент, который мы собираемся использовать в файле Explore.js для реализации раздела «Категория». Все импорты показаны во фрагменте кода ниже:

import { View, TextInput, Text, Image, SafeAreaView, ScrollView } from "react-native";

Добавление HeroText, содержащего описание

На этом шаге мы собираемся использовать ScrollView а также Text компонент, который мы ранее импортировали в файл Explore.js. ScrollView Компонент позволяет нам реализовать представление, которое пользователи могут прокручивать. Мы собираемся реализовать его с scrollEventThrottle значение 16. Тогда ScrollView компонент обертывает View компонент со встроенными стилями для правильного просмотра. Затем компонент View оборачивает компонент Text, содержащий описание, некоторыми встроенными стилями, чтобы описание выглядело как в исходном приложении. Код для реализации всего этого представлен во фрагменте кода ниже:

<ScrollView scrollEventThrottle={16}> <View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}> <Text style={{ fontSize: 24, fontWeight: "700", paddingHorizontal: 20 }} > What can we help you find, Varun? </Text> </View> </ScrollView>

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

Добавление избранного домашнего интерфейса в раздел «Категория»

На этом этапе мы создадим раздел функций, в котором мы покажем изображение дома вместе с текстом внизу. Этот раздел должен быть закодирован под разделом описания. Для этого нам нужно добавить новый View Компонент, который обертывает другой View компонент в процессе. Оба View компоненты будут иметь встроенные стили для правильного представления. Внутренний View компонент будет обертывать Image компонент, исходное изображение которого получено из каталога ‘./images’. Нам нужно привязать некоторые стили к Image компонент, чтобы изображение выглядело правильно и красиво. Затем чуть ниже View компонент, который обертывает Image компонент, нам нужно добавить еще один View компонент с некоторыми встроенными стилями. Теперь это View компонент будет обертывать Text компонент, который будет содержать некоторый текст, описывающий изображение. Код для реализации всего этого представлен во фрагменте кода ниже:

<View style={{ height: 130, width: 130, marginLeft: 20, borderWidth: 0.5, borderColor: "#dddddd" }} > <View style={{ flex: 2 }}> <Image source={require("../images/home.jpeg")} style={{ flex: 1, width: null, height: null, resizeMode: "cover" }} /> </View> <View style={{ flex: 1, paddingLeft: 10, paddingTop: 10 }}> <Text>My Home</Text> </View> </View>

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

Как мы видим, у нас есть описание, а также раздел изображения для нашего раздела категории. Но нам нужно многократно добавлять один и тот же тип раздела изображений, чтобы он попал в раздел категорий. Как мы собираемся это сделать? Ответ на создать отдельный компонент для раздела «Категория».

Отдельный компонент для раздела категории

Здесь мы собираемся создать отдельный компонент для нашего раздела категорий, содержащий изображения и текстовые элементы, которые мы реализовали на предыдущем шаге. Разделение пользовательского интерфейса на разные компоненты очень важно в случае React Native, потому что это позволяет нам повторно использовать один и тот же код в разных разделах, а также сделать код чистым.

Итак, чтобы создать компонент, во-первых, нам нужно создать отдельный каталог для хранения файла компонентов. Итак, нам нужно создайте каталог с именем «./components» в нашем основном каталоге проекта. После этого нам нужно создайте файл с именем Category.js в каталог компонентов. Затем нам нужно импортировать необходимые компоненты из реактивного пакета, а также реактивного пакета. Затем просто создайте class называется Category который распространяется на Component модуль. После этого нам просто нужно добавить Image а также text раздел, обернутый View компоненты, которые мы реализовали ранее в файле Explore.js, в render() функция файла компонента Category.js. А затем замените Image источник prop значение, содержащее источник и текст в Text компонент с другим реквизитом, который мы отправим из родительского компонента. Код для реализации общего компонента категории представлен во фрагменте кода ниже:

import React, { Component } from "react"; import { View, Text, StyleSheet, Image } from "react-native"; class Category extends Component { render() { return ( <View style={{ height: 130, width: 130, marginLeft: 20, borderWidth: 0.5, borderColor: "#dddddd" }} > <View style={{ flex: 2 }}> <Image source={this.props.imageUri} style={{ flex: 1, width: null, height: null, resizeMode: "cover" }} /> </View> <View style={{ flex: 1, paddingLeft: 10, paddingTop: 10 }}> <Text>{this.props.name}</Text> </View> </View> ); } } export default Category;

Импорт компонента «Категория» на экран «Исследование»

Здесь мы собираемся импортировать компонент «Категория», который мы реализовали на предыдущем шаге, в файл Explore.js, используя код из следующего фрагмента кода:

import Category from "../components/Category";

Затем мы собираемся использовать этот компонент на нашем экране исследования. Нам нужно создать три блока Category компонент, который будет содержать изображение и текст. Нам нужно помнить, чтобы пройти prop названное значение imageUri который будет содержать источник изображения из каталога ‘./image’, а также prop называется nameкак показано в фрагменте кода ниже:

<ScrollView scrollEventThrottle={16}> <View style={{ flex: 1, backgroundColor: "white", paddingTop: 20 }}> <Text style={{ fontSize: 24, fontWeight: "700", paddingHorizontal: 20 }} > What can we help you find, Kriss? </Text> <Category imageUri={require("../images/home.jpeg")} name="Home" /> <Category imageUri={require("../images/experience.jpeg")} name="Experiences" /> <Category imageUri={require("../images/restuarunt.jpeg")} name="Resturant" /> </View> </ScrollView>

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

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

Теперь нам нужно показать те категории изображений по горизонтали, которые также будут прокручиваться. Для этого нам нужно добавить ScrollView компонент с двумя опорами horizontal а также showHorizontalScrollIndicator. horizontal реквизит установлен на true чтобы показать категории по горизонтали и сделать их прокручиваемыми. И, showHorizontalScrollIndicator установлен на false чтобы скрыть горизонтальную полосу прокрутки, как показано в фрагменте кода ниже:

<View style={{ height: 130, marginTop: 20 }}> <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} > <Category imageUri={require("../images/home.jpeg")} name="Home" /> <Category imageUri={require("../images/experience.jpeg")} name="Experiences" /> <Category imageUri={require("../images/restuarunt.jpeg")} name="Resturant" /> </ScrollView> </View>

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

Как мы видим, у нас есть горизонтальные категории на экране эмулятора, что указывает на то, что мы успешно завершили реализацию раздела «Категория».

Внедрение раздела Airbnb Plus

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

<View style={{ marginTop: 40, paddingHorizontal: 20 }}> <Text style={{ fontSize: 24, fontWeight: "700" }}> Introducing Airbnb Plus </Text> <Text style={{ fontWeight: "100", marginTop: 10 }}> A new selection of homes verified for quality & comfort </Text>

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

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

<View style={{ marginTop: 40, paddingHorizontal: 20 }}> <Text style={{ fontSize: 24, fontWeight: "700" }}> Introducing Airbnb Plus </Text> <Text style={{ fontWeight: "100", marginTop: 10 }}> A new selection of homes verified for quality & comfort </Text> <View style={{ width: "100%", height: 200, marginTop: 20 }}> <Image style={{ flex: 1, height: null, width: null, resizeMode: "cover", borderRadius: 5, borderWidth: 1, borderColor: "#dddddd" }} source={require("../images/home.jpeg")} /> </View> </View>

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

Как мы видим, раздел Airbnb plus выглядит очень привлекательно с представленным изображением. На этом мы успешно завершили вторую часть этой серии руководств. Мы успешно внедрили раздел категорий и раздел Airbnb в наш клон пользовательского интерфейса главного экрана Airbnb.

Вывод

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

Следующая глава здесь

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

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

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