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

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

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

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

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

На этом этапе мы собираемся реализовать раздел галереи основных моментов, как в реальном приложении Amazon. Раздел галереи основных моментов показан чуть ниже раздела контента, который мы реализовали в предыдущем руководстве. Этот раздел будет содержать свайпер с некоторыми изображениями, чтобы выделить любые популярные продукты или рекламные объявления. Для выделенного элемента мы будем использовать фиктивные изображения данных из каталога «./assets» нашего проекта.

Импорт пакета swiper

Чтобы реализовать свайпер галереи выделения, нам нужно использоватьреагировать родной swiper упаковка. Этот пакет предоставляет простой и эффективный компонент для реализации swiper в собственном приложении React. Команда для установки react-native-swiper в проект представлена ​​во фрагменте кода ниже:

yarn add react-native-swiper

Теперь нам нужно импортировать пакет в наш файл экрана Home.js как Swiper компонент, как показано во фрагменте кода ниже:

import Swiper from 'react-native-swiper';

Реализация раздела swiper

Здесь мы просто включим простой Swiper Компонентная упаковка три View компоненты со встроенными связывателями стилей, как показано во фрагменте кода ниже:

<Swiper style={{height: 100}}>
  <View style={{flex: 1}}></View>
  <View style={{flex: 1}}></View>
  <View style={{flex: 1}}></View>
</Swiper>

В результате получим пустой View элементы на экране с тремя значками swiper dot для трех View компоненты, как показано на снимке экрана эмулятора ниже:

Далее нам нужно добавить изображение в View компоненты внутри Swiper составная часть. Для добавления изображений мы будем использовать Image компонент из реактивного пакета с некоторыми встроенными стилями. Нам нужно импортировать изображения из папки «./assets/» в каталоге нашего проекта. Мы можем включить наш собственный набор изображений в папку с ресурсами и импортировать его в source опора Image компонент, как показано во фрагменте кода ниже:

         <Swiper style={{height: 100}}>
           <View style={{flex: 1}}>
             <Image
               style={{
                 flex: 1,
                 height: null,
                 width: null,
                 resizeMode: 'contain',
               }}
               source={require('../assets/swiper_2.jpg')}
             />
           </View>
           <View style={{flex: 1}}>
             <Image
               style={{
                 flex: 1,
                 height: null,
                 width: null,
                 resizeMode: 'contain',
               }}
               source={require('../assets/swiper_3.jpg')}
             />
           </View>
           <View style={{flex: 1}}>
             <Image
               style={{
                 flex: 1,
                 height: null,
                 width: null,
                 resizeMode: 'contain',
               }}
               source={require('../assets/swiper_2.jpg')}
             />
           </View>
         </Swiper>

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

Как мы видим, мы успешно реализовали раздел галереи ярких моментов с Swiper составная часть. Swiper компоненты показывают три Image компоненты, которые легко перемещаются.

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

Раздел «Внедрение рекомендаций»

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

Создание карточки темы рекомендации

Здесь мы собираемся установить заголовок раздела рекомендаций, используя Card составная часть. Возможно, мы помнили, что в нашем последнем уроке мы использовали разные компоненты из пакета native-base. Здесь мы собираемся использовать дополнительный набор компонентов из пакета native-base для создания общего раздела рекомендаций. Во-первых, нам нужно импортировать необходимые компоненты из нативной базы, как показано во фрагменте кода ниже:

import { Container, Content, Header, Left, Right, Icon, Item, Input, Card, CardItem, } from 'native-base';

Теперь мы собираемся использовать Card компонент, который обертывает CardItem компонент со стилем заголовка, чтобы создать раздел заголовка нашего раздела рекомендаций, как показано во фрагменте кода ниже:

<Card style={{ marginLeft: 5, marginRight: 5 }}>
      <CardItem header style={{ borderBottomWidth: 1, borderBottomColor: '#dee0e2' }}>
         <Text>Your Recommendations</Text>
      </CardItem>
