Клон Amazon UI с React Native #1: Настройка строки меню

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

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

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

Итак, приступим!!

Настройка шаблонного приложения

Во-первых, нам нужно настроить реактивное шаблонное приложение. Вы можете использовать expo или React Native CLI, чтобы установить стандартный реактивный проект в вашу систему. Общее руководство по настройке проекта приведено в Реагировать на нативную документацию.

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

"dependencies": {
    "native-base": "^2.13.8",
    "react": "16.9.0",
    "react-native": "0.61.2",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-reanimated": "^1.3.0",
    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.2.2"
  },

Мы можем использовать npm или yarn для установки пакетов. Примеры команд представлены во фрагменте кода ниже:

npm install <package-name> --save //Using NPM

yarn add <pakage-name> //Using yarn

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

react-native run-ios

Это запустит наш проект на эмуляторе iOS.

Настройка навигации

Теперь мы собираемся настроить навигацию для проекта в нашем файле App.js. Здесь мы собираемся использовать меню ящика, поэтому мы собираемся настроить навигатор ящика с помощью Реакция-навигация-ящик упаковка. Мы еще не создали никаких файлов экрана в нашем проекте. Но мы собираемся настроить несколько экранов в навигаторе ящиков, который мы собираемся создать позже в каталоге «./screens/». Экран, с которым мы будем работать в этом уроке, — это главный экран. Итак, мы собираемся импортировать главный экран и настроить его в MyDrawerNavigator с использованием createDrawerNavigator метод, предоставляемый пакетом react-navigation-drawer. Затем мы собираемся использовать createAppContainer метод, предоставляемый пакетом react-navigation для создания навигационного контейнера с MyDrawerNavigator в качестве параметра, как показано во фрагменте кода ниже:

import {createDrawerNavigator} from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';
import Home from './screens/Home';
const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home,
  },
});

export default createAppContainer(MyDrawerNavigator);

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

Пакет native-base — это библиотека компонентов пользовательского интерфейса с открытым исходным кодом для React Native, позволяющая создавать собственные мобильные приложения для платформ iOS и Android. Этот пакет позволяет легко создавать темы для компонентов с очень небольшими изменениями в самих компонентах. Теперь нам нужно импортировать различные компоненты из собственного базового пакета, как показано во фрагменте кода ниже:

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

Затем мы собираемся настроить контейнер для главного экрана, используя Container компонент, предоставляемый пакетом native-base. Container element будет родительским компонентом, обертывающим Header составная часть. Header Компонент из пакета native-base позволяет нам настроить заголовок приложения. Здесь мы собираемся добавить Header компонент с некоторыми цветовыми стилями, как показано во фрагменте кода ниже:

render() {
   return (
     <Container>
       <Header style={{backgroundColor: 'grey'}}></Header>
     </Container>
   );
 }

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

Теперь мы собираемся добавить значки в компонент «Заголовок», который мы настроили ранее. Пакет native-base предоставляет нам Icon компонент, который позволяет нам добавлять значки дизайна материалов в наш проект. Нам не нужно устанавливать какой-либо другой пакет для значков, если у нас есть собственный базовый пакет в качестве зависимости. Пакет native-base предоставляет нам Icon библиотека с многочисленными иконками для использования. Здесь мы собираемся добавить два других компонента Left а также Right из пакета native-base, который позволяет нам выравнивать элементы внутри него по левой или правой стороне. Left а также Right компоненты обертывают Icon компонент, необходимый в строке меню, как показано во фрагменте кода ниже:

<Left style={{ flexDirection: 'row' }}>
    <Icon name="md-menu" style={{ color: 'white', marginRight: 15 }} />
</Left>
<Right>
    <Icon name="md-cart" style={{ color: 'white' }} />
</Right>

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

Теперь, поскольку библиотека значков из пакета native-base предоставляет нам множество значков для использования. Нам также требуется значок с логотипом Amazon, которого нет в собственном базовом пакете. Итак, мы собираемся использовать логотип Amazon из реагируют-родные-векторные-иконки упаковка. Для этого нам нужно установить пакет react-native-vector-icons, используя следующий код в командной строке нашего проекта:

npm install react-native-vector-icons

И нам также нужно добавить шрифты значков в Xcode. Чтобы настроить react-native-vector-icons, нам также нужно вручную добавить Font в Xcode версии 0.6+, как показано во фрагменте кода ниже:

Добавление значка с логотипом Amazon

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

import FAIcon from 'react-native-vector-icons/FontAwesome'

Здесь мы импортируем пакет значков FontAwesome из пакета react-native-vector-icons и назначаем его FAIcon составная часть.

