Не вдалося підключитися до сервера розробки React Native на Android

Коли я запускаю react-native run-android, це видає мені таку помилку:

Не вдалося підключитися до сервера розробки

• Сервер пакетів працює, і я можу отримати до нього доступ безпосередньо з браузера на своєму мобільному пристрої.
• Мій пристрій Android підключений до комп’ютера та має ввімкнену налагодження (я перевірив за допомогою adb devicesкоманди).
• Моя версія Android 4.4.4, тому я не можу використовувати adb reverseкоманду.
• Я встановив ідентифікаційну адресу та порт у налаштуваннях Dev.
• Налагодження USB увімкнено.
• Я використовую Windows 7.

Як виправити цю помилку?

З Документів: http://facebook.github.io/react-native/docs/running-on-device.html#method-2-connect-via-wi-fi

Спосіб 2: Підключіться через Wi-Fi

Ви також можете підключитися до сервера розробки через Wi-Fi. Вам
спочатку потрібно встановити додаток на пристрої з допомогою кабелю USB, але
як тільки це було зроблено , ви можете налагоджувати без проводів, слідуючи ці
інструкції.
Перш ніж продовжити, вам знадобиться поточна IP- адреса вашого розробника .

Відкрийте термінал і введіть / sbin / ifconfig, щоб знайти IP-адресу вашого апарата.

1. Переконайтеся, що ваш ноутбук і ваш телефон працюють в одній мережі Wi-Fi.
2. Відкрийте програму React Native на своєму пристрої.
3. Ви побачите червоний екран з помилкою . Це нормально . Наступні кроки це виправлять.
4. Відкрийте меню розробника в додатку.
5. Перейдіть до Налаштування розробника → Хост сервера налагодження для пристрою.
6. Введіть IP-адресу машини та порт локального сервера розробника (наприклад, 10.0.1.1:8081).
7. Поверніться до меню розробника та виберіть Перезавантажити JS.

У моєму випадку проблема полягала в політиці безпеки Android. Згідно з документацією :

Починаючи з Android 9.0 (рівень API 28), підтримка чистого тексту за замовчуванням вимкнена.

Але програма намагається отримати доступ до Metro Bundler через HTTP, так? І тому не може. Щоб увімкнути трафік чистого тексту, відкрийте свій AndroidManifest.xmlі додайте android:usesCleartextTraffic="true"до <application>вузла.

Наприклад:

<application
    android:name="com.example.app"
    android:allowBackup="false"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:usesCleartextTraffic="true">

Ви можете знайти більше рішень у цьому SO: https://stackoverflow.com/a/50834600/1673320 . Проблема OP інша, але схожа.

Запустіть це, і у мене це вийшло

adb reverse tcp:8081 tcp:8081

Починаючи з Android 9.0 (рівень API 28), підтримка чистого тексту за замовчуванням вимкнена. ми можемо використовувати android: usesCleartextTraffic = "true" це буде працювати, але це не рекомендується рішення. Для постійного та рекомендованого рішення нижче:

Крок 1: Створіть файл у папці Android app/src/debug/res/xml/network_security_config.xml

Крок 2: додайте це до network_security_config.xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <!-- deny cleartext traffic for React Native packager ips in release -->
  <domain-config cleartextTrafficPermitted="true">
   <domain includeSubdomains="true">localhost</domain>
   <domain includeSubdomains="true">10.0.2.2</domain>
   <domain includeSubdomains="true">10.0.3.2</domain>
  </domain-config>
</network-security-config>

Крок 3: Застосуйте конфігурацію до вашого AndroidManifest.xml

<application
 android:networkSecurityConfig="@xml/network_security_config">
</application>

Це стосується Android 9.0+ відповідно до Конфігурації мережевої безпеки . Отже, спробувавши всі можливі рішення, які я знайшов в Інтернеті, я вирішив дослідити власний журнал Android logcat вручну. Навіть після додавання android:usesCleartextTraffic="true"я знайшов це в logcat:

