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

Введение

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

Для получения дополнительной информации о выставке, прочитайте следующие статьи:

Создать новое приложение

Если вы читали наши предыдущие статьи об Expo, у вас должен быть установлен интерфейс командной строки Expo на вашем компьютере для разработки и клиент Expo на физическом устройстве или эмуляторе iOS или Android. Если нет, вернитесь к руководству по установке, прежде чем продолжить.

Инициализировать проект

Откройте терминал и запустите expo init, чтобы создать проект:

expo init

blank вариант шаблона дизайна будет выбран по умолчанию, вы можете изменить шаблон с помощью клавиш со стрелками вверх и вниз, но пока выберите blank. Интерфейс командной строки Expo теперь попросит вас назвать ваш проект. Давайте введем слаг «first-project» в качестве имени. Нажмите Enter, чтобы продолжить установку зависимостей проекта. Когда проект будет инициализирован и готов к работе, команда закроется.

https://expo.io/@react-navigation/NavigationPlaygroundreact-navigationNavigationPlayground

expo init предлагает несколько вариантов шаблонов, в том числе шаблон TypeScript и шаблон с установленной React Navigation и настроенной структурой навигации на основе вкладок.

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

Запустите сервер разработки

Перейдите в папку проекта в терминале с помощью команды cd и введите npm start, чтобы запустить локальный сервер разработки Expo CLI:

cd first-project

npm start

Интерфейс командной строки Expo запускает Metro Bundler, HTTP-сервер, который компилирует код JavaScript нашего приложения с помощью Babel и передает его приложению Expo. Он также открывает Expo Dev Tools, графический интерфейс для Expo CLI.

yarn startnpm startexpo startexpo start

Вы можете закрыть окно инструментов разработчика Expo и предотвратить его запуск в будущем, нажав shift+d на терминале с интерфейсом командной строки Expo. Перезагрузитесь в любое время, нажав d в терминале, где работает Expo CLI.

Откройте приложение на телефоне/планшете

Вы можете открыть проект на нескольких устройствах одновременно. Идите вперед и попробуйте одновременно на iPhone и телефоне Android, если у вас есть оба под рукой.

На вашем iPhone или iPad откройте стандартное приложение Apple «Камера» и отсканируйте QR-код, который вы видите в терминале или в инструментах Expo Dev Tools.
На устройстве Android нажмите «Сканировать QR-код» на вкладке «Проекты» клиентского приложения Expo и отсканируйте QR-код, отображаемый в терминале или в инструментах Expo Dev.

Чтобы запустить приложение, вам не нужно создавать собственный код, потому что оно работает в клиенте Expo, и интерфейс командной строки автоматически установит его для нас в симуляторе iOS или на любом подключенном эмуляторе или устройстве Android.

Если вы закроете expo-cli или выключите компьютер, вы больше не сможете получить доступ к приложению со своего устройства. Позже мы увидим, как сделать его всегда доступным.

Приложение не загружается на вашем устройстве?

Во-первых, убедитесь, что вы находитесь в одной и той же сети Wi-Fi на вашем компьютере и на вашем устройстве. Если он по-прежнему не работает, это может быть связано с конфигурацией маршрутизатора — это обычное дело для общедоступных сетей. Вы можете обойти это, выбрав тип подключения «Туннель» в Expo Dev Tools, а затем снова отсканировав QR-код.

Использование типа подключения «Туннель» сделает перезагрузку приложения значительно медленнее, чем «Локальная сеть» или «Локальный», поэтому по возможности лучше избегать туннелей. Возможно, вам потребуется установить симулятор/эмулятор для ускорения разработки, если вам нужен «Туннель» для доступа к вашему компьютеру с другого устройства в сети.

Сделайте первое изменение

Откройте App.js и измените текст на « Hello, world! ». Вы должны увидеть его обновление на своем устройстве. Это большой прогресс, теперь у нас есть набор инструментов Expo, работающий на нашем компьютере, и мы можем редактировать исходный код проекта и видеть изменения в реальном времени на нашем устройстве!

Изменения не отображаются на устройстве?

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

Во-первых, убедитесь, что в CLI Expo включен режим разработки.
Затем закройте приложение и снова откройте его.
Когда приложение снова откроется, встряхните устройство, чтобы открыть меню разработчика. Если вы используете эмулятор, нажмите ⌘+d для iOS или ctrl+m для Android.
Если вы видите Enable Live Reload, нажмите его, и ваше приложение будет перезагружено. Если вы видите Disable Live Reload, выйдите из меню разработчика и попробуйте внести другое изменение.

Вывод

В этом руководстве мы увидели, как создать проект с помощью Expo Framework из командной строки.

Здесь вы можете найти все статьи, посвященные ЭКСПО: