В этом руководстве – это третья часть нашей реакции серии APP App emommerce. В предыдущих частях мы успешно настроили React-Native 0,61, а также настройте экран Splash для Android, а также платформу iOS. Эта часть – это продолжение того же учебного пособия. где мы собираемся реализовать всплеск экрана для платформы iOS. Таким образом, для внедрения всплеск экрана на платформе Android настоятельно рекомендуется пройти через вторую часть этого учебного пособия.
Как уже упоминалось в предыдущей части, этот учебный сериал был вдохновлен Реагировать на родной шаблон Eccomerce Что помогает нам реализовать удивительные готовые к развертыванию приложений электронной коммерции, которую любой может использовать для установления запусков электронной коммерции или продавать шаблоны приложений.
Обзор
В этой части мы собираемся реализовать приложение Intro экрана, используя последнюю версию реагирования нативных и плагинов. Экран App Intro – это экран, который отображается, когда пользователь устанавливает приложение и запускает его в первый раз. Приложение Intro описывает все о приложении в резюме, а также состояниям общей функции. Идея состоит в том, чтобы начать с добавления реактивной навигации с его зависимыми пакетами. Тогда мы собираемся реализовать экран приложения в Intro с помощью слайдера с помощью React – Nature-App-Intro-Slider упаковка. Мы также собираемся настроить домашний экран для следующего учебника.
Итак, давайте начнем !!
Установка реагирования на навальные навигационные пакеты
На этом 1-м этапе мы собираемся установить пакет NACT-NATION-навигационного навигации, который позволяет нам настроить навигаторы, чтобы навигаться от одного экрана на другой. С помощью пакета реагирования-навигации мы собираемся установить дополнительные пакеты, на которые зависит пакет реагирования-навигации. Без всех пакетов навигация не будет работать должным образом. Итак, мы должны убедиться, что мы устанавливаем все пакеты. Для этого нам необходимо запустить следующую команду в нашем каталоге проекта:
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';
Мы можем видеть, что Класс Имя в файле App.js названа как Приложение Отказ Поскольку мы используем наш первый экран в виде экрана INTRO APP, мы собираемся изменить Класс Имя на Introscreen Как показано в фрагменте кода ниже:
class IntroScreen extends React.Component {
Реализация домашнего экрана
Здесь мы собираемся реализовать основной домашний экран для следующей части учебника. Домашний экран должен отображаться после успешного перемещения с экрана Intro. Чтобы создать домашний экран, нам нужно создать новый файл с именем HomeScreen.js в папке нашего проекта. Затем внутри файла Homescreen.js нам нужно импортировать необходимые пакеты и включать в себя Компонент Класс называется 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 (
HomeScreen
);
}
}
export default HomeScreen;
Теперь мы собираемся включить HomeScreen к нашему файлу app.js. Для этого нам нужно импортировать файл homescreen.js в файл app.js, как HomeScreen Компонент, как показано в фрагменте кода ниже:
import HomeScreen from './src/screens/HomeScreen';
Реализация навигатора
Теперь мы собираемся создать навигатор приложения в файле App.js. Это позволит нам перейти на разные экраны в нашем нативном приложении RACT. Для этого нам нужно создать Appnavigator Использование CreatestackActavigator Функция, предоставленная пакетом RACT-навигационно-стека. Это CreatestackActavigator Функция принимает два параметра. Первый параметр предназначен для определения экранов, а второй – для параметров навигации. В навигационных вариантах мы можем установить INationROutename который определяет экран, который открывается, когда приложение запущено и Headermode который определяет, следует ли отображать панель заголовка или нет. Затем нам нужно экспортировать навигатор в качестве контейнера приложений, используя CreateAppcontainer () Способ, предоставленный пакетом реагирования. Требуется навигатор в качестве параметра. Общий код для реализации нашего навигатора предусмотрен в фрагменте кода ниже:
const AppNavigator = createStackNavigator(
{
IntroScreen: {
screen: IntroScreen,
},
HomeScreen: {
screen: HomeScreen,
},
},
{
initialRouteName: 'IntroScreen',
headerMode: 'none',
},
);
export default createAppContainer(AppNavigator);
Читать далее
Раскрытие
Этот пост включает в себя партнерские ссылки; Я могу получить компенсацию, если вы приобретете продукты или услуги из разных ссылок, представленных в этой статье.