Далее нам нужно добавить значок логотипа Amazon на Left компонент, включая значок меню. Мы собираемся добавить FAIcon компонент справа от значка меню внутри Left компонент с некоторыми встроенными стилями, как показано во фрагменте кода ниже:

<Left style={{flexDirection: 'row'}}>
  <Icon name="md-menu" style={{color: 'white', marginRight: 15}} />
  <FAIcon name="amazon" style={{fontSize: 32, color: 'white'}} />
</Left>

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

На этом этапе мы собираемся создать второй раздел меню в строке меню, который будет включать в себя параметр выбора категории и панель поиска. Для этого нам нужно увеличить высоту строки меню, включив View компонент с некоторыми встроенными стилями ниже Header компонент внутри Container составная часть. Код для включения View Компонент показан во фрагменте кода ниже:

<View
 style={{
   position: 'absolute',
   left: 0,
   right: 0,
   top: 110,
   height: 70,
   backgroundColor: '#3a455c',
   flexDirection: 'row',
   alignItems: 'center',
   paddingHorizontal: 5,
 }}></View>

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

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

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

<TouchableOpacity>
  <View
    style={{
      width: 100,
      backgroundColor: '#e7e7eb',
      height: 50,
      borderRadius: 4,
      padding: 10,
      marginLeft:10
    }}>
    <Text style={{fontSize: 12}}>Shop by</Text>
    <Text style={{fontWeight: 'bold'}}>Category</Text>
  </View>
</TouchableOpacity>

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

Теперь нам нужно реализовать панель поиска справа от кнопки выбора категории. Для этого нам нужно определить другой View компонент ниже TouchableOpacity Компонент для строки поиска. Этот View Компонент будет содержать некоторые встроенные стили для размещения панели поиска рядом с параметрами категории. Затем Item компонент с некоторыми встроенными стилями для заполнения и цвета заключен внутри View компонент, который, в свою очередь, оборачивает значок поиска и Input составная часть. Значок поиска размещается с помощью Icon компонент из собственного базового пакета, который появится в левой части Input компонент с заполнителем «поиск». Общая кодовая реализация панели поиска представлена ​​во фрагменте кода ниже:

<View
  style={{
    flex: 1,
    height: '100%',
    marginLeft: 5,
    justifyContent: 'center',
  }}>
  <Item
    style={{
      backgroundColor: 'white',
      paddingHorizontal: 10,
      borderRadius: 4,
    }}>
    <Icon name="search" style={{fontSize: 20, paddingTop: 5}} />
    <Input placeholder="Search" />
  </Item>
</View>

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

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

Внедрение раздела контента

На этом этапе мы добавим небольшой раздел контента, содержащий приветственное сообщение для пользователя, а также ссылку для перехода на экран учетной записи. Для этого мы собираемся использовать Content компонент, предоставляемый пакетом native-base. Content Компонент будет содержать некоторые встроенные стили для цвета и положения, которые обертывают View компонент, содержащий некоторые встроенные стили для позиции. View компонент будет обертывать Text компонент, содержащий приветственное сообщение для использования и другого дочернего элемента View компонент тоже. Самый внутренний ребенок View компонент имеет оболочку свойства стиля flex Text компонент и Icon компонент для настройки значка стрелки. Общая реализация кода представлена ​​во фрагменте кода ниже:

<Content style={{backgroundColor: '#d5d5d6', marginTop: 70}}>
  <View
    style={{
      height: 50,
      backgroundColor: 'white',
      flexDirection: 'row',
      paddingHorizontal: 5,
      alignItems: 'center',
      justifyContent: 'space-between',
    }}>
    <Text>Hello, Kriss</Text>
    <View style={{flexDirection: 'row'}}>
      <Text>Your Account </Text>
      <Icon name="arrow-forward" style={{fontSize: 18}} />
    </View>
  </View>
</Content>

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

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

Вывод

Это первая часть нашей серии руководств по клонированию пользовательского интерфейса приложения Amazon. В этой части мы впервые узнали, как настроить навигатор ящиков с помощью пакетов react-navigation и react-native-drawer. Затем мы узнали о различных компонентах, предоставляемых пакетом native-base, и о том, как их использовать для реализации раздела строки меню в приложении Amazon. Кроме того, мы также получили представление о различных свойствах реактивного стиля и компонентах. Наконец, используя все пакеты и компоненты вместе со стилями, мы успешно реализуем строку меню и раздел содержимого, которые имеют сходство с реальным приложением Amazon.

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

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

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

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

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