ReactNative Metro Bundler не запускается автоматически

Это потому, что порт 8081 уже используется.

Пытаться

react-native start --port=8080

Это сработает.

Для проблемы с Unable to load script from assets вам необходимо выполнить следующие шаги:

1] Please check whether "assets" folder exists or not in 'android/app/src/main/'
    a] If it exists then, you need to delete two files(i.e. index.android.bundle and index.android.bundle.meta)
    b] If it doesn't exist, then create the assets directory in it.

2] Use below commands from your root project directory:
    cd android
    ./gradlew clean

3] Go to the root directory and check:
    a] If there is only one file(i.e. index.js), then run below command:
        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

    b] If there are two files(i.e index.android.js and index.ios.js), then below command:
        react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

4] Finally run below command:
    react-native run-android

Я попробовал выполнить следующие действия, и моя проблема решена.

1. Запуск упаковщика на другом порту react-native start --port 8084 --reset-cache
2. Запустите react-native run-android --port 8084 во втором окне командной строки.
3. После появления экрана ошибки нажмите AndroidCtrl + M, iOSCommand + D.
4. Нажмите кнопку Dev Settings внизу.
5. Нажмите кнопку «Отладить хост и порт сервера для устройства».
6. Введите localhost:8084 и нажмите кнопку ОК.
7. Снова запускаем react-native run-android --port 8084

Вы можете перейти в папку «Пользователи» и удалить каталог «.expo». Он может быть скрыт как системный каталог, поэтому просмотрите все, а затем удалите папку .expo.

Снова запустите npm start.

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

react-native start --reset-cache 

в одном терминале и оставил его открытым

react-native run-android 

в другом терминале

Из ошибки, насколько я понимаю, он должен сначала запустить команду пакета перед запуском JS Server

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

Наконец, вы можете проверить, нет ли какой-либо зависимости, выполнив следующую команду

./gradlew assembleRelease -x bundleReleaseJsAndAssets

тогда вы можете запустить Android и реагировать на собственный сервер

react-native run-android
react-native start --reset-cache

Удачи !

Добавление android: usesCleartextTraffic = "true" в тег приложения в AndroidManifest у меня работает

<application
        ...
        android:usesCleartextTraffic = "true"
        ...

Та же проблема, с которой я столкнулся. Вышеупомянутые решения не сработали для меня. Проблема была от Версия NodeJS.

Установленной версией NodeJS была 12.11.1, в которой у меня возникли указанные выше проблемы. Затем я заменил на стабильную версию 10.16.3 LTS, и она работает.

Надеюсь, это решение поможет.

Замените код этим. Путь к файлу -

node_modules\metro-config\src\defaults\blacklist.js

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle\.js/,
  /.*/__tests__/.*/
];

Я нашел это решение на Github.

Это сработало для меня

react-native start --port=8080

Я решил это, запустив "yarn start" на другом терминале перед запуском "react-native run-android"

У меня есть решение проблемы

• перейдите в свой проект и запустите 2 командную оболочку
• в первой оболочке запустите npm start
• во второй оболочке реагировать-native run-android

тогда он будет работать

Я предлагаю вам удалить эту строку import com.facebook.react.BuildConfig в Android / MainApplication

Я просто решил, посмотрев YouTube ниже .. https://thewikihow.com/video_LPYez4cs5LY

Я резюмирую, как показано ниже

1. сделать каталог

"android/app/src/main/assets/"

2. замените переменную sharedBlacklist в node_modules/metro-config/src/defaults/blacklist.js, как показано ниже

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle\.js/,
  /.*/__tests__/.*/
];

с участием :

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle\.js/,
  /.*/__tests__/.*/
];

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

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

Это проблема Gradle.

обновить distributionURL в приложение / градиент / оболочка / gradle-wrapper.properties

из

distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip

к

distributionUrl=https\://services.gradle.org/distributions/gradle-6.6-all.zip

