Как настроить React Native с помощью Expo

Как настроить React Native с помощью Expo — это основная тема, которую мы обсудим сегодня. React Native — довольно известная библиотека для создания кросс-мобильных приложений. Сегодня мы устанавливаем React Native с помощью клиента Expo. Через клиент Expo мы можем запускать наше мобильное приложение на наших реальных устройствах, а не в симуляторах или эмуляторах .

Таким образом, мы можем протестировать время выполнения нашего приложения на наших реальных устройствах Android или iOS . Чтобы это работало, первое требование — нам действительно нужно высокоскоростное соединение, иначе оно не будет работать или выдаст ошибку, например Переключено на URL-адрес LAN, потому что туннель не работает.

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

Как настроить React Native с помощью Expo

В этом посте мы настроим Expo XDE на Mac , а также установим клиент Expo на Android и iOS , а затем подключитесь через наш сервер разработки.

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

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

Хорошо, теперь наш первый шаг — установить Expo XDE на Mac. Я использую Mac, поэтому я покажу вам, как вы можете установить его на Mac. В их документации уже есть инструкция по установке Windows.

# Шаг 1: Установите Expo XDE на Mac

Перейдите к этому ссылка на сайт. Здесь вы можете найти Expo XDE на основе операционной системы вашего ПК. У меня Mac, так что я установлю файл DMG. Его установка займет несколько минут.

Хорошо, после загрузки нам нужно установить его на наш Mac и переместить Expo XDE в наши приложения.

Затем запустите Expo XDE .

# Шаг 2. Зарегистрируйтесь в Expo XDE.

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

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

Теперь вам также необходимо войти в свое приложение Expo XDE , уже открытое в ваш Mac с недавно зарегистрированным адресом электронной почты и паролем.

# Шаг 3: Создайте новый проект.

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

Здесь вам нужно выбрать пустое представление, а также указать имя проекта и путь к нему. Таким образом, на этом пути находится исходный проект React Native. создан.

Хорошо, теперь вам нужно открыть свое мобильное приложение expo, а также войти в систему с теми же учетными данными, которые мы применили в настольном приложении, и войти в наше приложение expo.

Теперь переключитесь на рабочий стол expo xde и в правом верхнем углу есть три кнопки.

  1. Опубликовать
  2. Поделиться
  3. Устройство

Нажмите, чтобы поделиться, и вы увидите вот что.

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

После сканирования мы видим, что на рабочем столе клиент expo запускает сервер разработки и компилирует наш пакет javascript. После завершения, вы можете увидеть Mac Expo XDE ng> вот так.

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

Переключен на URL-адрес LAN, потому что туннель не работает. Только устройства в одной сети могут получить доступ к приложению. Вы можете перезапустить проект, чтобы попытаться переподключиться.

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

Если все работает отлично, то вы можете увидеть на своем мобильном телефоне, что мы знаем, что приложение работает. Вы можете видеть как на устройствах Android , так и на iOS . Вы также можете открыть свой проект в редакторе и изменить код. В зависимости от скорости вашей сети это отразится на ваших мобильных устройствах. Прохладный!!! Очень круто.

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

Этот вид разработки удобен, когда мы имеем дело со сложным проектом, в котором используются анимации React Native. Так что мы можем мгновенно проверить наш прогресс.

Здесь вы можете найти ссылку для клиентов expo для устройств Android и iOS . .

Для iOS: https://itunes.apple.com/app/apple-store/id982107779

Для Android: https://play.google. com/store/apps/details? id = host.exp.exponent & referrer = www

Вы также можете запустить эмулятор или симулятор для проектов React Native.

Для использования для этого нам нужно нажать кнопку Device в правом верхнем углу внутри нашего Mac-приложения Expo XDE, и вам нужно выбрать для Android или устройства iOS .

Вам необходимо настроить оба устройства с помощью XCode или Android Studio, и вы сможете видеть все свои разработки внутри своих виртуальных устройств.

Итак, это для Как настроить React Native с помощью клиента Expo.

Рекомендуемые сообщения

Компоненты React Native Swipe Пример

Пример React Native Drawer Navigator

Пример просмотра вкладок React Native

Пример React Native Redux

Пример модального окна React Native

Оцените статью
nanomode.ru
Добавить комментарий