06-25 02:32:34.561 32001 32001 E unknown:ReactNative: Caused by: java.net.UnknownServiceException: CLEARTEXT communication to 192.168.29.96 not permitted by network security policy

Отже, я спробував перевірити джерело мого рідного додатка. Я виявив, що у debugваріанті вже існує мережевий конфігуратор безпеки, який визначається рідними хлопцями, що конфліктує з mainваріантом.

Є просте рішення цього. Перейдіть до <app-src>/android/app/src/debug/res/xml/react_native_config.xml пункту Додати новий рядок із власною IP-адресою приблизно так:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain includeSubdomains="false">localhost</domain>
    <domain includeSubdomains="false">10.0.2.2</domain>
    <domain includeSubdomains="false">10.0.3.2</domain>
    ***<domain includeSubdomains="false">192.168.29.96</domain>***
  </domain-config>
</network-security-config>

Оскільки локальний IP-адреса мого комп'ютера (перевірка ifconfigна наявність Linux) становить 192.168.29.96, я додав наведений вище рядок у ***

Потім вам потрібно очистити та відновити для Android!

cd <app-src>/android
./gradlew clean
cd <app-src>
react-native run-android

Сподіваюся, це працює для вас.

** Ubuntu Спробуйте запустити ці команди лише у вашій кореневій папці:

1. sudo npm start --- це автоматично призведе до паузи після сказання - Завантаження графіків виконано (щось подібне); коли це буде зроблено -відкрийте інший термінал

2. реагувати-рідний запустити-android

Якщо проблема все ще переважає, видаліть папку збірки в android / ios, виконайте цю команду, а потім виконайте вищезазначені команди в тому ж порядку

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android**

За замовчуванням конструктор метро працює на порту 8081. Але на моєму ПК цей порт вже зайнятий якимсь іншим процесом (McAfee Antivirus). Тому я змінив стандартний запущений порт конструктора метро на номер порту 8088, використовуючи таку команду

react-native run-android start --port=8088

Це вирішило мою проблему, і програма зараз працює нормально.

PS: Ви можете перевірити, чи зайнятий порт у вікнах, за допомогою програми "Монітор ресурсів". (У розділі "Порти прослуховування" на вкладці "Мережа"). Перегляньте це посилання для детального пояснення: https://www.paddingleft.com/2018/05/03/Find-process-listening-port-on-Windows/

Моє рішення - змінити або створити новий AndroidManifest.xml в android / app / src / debug:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" />
</manifest>

Я використовую версію React Native: 0.61.5

Жодне з наведених вище рішень не спрацювало для мене.

Я щойно відкрив меню Dev, клацнувши, Ctrl+Mа потім клацнувши change bundle locationі додавши IP-адресу свого комп'ютера, а потім порт.

Я теж зустрічався з цим запитанням у рідній та реагуючій-рідній програмі, моє рішення:

1. відкрити сервер npm з npm start
2. запустити власний проект з Android Studio
3. запит мережі передачі з adb reverse tcp:8081 tcp:8081
4. коли вам потрібно перезавантажити сторінку, просто введіть: adb shell input keyevent 82

просто тримайте його в порядку.

PS, якщо ви запустили невдалий проект, просто запустіть adb kill-server

Якщо ви намагаєтеся налагодити додаток у своєму фізичному пристрої Android через Wi-Fi за допомогою машини Windows, тоді пристрій може не мати доступу до порту вашого ПК або ноутбука, вам потрібно зробити порт доступним. це передбачає два етапи:

1. Спочатку створіть правило в брандмауері. для цього виконайте такі дії:

   • діалогове вікно відкритого запуску -
   • типу wf.msc
   • натисніть на вхідні правила
   • клацніть нове правило праворуч
   • виберіть порт у спливаючому меню та натисніть Далі
   • виберіть порт tcp та конкретні локальні порти та введіть номер порту, наприклад 8081(за замовчуванням)
   • дозволити з'єднання
   • вибрати все в розділі профілю
   • дайте якесь відповідне ім’я та опис
   • натисніть закінчити

