Создание приложения электронной коммерции React Native #3 | Слайдер введения приложения

Это руководство является третьей частью нашей реализации серии приложений React Native для электронной коммерции. В предыдущих частях мы успешно настроили react-native 0.61, а также настроили заставку как для Android, так и для платформы iOS. Эта часть является продолжением той же серии уроков. где мы собираемся реализовать Splash Screen для платформы iOS. Итак, для реализации Splash Screen на платформе Android настоятельно рекомендуется пройти вторую часть этой серии руководств.

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

Обзор

В этой части мы собираемся реализовать экран App Intro, используя последнюю версию React Native и плагины. Экран App Intro — это экран, который появляется, когда пользователь устанавливает приложение и запускает его в первый раз. Введение к приложению кратко описывает все о приложении, а также указывает общие функции. Идея состоит в том, чтобы начать с добавления react-navigation с зависимыми от него пакетами. Затем мы собираемся реализовать экран App Intro с ползунком, используя Реагировать на родное приложение-вводный слайдер упаковка. Мы также собираемся настроить домашний экран для следующего урока.

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

Установка пакетов React Native Navigation

На этом первом шаге мы установим пакет react-native-navigation, который позволит нам настроить навигаторы для перехода с одного экрана на другой. С пакетом react-native-navigation мы собираемся установить дополнительные пакеты, от которых зависит пакет react-native-navigation. Без всех пакетов навигация не будет работать должным образом. Итак, мы должны убедиться, что мы установили все пакеты. Для этого нам нужно запустить следующую команду в каталоге нашего проекта:

yarn add react-navigation react-navigation-stack react-native-reanimated react-native-gesture-handler react-native-screens

Теперь нам нужно связать эти пакеты с нативными частями. Для этого нам нужно перейти в каталог «./ios» нашего проекта в командной строке. Затем нам нужно запустить следующую команду:

pod install

Настройка App.js

Здесь мы собираемся настроить файл App.js для управления маршрутами. Для этого нам нужно импортировать два основных пакета маршрутов, которые мы установили ранее. Пакеты — это реактивная навигация и реактивная навигация-стек. Код для их импорта в файл App.js представлен во фрагменте кода ниже:

import {createAppContainer} from 'react-navigation'; import {createStackNavigator} from 'react-navigation-stack';

Мы можем видеть, что class имя в файле App.js называется как App. Поскольку мы используем наш первый экран в качестве экрана вводного приложения, мы собираемся изменить class имя для IntroScreen как показано в фрагменте кода ниже:

class IntroScreen extends React.Component {

Реализация главного экрана

Здесь мы собираемся реализовать базовый домашний экран для следующей части урока. Главный экран должен отобразиться после того, как мы успешно перейдем с вводного экрана. Чтобы создать главный экран, нам нужно создать новый файл с именем HomeScreen.js в папке «./screens/» нашего каталога проекта. Затем внутри файла HomeScreen.js нам нужно импортировать необходимые пакеты и включить Component класс называется HomeScreen. Код для реализации простого файла HomeScreen.js представлен во фрагменте кода ниже:

import React, {Component} from 'react';
import {View, Text} from 'react-native';
class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <View>
        <Text
          style={{
            flex: 1,
            flexDirection: 'row',
            justifyContent: 'center',
            alignItems: 'stretch',
          }}>
          HomeScreen
        </Text>
      </View>
    );
  }
}
export default HomeScreen;

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

import HomeScreen from './src/screens/HomeScreen';

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

Теперь мы собираемся создать навигатор приложений в файле App.js. Это позволит нам переходить на разные экраны в нашем приложении React Native. Для этого нам нужно создать AppNavigator с использованием createStackNavigator функция, предоставляемая пакетом react-navigation-stack. Этот createStackNavigator функция принимает два параметра. Первый параметр предназначен для определения экранов, а второй — для параметров навигации. В параметрах навигации мы можем установить initialRouteName который определяет экран, который открывается при запуске приложения и headerMode который определяет, должна ли отображаться панель заголовка или нет. Затем нам нужно экспортировать навигатор как контейнер приложения, используя createAppContainer() метод, предоставляемый пакетом react-navigation. В качестве параметра принимает навигатор. Общий код для реализации нашего навигатора представлен во фрагменте кода ниже:

const AppNavigator = createStackNavigator(
  {
    IntroScreen: {
      screen: IntroScreen,
    },
    HomeScreen: {
      screen: HomeScreen,
    },
  },
  {
    initialRouteName: 'IntroScreen',
    headerMode: 'none',
  },
);
export default createAppContainer(AppNavigator);

Читать далее

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

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

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

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

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