</Card>

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

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

Теперь нам нужно определить еще один CardItem компонент чуть ниже первого CardItem компонента для реализации рекомендуемых пунктов. CardItem компонент обертывает два дочерних компонента, которые View компонент из реактивного пакета и Right компонент из собственного базового компонента. View компонент будет обертывать Image компонент для отображения изображения слева. Image компонент будет содержать некоторые встроенные стили и source prop для URL-адреса изображения, полученного из каталога активов. RIght Компонент используется для выравнивания элементов по правой стороне экрана. Здесь Right компонент со свойством flex style оборачивает несколько Text составные части. Text Компонент будет включать сведения о рекомендуемом продукте, такие как название, цена, поставщик, скидка и т. д. Общая реализация кодирования из этого раздела представлена ​​во фрагменте кода ниже:

            <CardItem>
              <View>
                <Image
                  style={{height: 90, width: 60}}
                  source={require('../assets/recommended_1.jpg')}
                />
              </View>
              <Right
                style={{
                  flex: 1,
                  alignItems: 'flex-start',
                  height: 90,
                  paddingHorizontal: 20,
                }}>
                <Text>Your can Healing your life</Text>
                <Text style={{color: 'grey', fontSize: 11}}>Louise Hay</Text>
                <Text
                  style={{fontSize: 14, fontWeight: 'bold', color: '#c4402f'}}>
                  10$
                </Text>
                <Text>
                  <Text
                    style={{color: 'grey', fontWeight: '300', fontSize: 11}}>
                    You save 2.5
                  </Text>
                </Text>
              </Right>
            </CardItem>

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

Здесь мы собираемся реализовать отдельный файл компонента для раздела рекомендуемых элементов нашего раздела рекомендаций. Отдельный компонент позволяет многократно использовать шаблон в любом месте всего проекта. Для этого нам нужно создать файл компонента с именем RecommendItem.js в нашем каталоге ‘./components’. Теперь нам нужно импортировать весь пакет, необходимый для реализации раздела рекомендуемых элементов, как мы сделали в файле Home.js. Затем нам нужно определить класс с именем RecommendedItem и расширить его на Component модуль, как показано в фрагменте кода ниже:

import React, {Component} from 'react';
import {View, Text,Image} from 'react-native';
import {Card,CardItem,Right} from 'native-base';
class RecommendedItem extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View>
        <Text> componentText </Text>
      </View>
    );
  }
}
export default RecommendedItem;

Далее нам нужно включить код из второго CardItem компонент в нашем файле Home.js в render() функция нашего файла RecommendedItem.js. Затем нам нужно заменить статические данные, например source опора, текст в Text компонент с prop значение, которое должно быть передано из родительского компонента. Здесь реквизиты, которые нам нужны, imageURI, itemName, ItemCreator, itemPrice а также savings как показано в фрагменте кода ниже:

      <CardItem>
        <View>
          <Image style={{height: 90, width: 60}} source={this.props.imageUri} />
        </View>
        <Right
          style={{
            flex: 1,
            alignItems: 'flex-start',
            height: 90,
            paddingHorizontal: 20,
          }}>
          <Text>{this.props.itemName}</Text>
          <Text style={{color: 'grey', fontSize: 11}}>
            {this.props.itemCreator}
          </Text>
          <Text style={{fontSize: 14, fontWeight: 'bold', color: '#c4402f'}}>
            {this.props.itemPrice}
          </Text>
          <Text>
            <Text style={{color: 'grey', fontWeight: '300', fontSize: 11}}>
              You save
            </Text>{' '}
            ${this.props.savings}
          </Text>
        </Right>
      </CardItem>

Добавление компонента на главный экран

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

import RecommendedItem from '../components/RecommendedItem';

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

<RecommendedItem
  itemName="You can heal your life"
  itemCreator="Louise Hay"
  itemPrice="$10"
  savings="2.5"
  imageUri={require('../assets/recommended_1.jpg')}