2. Ви повинні зробити свій ПК доступним зовні, для цього виконайте такі дії:

   • відкрити мережу та центр обміну з панелі управління
   • змінити налаштування адаптера -
   • виберіть свою мережу wifi
   • клацніть правою кнопкою миші, властивості
   • натисніть на вкладку спільного доступу
   • позначте всі прапорці

Вам добре йти, зараз спробуйте запустити реактивний рідний запуск-android.

Найпростіший для MAC. Отримайте ip-адресу вашої мережі Wi-Fi через ipconfig getifaddr en0. Потім напишіть цей ip до вашого прикладу DEV settings -> Debug server host & port for deviceдодавання :8081. 192.21.22.143:8081. Потім перезавантажте. Це воно

Я додав <uses-permission android:name="android.permission.INTERNET" />до debug/AndroidManifest.xmlі почав працювати! Я видалив його main/AndroidManifest.xmlта забув додати під час налагодження.

Версія ReactNative - 0.61.2

Знайдено проблему з пристроєм Android X.

Для Android API 28 і вище

У network_security_config.xml з cleartextTrafficPermitted = "true"

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    ....
  </domain-config>
</network-security-config>

Потім перезавантажте JS

Рішення для React-native >V0.60

Ви також можете підключитися до сервера розробки через Wi-Fi. Спочатку потрібно встановити програму на пристрій за допомогою кабелю USB, але після цього ви зможете налагодити бездротову мережу, дотримуючись цих інструкцій. Перш ніж продовжити, вам знадобиться поточна IP-адреса вашого розробника.

Відкрийте термінал і введіть ipconfig getifaddr en0MAC

Переконайтеся, що ваш ноутбук і ваш телефон працюють в одній мережі Wi-Fi. Відкрийте програму React Native на своєму пристрої.

Ви побачите червоний екран з помилкою. Це нормально. Наступні кроки це виправлять.

1. Відкрийте меню розробника в додатку. струси телефон або натиснітьCMD/ctrl + M
2. Клацніть на Налаштування
3. клацніть на хост і порт сервера налагодження для пристрою
4. У спливаючому вікні введіть IP-адресу комп'ютера та порт локального сервера розробника (наприклад, 10.0.1.1:8081).
5. Поверніться до меню розробника та виберіть Перезавантажити.

ГОТОВО

Ймовірно, це проблема брандмауера. Якщо хтось, хто використовує ubuntu, стикається з цією проблемою, ви можете використовувати

sudo service iptables stop

щоб вимкнути брандмауер для доступу до порту

і перш за все я ціную вас за те, що ви висловили свої сумніви. Це головним чином тому, що, можливо, ваш експо або додаток, в якому ви запускаєте власний реагуючий проект, може бути не в тому ж локальному підключеному wifi або локальній мережі. Крім того, існує ймовірність того, що у вашому з’єднанні часто виникають порушення, через які він втрачає зв’язок.

Я теж стикаюся з цією проблемою, і я особисто очищаю кеш-пам'ять, а потім перезапускаю ще раз і бум, він ідеально перезавантажується. Сподіваюся, це працює і для вас!

Щоб додати goldylucksвідповідь на відповідь, ви можете використовувати IP 192.168.0.10, якщо це IP вашого ПК, на якому запущено пакувальник React Native.

Можливо, вам доведеться також відкрити свій брандмауер.

В Ubuntu 18.04 ви можете отримати свій IP за допомогою:

ip -c addr show

Ви побачите там свій IP, приблизно такий: inet 192.168.0.10/24 brd 192.168.0.255 scope global dynamic noprefixroute enp0s25(зверніть увагу на 192.168.0.10 у моєму зразку).

Потім ви можете відкрити порт 8081 у своєму брандмауері, приблизно так:

sudo ufw allow 8081

Він використовуватиме TCP, тому переконайтесь, що TCP відкритий на порту 8081.

Тоді ви можете слідувати відповіді goldylucks і перейти Dev settingsта ввести 192.168.0.10:8081або будь-який інший IP, який вам потрібен.

