Как создать приложение React Native с помощью Expo

Пошаговое руководство по созданию мобильного приложения

Сначала мы можем использовать два разных способа создания приложения React Native. Интерфейс командной строки Expo или React Native CLI.

CLI означает интерфейс командной строки. Это инструменты, которые мы можем использовать в командной строке.

Связанный курс:

Полные статьи React Native:

1. Как создать приложение React Native с помощью Expo
2. Как запустить приложение Expo React Native на эмуляторе
3. Структура папок и файлов Экспо
4. Expo React Native View, Text and Style
5. Expo React Native — использование React Hook useState()
6. Как использовать компонент TextInput для изменения состояния в React Native?
7. Как использовать Expo React Native List и ScrollView
8. Как и почему мы используем Flatlist в Expo React Native
9. Что такое TouchableOpacity в Expo React Native?

В чем разница между этими двумя интерфейсами командной строки Expo и React Native CLI?

Экспо CLI

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

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

Реагировать на собственный интерфейс командной строки

Нативный CLI реакции не абстрагируется от нативного кода. Теперь требуется немного больше усилий и настроек, чтобы начать работу.

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

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

Использование expo похоже на серию для начинающих, чтобы реагировать на нативные.

В какой-то момент в будущем, если вы когда-нибудь захотите переключиться с Expo на базовый подход, вы можете сделать это, просто выбросив проект в любой момент.

Рабочий процесс

Первое, что нам нужно сделать, это скачать node.js.

Почему мы установили узел, чтобы получить диспетчер пакетов узла NPM, чтобы мы могли установить другие вещи.

Мы копируем его и вставляем в терминал или командную строку, а затем нажимаем ENTER.

npm install -g expo-cli

Что это делает, так это глобально устанавливает Expo CLI на ваш компьютер.

Далее мы собираемся создать наш первый нативный проект React, чтобы вы могли видеть здесь сейчас.

Создать новый проект

Перейдите в терминал сейчас, чтобы создать новый проект

Мы говорим Expo в нем для инициализации, а затем название вашего проекта

expo init my-project

Нам нужно перейти в каталог в вашем терминале, где вы хотите создать этот проект.

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

cd reactnative\ project

Вы попадете в эту папку, как только вы нажмете ENTER

и если вы хотите подняться на уровень выше, вы можете сказать

cd ..

Здесь я хочу создать проект с именем «мой проект», поэтому нам нужно ввести следующую команду и нажать ENTER.

expo init my-project

Это собирается дать вам несколько различных вариантов прямо здесь. Мы можем использовать

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

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

Как только это будет сделано, вы можете начать работу, вы можете ввести «cd my project», чтобы

перейдите в этот каталог, а затем «npm start»

Мы собираемся сказать «cd my-project», а затем, прежде чем набрать «npm start», мы собираемся открыть код Visual Studio в этом каталоге из терминала, мы можем ввести «code». в текущем каталоге и нажмите ENTER.

У нас есть все эти разные папки и файлы, и мы собираемся открыть терминал в Visual Studio Code.

Следующее, что мы собираемся сделать, это ввести «npm start» и нажать ENTER.

Он запустит expo start под капотом и откроет новую вкладку в браузере.

Мы могли бы использовать QR-код в левом нижнем углу, чтобы протестировать наше приложение непосредственно на нашем устройстве.

Что нам нужно сделать, так это установить приложение на ваш телефон, которое называется «Клиенты Expo». Как только мы это сделали, мы можем просто отсканировать этот QR-код с помощью камеры телефона.

Это должно позволить вам открыть собственное приложение в клиенте Expo, чтобы вы могли предварительно просмотреть его.

После установки этого приложения вы можете открыть камеру на iPhone или считыватель QR-кодов Expo Client на Android и отсканировать этот QR-код.

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

Подпишись на ютуб:

Подписывайтесь на нас: