В этой статье записана моя сборка
React-NativeКарьеры, наступившие в ходе реализации проекта (далееRN), и используяAndroidреальная работа машиныRNПроблемы, с которыми столкнулся проект, для вашего ознакомления.
инициализацияRNпроект
бегатьreact-native init [your project name]команда для локальной инициализацииRNпроект
открытый местныйRNСлужить
cdв проект, не требуетсяnpm install, так как этот шагreact-nativeУже сделано для вас. бежать напрямуюreact-native run-iosилиreact-native run-android, можно запустить отдельноRNизAndroidверсия иiOSверсияRNлокальный сервер.
Я отлаживаю Android и запускаю команду напрямуюreact-native run-android, то терминал начнет работу по умолчаниюnodeпроцесс обслуживания. Примечание: В процессе разработки не закрывайте оба окна, иначеJSЛокальная служба в среде будет нарушена.
windowsв окружающей средеAndroid StudioУстановить
Хотя вы можете использовать любой редактор для разработки своего приложения (написать js-код), вам все равно придется установитьAndroid StudioкомпилироватьсяAndroidИнструменты и среда, необходимые для приложения.
намекать:о
Android Studio, ты можешь пойти вОфициальный сайт, вы также можете перейти кЗагрузка домашнего сообщества, если собираетесьЗагрузка с официального сайта, отечественные пользователи должны иметь стабильный инструмент для преодоления стены, иначе в процессе загрузки, установки и настройки они будут продолжать сталкиваться с тайм-аутом или отключением ссылки, и работы по развитию не могут быть проведены.
начать установку
УстановитьAndroid Virtual Device
Уведомление:Его нужно выбрать при установке.
Android Virtual DeviceУстановитьandroidВиртуальное устройство, иначе ни реальная машина, ни эмулятор не смогут открыть отладку.
Выбор каталога установки
Определите директорию установки, здесь нечего сказать, но нужно обратить внимание, чтобы не поставить ее в
C:\вниз, потому чтоAndroidизSDKОчень прожорлив к памяти.
Android Studio.
запускатьAndroid StudioПостроитьAndroidСреда выполнения симулятора
SDKОн появитсяSDKинтерфейс установки, не забудьте проверитьAndroid Virtual Device, полностью завершить установку, начать прямоAndroid StudioОткройте рабочий интерфейс, откройте только что инициализированныйRNпод проектandroidмодуль.Первый запуск проекта может занять много времени.Android StudioВ правом нижнем углу есть индикатор выполнения иevent log, в левом нижнем углу есть терминал, который может распечатать установку пакета иtasks runинформация о времени. Первая автоматическая установка системы может не удаться, нужно нажать вручнуюInstall missing platformsУстановить недостающие файлы
Дождитесь завершения различных зависимостей и компиляции, а правый верхний уголVirtual DeviceКнопка «Выполнить» на панели управления будет выделена, выберитеappНажмите кнопку «Выполнить» справа, чтобы отобразитьVirtual DeviceВыберите всплывающее окно.В это время подключите реальную машину кабелем для передачи данных и установите ее какотладочные данные USB. Если устройство успешно подключено, отобразятся модель и номер версии.
Уведомление:Не рекомендуется здесь
Android StudioВстроенный симулятор сложен в настройке, требует много памяти и в нормальных условиях запускается одновременно.Android Studioи эмуляторы, процессор почти полностью съеден.
RNреальное устройство, просто нажмите ОК, иногда оно может не работать успешно, фонevent logЕсли сообщается об ошибке, перезапустите его в это время.запускатьadbСлужить
JavaScriptЛокальная служба включена,Android StudioСреда настроена и должна быть запущенаadbкоманда для открытия тестового порта
ADB (Android Debug Bridge) — это инструмент в Android SDK. Используя ADB, вы можете напрямую работать и управлять эмуляторами Android или реальными устройствами Android. ADB — это клиент-серверная программа, где клиент — это компьютер, который вы используете для работы, а сервер — это устройство Android.
помните, что вы установилиAndroid StudioПосле этого установитеSDKкаталог? включиwindowsсистемный терминал,cdВойтиSDKв каталоге установкиplatform-toolsпапка, запуститьadb reverse tcp:8081 tcp:8081Команда указывает порт разработки.
Уведомление:бегать
adbПеред заказом убедитесьAndroidРеальная машина и локальный сервис запускаются в одном сегменте сети, проще говоря, они подключены к одному и тому же роутеру, иначе соединение не может быть установлено! !
реальная работа машиныRN
Реальная машина должна успешно запуститься одновременно:
- Локальная служба JS запускается успешно, то есть работает
react-native run-android -
Android StudioОборудование для разработки успешно запущено -
adbКонфигурация порта прошла успешно
Все среды настроены, в настоящее времяAndroidреальный шанс установить автоматическиRNПакет разработки проекта запускается автоматически, в случае успешной операции появится следующий начальный интерфейс:
Отладка реальной машиныRN
Пока проект запущен, но как его отлаживать? Как вызвать консоль на реальной машине? Просто встряхните телефон. Встряхните телефон, чтобы вызвать консоль следующим образом:
-
ReloadТо есть очистка всего приложения эквивалентна уничтожению процесса и его повторному открытию. -
Debug JS RemotelyУдаленно откройте страницу отладки JS в браузере ПК, откройте браузерF12Вызвав консоль, можно увидеть данные различных запущенных кодов, так же, как и написатьwebviewто же, что проект. Просто если вы откроете эту опцию в реальной машинной среде, она сильно застрянет.Я не нашел для этого хорошего решения. - Enable Live Reload включает автоматическое обновление изменений и простой
ReloadОтличие в том, что его можно обновить прямо на текущей странице и не будет повторно заходить со страницы приветствия. а такжеEnable Hot ReloadingРазница в том, что возможность повторного выполнения страницыJavaScriptкод, покаEnable Hot ReloadingПросто измените стиль слоя просмотра, логика не будет выполняться повторно. -
Enable Hot ReloadingГорячее обновление, оно будет использоваться, когда вы сможете быстро увидеть эффект пользовательского интерфейса при создании страницы. - Не знаю, что делать с последними, во всяком случае, для новичков достаточно четырех вышеперечисленных функций.
Наконец, оRNНекоторые рекомендации по сообщениям об ошибках красного экрана:
- Для отладки реальной машины помните, что устройство и ПК должны находиться в одном сегменте сети.
- Среда не может работать, наиболее распространенная ошибка
JSЛокальная служба не работает, т.е.react-native run-androidКоманда выполняется безуспешно, иногда выдаются сообщения об ошибках отладки. Эта служба будет отключена по умолчанию, и разработчикам необходимо просматривать включенные службы в режиме реального времени.nodeжурнал печати службы -
JavaScriptВозникла проблема с выполнением кода, различные проблемы, пакет не найден, переменная не определена, метка не закрыта и т. д. В этом случае служба не остановится при сообщении об ошибке, это 500 ошибка. Как правило, такая ошибка запуска является сообщением об ошибке на реальной машине. Позиционирование более точное, просто проверьте его самостоятельно. - При использовании
RNнекоторые экологические компоненты, такие какreact-navigationНавигация, обязательно обратите внимание на версию,3.*Версия версии и2.*Он немного отличается. Как правило, в этом случае в журнале ошибок будет указано только, что есть проблема с пакетом, и будут даны соответствующие решения. Перейдите к документации, чтобы узнать, как его использовать, и обновите его до соответствующей версии. . - Иногда будут какие-то необъяснимые ошибки, может быть, ошибка компиляции пакета, подключите и отключите устройство, повторите процесс, и все будет в порядке.
Суммировать
Выше приведены некоторые из ям, на которые я наступил, когда создавал окружение самостоятельно.RNСообщество не очень хорошее, многие проблемы не идеальны, и многие решения необходимо постоянно обобщать в процессе исследования.