Ви можете протестувати це з браузера на своєму пристрої. Поки пакувальник працює з ПК, перейдіть до http://192.168.0.10:8081мобільного пристрою та переконайтеся, що він працює. На ній з’явиться щось на зразок «Упаковщик запущений». Це буде явно працювати або не працювати.

Відповідь Goldylock мене хвилює, оскільки вона дуже добре вирішує проблему, якщо у вас є проблеми з повідомленнями про помилки. Погано постійно перебудовувати програму або ще гірше, видаляти APK з пристрою, а потім збирати знову.

Таким чином, ви, мабуть, повинні використовувати wifi як частину своєї стратегії розробника.

У моєму випадку з Android 4.4.2 довелося зробити кілька додаткових кроків: (Переконайтесь, що на rn-сервері запущений npm start, видаліть app-debug.apk з android / app / build / outputs / apk, видаліть з android, якщо раніше він був встановлений та запущений наступні команди з кореневої папки)

1_ create dir mkdir android/app/src/main/assets
2_ create file index.android.js which is a clone of index.js cp index.js index.android.js
3_ react-native link
4_ curl "http://localhost:8081/index.android.bundle?platform=android" -o "android/app/src/main/assets/index.android.bundle"
5_ react-native run-android

У моєму випадку мій емулятор має налаштування проксі-сервера, після його вимкнення все працює нормально.

В основному ця помилка виникає, коли сервер npm не запущений.

Отже, спочатку перевірте стан сервера npm, якщо він не працює, запустіть npm за допомогою команди, npm startі ви побачите в терміналі:

Завантаження графіка залежності виконано.

Тепер запущено npm і запустіть програму в іншому терміналі за допомогою команди

react-native run-android

Переконайтесь, що працює сервер NPM . В іншому випадку запустіть його знову. Це вирішить проблему.

Для мене я видалив пакет, який нещодавно встановив, і проект знову запустився на моєму фізичному пристрої, використовуючи таку команду "npm uninstall recentPackageName", сподіваюся, це допоможе :)

Коли я розпочав новий проект

react-native init MyPrroject

Я потрапив could not connect to development serverна обидві платформи iOSі Android.

Моє рішення -

sudo lsof -i :8081
//find a PID of node
kill -9 <node_PID>

Також переконайтеся, що ви використовуєте свою локальну IP-адресу

ipconfig getifaddr en0

Я отримав ту саму проблему та вирішив її, видаливши node moduleпакет, а потім знову встановив пряжу. Просто за деякими змінами нам потрібно очистити наші.

У моєму випадку, працюючи на Macbook, мені довелося вимкнути брандмауер, дозволяючи тим самим вхідні з'єднання з мого андроїда. RN v0.61.5

Для мене все зроблено, як згадувалося вище, все ще це не працювало, тоді я слідував крокам нижче і працював як шарм

Перейдіть Безпека вікна => Виберіть Брандмауер та захист мережі => Вимкнути приватну мережу

Спробувавши всі найголосніші відповіді та не змусивши це працювати, я зрозумів, що мій Android Simulator перебуває в режимі польоту. Дуже безглуздо, але розміщення цього, щоб це могло заощадити трохи часу.

PS У мене до цього була безпечна перезавантаження на симуляторі, що, мабуть, є причиною того, чому мій симулятор завантажився в режимі польоту

якщо adb зворотний tcp: 8081 tcp: 8081 ця доза не працює, ви можете перезавантажити ваш комп'ютер, він буде працювати, тому що ваша послуга все ще працює, що працює в мене

Ми зіткнулися з цією проблемою. Щоб виправити це, рішення просто мертве просто нижче.

1. Скасувати поточний процес "реагування на рідний запуск-android" за допомогою CTRL + C або CMD + C
2. Закрийте командний рядок вікна пакету метро, ​​який відкрився автоматично.
3. Виконайте команду ще раз, “реагуйте на рідний запуск-android”.

В основному ця помилка говорить про те, що ваша поточна збірка не вдалася через причини, такі як проблема з кодом або проблема із залежністю.

Клацніть тут, щоб отримати докладнішу інформацію