1.- Создать каталог:

android/app/src/main/assets

2.- редактировать файл проекта:

node_module\metro-config\src\defaults\blacklist.js

или РН 0,64:

node_module\metro-config\src\defaults\exclusionList.js

Заменять :

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle\.js/,
  /.*/__tests__/.*/
];

с участием :

var sharedBlacklist = [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle\.js/,
  /.*/__tests__/.*/
];

или РН 0,64

var list = [/website/node_modules/.*/, /.*/__tests__/.*/];

с участием:

var list =  [
  /node_modules[/\\]react[/\\]dist[/\\].*/,
  /website/node_modules/.*/,
  /heapCapture/bundle\.js/,
  /.*/__tests__/.*/
];

3. - в папке project запустите это:

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

4.- реагировать-родной run-android

Эта работа для меня!

Примечание: решение для iOS

Обновление файлов в node_modules не является решением. Это может исправить это на вашем компьютере, но не исправит для всех. Каждый раз, когда вы переустанавливаете модули, вам нужно снова их исправлять.

Проблема

Когда я запустил yarn android, metro bundler успешно работает в отдельном терминале, и приложение работает без проблем.

Но для yarn ios приложение создается и открывается в симуляторе, но metro-bundler не запускается, поэтому приложение не работает.

Причина

Что я обнаружил, так это то, что реагирует на нативное использование packages/myapp/ios/myapp.xcodeproj/project.pbxproj:178 файл, чтобы организовать последовательность действий для сборки.

            buildPhases = (
                9BD325B29C2F37E3FB2D5CCB /* [CP] Check Pods Manifest.lock */,
                FD10A7F022414F080027D42C /* Start Packager */,
                13B07F871A680F5B00A75B9A /* Sources */,
                13B07F8C1A680F5B00A75B9A /* Frameworks */,
                13B07F8E1A680F5B00A75B9A /* Resources */,
                00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
                422396959450562FD5166D49 /* [CP] Embed Pods Frameworks */,
                3C714C11B606C47481E15B97 /* [CP] Copy Pods Resources */,

Вы можете видеть, что сборщик метро (FD10A7F022414F080027D42C /* Start Packager */,) должен запускаться вначале, чтобы приложение могло подключиться к нему как можно скорее.

В моем случае упаковщик не смог найти пакет метро, ​​так как моя папка node_modules сменила местоположение. Поэтому мне нужно было сообщить ему новое местоположение.

Как я решил? (Монорепо)

Я покопался и нашел решение в packages/myapp/ios/myapp.xcodeproj/project.pbxproj:395

        FD10344022414F080027D42C /* Start Packager */ = {
            ...


            ...

            shellScript = "export RCT_METRO_PORT=\"${RCT_METRO_PORT:=8081}\"\necho \"export RCT_METRO_PORT=${RCT_METRO_PORT}\" > \"${SRCROOT}/../../../node_modules/react-native/scripts/.packager.env\"\nif [ -z \"${RCT_NO_LAUNCH_PACKAGER+xxx}\" ] ; then\n  if nc -w 5 -z localhost ${RCT_METRO_PORT} ; then\n    if ! curl -s \"http://localhost:${RCT_METRO_PORT}/status\" | grep -q \"packager-status:running\" ; then\n      echo \"Port ${RCT_METRO_PORT} already in use, packager is either not running or not running correctly\"\n      exit 2\n    fi\n  else\n    open \"$SRCROOT/../../../node_modules/react-native/scripts/launchPackager.command\" || echo \"Can't start packager automatically\"\n  fi\nfi\n";

        

вы могли заметить, что я использую /../../../node_modules, потому что у меня есть такая структура каталогов, как

.
└── node_modules
└── packages
    ├── common
    ├── myapp
    └── their_app

Обычно это так ../node_modules

в основном я занимаюсь поддержкой двух мобильных приложений в одном репо. См. https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417 для получения дополнительной информации.