/>
<RecommendedItem
  itemName="Uncharted 4"
  itemCreator="Sony"
  itemPrice="$19.99"
  savings="17"
  imageUri={require('../assets/recommended_2.jpg')}
/>
<RecommendedItem
  itemName="Ea UFC 3"
  itemCreator="Ea Sports"
  itemPrice="$44"
  savings="6"
  imageUri={require('../assets/recommended_3.jpg')}
/>

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

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

Поэтому мы успешно реализовали раздел «Рекомендации» в нашем проекте клонирования пользовательского интерфейса Amazon. Но он еще не завершен. Нам нужно добавить к нему еще один компонент, чтобы он выглядел так же, как в реальном пользовательском интерфейсе приложения. Компонент, который нам нужно добавить, — это звездные рейтинги для каждого раздела рекомендуемых элементов.

Добавление звездного рейтинга

Здесь мы собираемся добавить звездные рейтинги в раздел рекомендуемых элементов в файле компонента RecommendedItem.js. Для этого нам нужно установить дополнительный пакет, который предоставляет нам простой компонент для добавления звездных рейтингов к приложению, нативному для реагирования. Имя пакета реакция-родной-звездный-рейтинг. Теперь нам нужно установить пакет с помощью команды, показанной во фрагменте кода ниже:

yarn add react-native-star-rating

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

import StarRating from 'react-native-star-rating'

Затем нам нужно добавить StarRating компонент чуть ниже последнего Text внутри компонента CardItem. StarRating Компонент требует различных реквизитов, чтобы он выглядел привлекательно. Цвет, размер, максимальное количество звезд — это параметры, которые необходимо установить как статическое значение. Но rating prop требует динамического значения для каждого рекомендуемого элемента, который мы будем передавать как prop с экрана Home.js. Реализация компонента StarRating представлена ​​во фрагменте кода ниже:

<StarRating
    disabled={true}
    maxStars={5}
    rating={this.props.rating}
    starSize={12}
    fullStarColor='orange'
    emptyStarColor='orange'
/>

Теперь нам нужно установить rating опора в RecommendedItem компонент, определенный на экране Home.js, и передать его дочернему компоненту, как показано во фрагменте кода ниже:

           <RecommendedItem
             itemName="You can heal your life"
             itemCreator="Louise Hay"
             itemPrice="$10"
             savings="2.5"
             imageUri={require('../assets/recommended_1.jpg')}
             rating={5}
           />
           <RecommendedItem
             itemName="Uncharted 4"
             itemCreator="Sony"
             itemPrice="$19.99"
             savings="17"
             imageUri={require('../assets/recommended_2.jpg')}
             rating={4}
           />
           <RecommendedItem
             itemName="Ea UFC 3"
             itemCreator="Ea Sports"
             itemPrice="$44"
             savings="6"
             imageUri={require('../assets/recommended_3.jpg')}
             rating={3}
           />

Следовательно, мы получим звездные рейтинги в каждом из рекомендуемых элементов нашего раздела рекомендаций, как показано во фрагменте кода ниже:

Наконец, мы успешно завершили реализацию раздела галереи ярких моментов. А также раздел «Рекомендации» в нашем приложении-клоне пользовательского интерфейса Amazon.

Вывод

Это руководство является второй частью серии руководств по клонированию пользовательского интерфейса Amazon. В этой части мы продолжили с того места, на котором остановились в первой части этой серии руководств. Здесь мы научились использовать Swiper компонент из пакета react-native-swiper, чтобы создать галерею основных моментов. Мы также получили представление о том, как использовать дополнительные нативные базовые компоненты, чтобы создать раздел «Рекомендация» в отдельном компоненте. Также мы получили подробное руководство по внедрению StarRating компонент из пакета react-native-star-rating с различными конфигурациями пропсов.

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

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

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *