Как запустить react native на телефоне
Это работает хорошо, когда я запускаю приложение в терминале на Mac, используя "response-native run-android".
Но когда я получил файл apk и установил его на другом устройстве Android вручную, он не работает.
Похоже, что исходный код вашего APK ищет сервер пакетов.
Прочтите это о том, как создать APK для реактивно-родного: React-Native - Создание подписанного APK
Если ваши устройства подключены с помощью кабеля:
- Если вы используете физическое устройство, подключенное к той же машине, запустите adb reverse tcp:8081 tcp:8081, чтобы пересылать запросы с вашего устройства.
В противном случае вы все равно можете сделать это через Wi-Fi, следуя последнему пункту в ошибке:
- Если ваше устройство находится в той же сети Wi-Fi, задайте "Отладка хоста и порт сервера для устройства" в "Настройках разработчика" на IP-адрес вашего компьютера и порт локального сервера dev -eg 10.0.1.1:8081
Если вы подключены через кабель, сделайте следующее:
1. Перейти> Настройки> Об устройстве
2. Затем информация о программном обеспечении
3. Затем> Номер сборки
4. Теперь нажмите (щелкните) несколько раз на номер сборки, чтобы включить параметры разработчика
5. Здесь вы идете не параметры разработчика будут видны в ваших настройках
6. Теперь зайдите в Параметры разработчика и включите режим отладки по USB.
7. Откройте свой терминал
В Windows откройте Android SDK Manger > Инструменты платформы
Это покажет вам устройства и симулятор / виртуальные устройства, которые у вас есть на вашем компьютере.
8. Переадресация запросов с вашего устройства
9. Запустите его
Приложение должно появиться на вашем устройстве
Выполните следующие действия, чтобы запустить собственный код на физическом мобильном устройстве:-
- Убедитесь, что вы находитесь в одной сети Wi-Fi (мобильный телефон и ноутбук).
- Запустите свой код и установите его на мобильный телефон через Android Studio.
- Приложение установится и попросит вас изменить "настройки разработчика".
- Встряхните телефон, перейдите в "Настройки разработчика" и введите IP-адрес вашего устройства (192.16.XX.XXX:8081).
- Закройте приложение один раз и откройте снова, в терминале вы увидите это
6. Подождите, приложение установится и отразит изменения.
Получите список всех устройств:
Затем установите, на каком устройстве запускать:
Затем разверните приложение:
Если вы обновили свою версию act-native с момента создания файлов проекта Android, возможно, вы захотите восстановить их сейчас. Я думаю, что вы можете использовать react-native upgrade ,
Для запуска приложения React Native на Android требуется следующее:
Android StudioAndroid SDKJDK 8 (инструкции по установке для macOS здесь и Windows здесь)
Мы можем запустить приложение React Native на платформе Android, запустив следующий код в терминале.
react-native run-android Прежде чем вы сможете запускать приложение на устройстве Android, вам необходимо включить отладку по USB в параметрах разработчика.
Теперь перезапустите приложение, используя
Вместо этого команда для исправления сети на физическом устройстве должна быть: adb -s reverse tcp:8081 tcp:8081
Когда USB-отладка включена, вы можете подключить свое устройство и запустить приведенный выше фрагмент кода.
Настройте свое приложение для подключения к локальному серверу разработки через Wi-Fi
- Убедитесь, что ваш ноутбук и телефон находятся в одной сети Wi-Fi.
- Откройте приложение React Native на своем устройстве. Вы можете сделать то же самое
- так, как вы открыли бы любое другое приложение. Вы увидите красный экран с ошибкой.
- Хорошо. Следующие шаги исправят это. Откройте разработчика
- Зайдите в настройки разработчика. Перейдите на узел сервера отладки для устройства. Введите IP-адрес вашего компьютера и порт локального сервера разработки (например, 10.0.1.1:8081).
- На Mac вы можете найти IP-адрес в Системных настройках / Сеть. В Windows откройте командную строку и введите ipconfig, чтобы узнать IP-адрес вашего компьютера (подробнее).
- Вернитесь в меню разработчика и выберите «Обновить JS».
Родной эмулятор Android работает медленно. Мы рекомендуем скачать Genymotion для тестирования вашего приложения.
Что такое React Native?
Если вы знакомы с веб-фреймворком React, для вас не составит труда быстро разобраться с тем, как работает React Native. По сути, React Native адаптирует фишки React под разработку мобильных приложений. Давайте рассмотрим несколько особенностей React Native:
- Декларативность. Делает возможным удобное описание и создание компонентов в виде ЧТО мы хотим, а не КАК мы хотим.
- Компонентность. Возможность создавать отдельные независимые компоненты с инкапсульрованным состоянием
- Кроссплатформенность. Вы пишите один код под Android и iOS
Вывод: что такое React Native? Это фреймворк, позволяющий одновременно создавать мобильные приложения под Android и iOS, используя для этого независимые компоненты, и делать это на понятном человеку языке.
Быстрое создание React Native приложения
- Установить NodeJs
- Установить Expo
- Создать приложение
- Установить Android Studio и настроить эмулятор
- Установить Xcode и настроить эмулятор (только если у вас MacOS)
- Запустить приложения на эмуляторах или прямо на телефоне
Установка NodeJs
Как установить NodeJs вы можете прочитать в моей статье про Angular.
Установка Expo
Для того чтобы установить Expo выполните следующую команду в консоли:
Создание приложения
Теперь мы можем создать первое мобильное приложение с помощью Expo и React Native! Все что нам нужно это выполнить команду:
В консоли вам будет предоставлен выбор стратегии генерации приложения:
Выберете пункт blank. С его помощью будет сгенерировано приложение на JavaScript с реализацией одного экрана. Так же возможны другие варианты:
Но прежде чем это делать нам необходимо установить эмуляторы мобильных телефонов на компьютер, чтобы мы смогли увидеть наше приложение. Давайте сделаем это!
Установка Android Studio и настройка эмулятора
Далее установите необходимые платформы во вкладке SDK Platforms. Для старта можно установить самый новый SKD, должна стоять галочка как на картинке:
Android Studio скачает и установит необходимые компоненты.
. Важный шаг если у вас MacOS или Linux
Если вы работаете с MacOS или Linux, то вам необходимо сделать дополнительный шаг (если у вас Windows, то делать этого не нужно). Вам требуется прописать путь до Android SDK в переменную PATH. Этот путь вы можете скопировать из Android Studio из той же вкладки с настройками из предыдущего шага:
Для этого вам потребуется открыть файл .bash_profile (если его нет, то создайте его в корне пользователя) и прописать в него нужную строчку. Например, вы можете воспользоваться командой
У вас откроется этот файл в текстовом редакторе nano. Далее скопируйте путь до Android SKD и пропишите его в файл как строку:
export ANDROID_SDK = / Users / myuser / Library / Android / sdkЕсли у вас MacOS, то дополнительно нужно добавить в файл .bash_profile еще одну строку:
export PATH = / Users / myuser / Library / Android / sdk / platform - tools : $ PATHФайл должен выглядеть примерно так:
Сохраните внесенные изменения командой ctrl+o и закройте nano командой ctrl+x.
Настройка эмулятора Android
Нажимаем Next, выбираем уже скаченную версию Android, после жмем Next и Finish. В результате у вас появится созданный эмулятор, который вы можете запустить нажав зеленую кнопку:
Установка Xcode и запуск эмулятора iOS (только для MacOS)
Установить на свой компьютер эмулятор для iOS можно только если вы используете MacOS. Но, если у вас есть IPhone, то вы сможете с помощью Expo так же запустить свое приложения прямо на телефоне. Ниже я расскажу как это сделать. Итак, перейдем в AppStore и скачаем Xcode. После установки достаточно просто открыть его, перейти во вкладку Xcode -> Open Developer Tool -> Simulator. И вауля! Согласитесь, это было проще, чем настроить Android.
Запуск приложения на эмуляторах или прямо на телефоне
Это главный файл, который будет рендерить экран приложения.
Для запуска необходимо в консоли написать команду:
Как только вы ее выполните у вас откроется браузер со специальной локальной страницей expo:
Ура! Нам удалось создать и запустить первое приложение на React Native! О внутреннем устройстве самого React Native и его компонентах я расскажу в следующих статьях, а сейчас давайте запустим наше приложение на собственном телефоне! Как вы можете увидеть из скриншота, в панели expo в левом нижнем углу есть QR-code. Он то и поможет, но прежде необходимо установить специальное приложение Expo Client на свой смартфон (ссылка на iOS ссылка на Android). После установки просто наведите камеру телефона на QR-code и перейдите по ссылке. У вас запустится Expo Client, внутри которого развернется наше новое приложение!
Выводы
Доброе время суток, друзья! В этой статье я бы хотел поделиться опытом создания и настройки своего первого приложения на React Native. Зачем вообще может понадобиться React Native, мне кажется объяснять не стоит, но все же хотелось бы сказать пару слов, зачем это понадобилось мне.
В процессе работы у меня появилась вынужденная необходимость создания несложного мобильного приложения, и, с учетом того, что я все время занимаюсь разработкой приложений и сайтов в сети интернет и использую в своей работе, как правило, PHP и Javascript, то создание мобильного приложения для смартфона, да еще к тому же сразу для двух платформ: IOS и Android, для меня показалось сомнительной, хоть и интересной задачей. И, как не удивительно, React Native в моем случае показался единственным реальным и рабочим инструментом, который к тому же осуществляет поддержку достаточно большого количества мобильных устройств. Заявленная поддержка – это Android 4.1 (API 16) и >= iOS 8.0. А это порядка 98% пользователей Android и более 90% пользователей IOS.
Что потребуется для установки React Native, запуска и работы с приложением?
К счастью, запуск и настройка инструментария для создания своего приложения достаточно просты. Все что, потребуется – это скачать приложение для вашего телефона, которое называется Expo, редактор кода и терминал. Данное приложение доступно в Google Play и App Store для скачивания. Если вы не хотите устанавливать данное приложение на ваш телефон, то вы также можете зарегистрироваться на сайте expo.io, где у вас будет возможность разрабатывать ваше приложение через ваш браузер.
Сразу хочу сказать, что когда я скачал данное приложение для IPhone, то для его запуска потребовалось добавить проект в "мои проекты" на expo.io. На Android все было проще, поскольку было достаточно просканировать QR код, который любезно сгенерировала мне утилита create-react-native-app.
Важно: требуется понимать, что у вас должен быть установлен node.js на вашем компьютере и npm.
Наши дальнейшие действия таковы:
- 1 — заходим в терминал и устанавливаем create-react-native-app глобально, если он не установлен, командой: npm install -g create-react-native-app
- 2 — затем создаем проект вводом команды: create-react-native-app MyApp
- 3 — переходим в папку проекта: cd MyApp
- 4 — запускаем проект: npm start
Примерный результат запуска приложения на вашем устройстве (рис.1)
Рис.1
Все готово. Теперь можно сгенерировать QR код для вашего телефона, просканировать его и можно писать нативное приложение на Javascript для ваших мобильных устройств.
Он работает хорошо, когда я запускаю приложение в терминале на Mac, используя "react-native run-android".
Но когда я получил файл apk и установил его на другое устройство Android вручную, он не работает.
Это выглядит так.
4 ответа
Похоже, что исходный код в вашем APK ищет сервер пакетов.
Прочтите о том, как создавать APK-файлы для react-native: React -Native - Создание подписанного APK
Если ваши устройства подключены через кабель:
- Если вы используете физическое устройство, подключенное к тому же компьютеру, запустите adb reverse tcp: 8081 tcp: 8081, чтобы пересылать запросы с вашего устройства.
В противном случае вы все равно можете сделать это через Wi-Fi, следуя последнему пункту ошибки:
- Если ваше устройство подключено к той же сети Wi-Fi, установите "Отладить хост сервера & amp; порт для устройства 'в' Настройки разработчика 'на IP-адрес вашего компьютера и порт локального dev-сервера - например, 10.0.1.1:8081
Выполните следующие действия, чтобы запустить собственный код на физическом мобильном устройстве: -
- Убедитесь, что вы находитесь в одной сети Wi-Fi (мобильный телефон и ноутбук).
- Запустите свой код и установите его на мобильный телефон через Android Studio.
- Приложение установится и попросит вас изменить «настройки разработчика».
- Встряхните телефон, перейдите в «Настройки разработчика» и введите IP-адрес вашего устройства (192.16.XX.XXX:8081).
- Закройте приложение один раз и откройте снова, в терминале вы увидите это
6. Подождите минуту, и приложение установится и отразит изменения.
Если вы обновили свою версию response-native после создания файлов проекта Android, возможно, вы захотите восстановить их сейчас. Я думаю, вы можете использовать react-native upgrade .
Если вы подключены через кабель, сделайте следующее:
1. Перейдите к> Настройки> Об устройстве.
2. Затем "Информация о программном обеспечении"
3. Затем> Номер сборки.
4. Теперь нажмите (щелкните) несколько раз на Номер сборки , чтобы включить Параметры разработчика .
5. Здесь вы идете, не параметры разработчика будут отображаться в ваших настройках
6. Теперь войдите в параметры разработчика и включите режим отладки USB.
7. Откройте свой терминал.
В Windows откройте Android SDK Manager & gt; Инструменты платформы
Это покажет вам устройства и симуляторы / виртуальные устройства, которые у вас есть на вашем компьютере.
Читайте также: