Клонирование пользовательского интерфейса Amazon с помощью React Native #3: Меню выдвижных ящиков

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

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

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

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

В первой части этой серии руководств мы помним, что добавили значок гамбургера меню в левую часть строки меню. Теперь на этом шаге мы собираемся добавить событие к значку меню, которое помогает открывать и закрывать меню ящика. Для этого нам нужно добавить onPress событие для Icon компонент, имеющий значок меню. в onPress событие Icon компонент, мы собираемся добавить openDrawer() метод, предоставленный navigation prop, который вызовет открытие и закрытие меню ящика. Общая реализация кода для этого раздела представлена во фрагменте кода ниже:

<Left style={{flexDirection: 'row'}}>
  <Icon
    onPress={() => this.props.navigation.openDrawer()}
    name="md-menu"
    style={{color: 'white', marginRight: 15}}
  />
  <FAIcon name="amazon" style={{fontSize: 32, color: 'white'}} />
</Left>

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

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

Настройка стиля ящика

На этом этапе мы собираемся настроить стиль ящика, чтобы он выглядел так же, как в реальном приложении. Для этого нам нужно перейти к файлу App.js нашего проекта, а затем импортировать собственный базовый пакет с помощью Container а также Header составные части. Затем мы собираемся настроить пользовательскую функцию обработки содержимого ящика с именем CustomDrawerContentComponent который принимает реквизит в качестве параметра. Эта функция обработчика предназначена для возврата шаблона для настраиваемого меню ящика. Затем нам нужно реализовать компонент Header с необходимым встроенным стилем для возврата из функции-обработчика.

Мы помним, что реализовали навигатор ящиков под названием MyDrawerNavigator в первой части этой серии руководств. В навигаторе мы передали только конфиг экрана в качестве первого параметра. Теперь нам нужно настроить второй параметр, чтобы расположить и стилизовать меню ящика. Для этого нам нужно установить drawerPosition к left во втором объекте параметра, а также передать CustomDrawerContentComponent свою функцию contentComponent вариант, как показано в фрагменте кода ниже:

import React from 'react';
import {createDrawerNavigator} from 'react-navigation-drawer';
import {createAppContainer} from 'react-navigation';
import {Container, Header} from 'native-base';
import Home from './screens/Home';
const CustomDrawerContentComponent = props => {
  return (
    <Container>
      <Header style={{backgroundColor: '#3a455c', height: 90}}></Header>
    </Container>
  );
};
const MyDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: Home,
    },
  },
  {drawerPosition: 'left', 
    contentComponent: CustomDrawerContentComponent
  },
);
export default createAppContainer(MyDrawerNavigator);

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

На этом этапе мы собираемся добавить некоторые пункты меню в наше индивидуальное меню ящика. Для этого нам нужно использовать дополнительные компоненты из пакета native-base, чтобы правильно структурировать пункты меню. Необходимые компоненты представлены во фрагменте кода ниже:

import { Icon, Container, Content, Header, Left, Body, Right, List, ListItem } from 'native-base'

Теперь мы собираемся сначала реализовать раздел заголовка меню ящика. Для этого нам нужно воспользоваться Left компонент из собственного базового пакета внутри Header составная часть. Left компонент с некоторыми свойствами гибкого стиля будет обертывать Icon компонент, показывающий значок человека. А также Text компонент, который будет приветствовать пользователя, как показано во фрагменте кода ниже:

<Left style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
  <Icon name="person" style={{ color: 'white' }} />
  <Text style={{ marginLeft: 5, fontSize: 22, color: 'white', fontStyle: 'italic' }}>Hello, Kriss</Text>
</Left>

Оба Icon а также Text Компонент для раздела заголовка содержит некоторые встроенные стили, чтобы они выглядели как в реальном приложении Amazon.

Теперь нам нужно добавить пункты меню. Для этого мы будем использовать FlatList компонент из реактивного пакета. FlatList компонент позволяет нам установить конкретный data prop, который принимает массив. Затем он позволяет просто отображать шаблон, содержащий эти данные массива, итеративно, используя renderItem опора Затем, внутри renderItem функциональная опора FlatList компонент, мы собираемся использовать ListItem компонент из пакета native-base для рендеринга элементов списка. ListItem компонент оборачивает Text компонент с текстовым значением из реквизита данных FlatList составная часть. Аналогичным образом мы собираемся создать три FlatList разделы в нашем индивидуальном меню ящика. Content компонент обертывает все три FlatList компонент ниже Header компонент, как показано во фрагменте кода ниже:

     <Content>
        <FlatList
          data={[
            'Home', 'Shop by Category', "Today's Deals"
          ]}
          renderItem={({ item }) => (
            <ListItem noBorder>
              <Text>{item}</Text>
            </ListItem>
          )}
        />
        <FlatList
          style={{ borderTopWidth: 0.5, borderTopColor: '#f0f0f0' }}
          data={[
            'Your Wish List', 'Your Account', "Amazon Pay", "Prime", "Sell on Amazon"
          ]}
          renderItem={({ item }) => (
            <ListItem noBorder>
              <Text>{item}</Text>
            </ListItem>
          )}
        />
        <FlatList
          style={{ borderTopWidth: 0.5, borderTopColor: '#f0f0f0' }}
          data={[
            'Settings', 'Customer Service'
          ]}
          renderItem={({ item }) => (
            <ListItem noBorder>
              <Text>{item}</Text>
            </ListItem>
          )}
        />

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

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

Вывод

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

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

Оставайтесь с нами для получения дополнительной серии учебников !!

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