React Native - Настройка среды
Вам необходимо установить несколько вещей, чтобы настроить среду для React Native. Мы будем использовать OSX в качестве нашей строительной платформы.
| Sr. No. | Программного обеспечения | Описание |
|---|---|---|
| 1 | NodeJS и NPM | Вы можете следить за нашей NodeJS Environment Setup учебник для установки NodeJS. |
Шаг 1. Установите приложение create-react-native-app
После успешной установки NodeJS и NPM в вашей системе вы можете продолжить установку create-react-native-app (глобально, как показано ниже).
C:\Users\Tutorialspoint> npm install -g create-react-native-appШаг 2: Создайте проект
Просмотрите необходимую папку и создайте новый проект React Native, как показано ниже.
C:\Users\Tutorialspoint>cd Desktop
C:\Users\Tutorialspoint\Desktop>create-react-native-app MyReactNativeПосле выполнения указанной выше команды создается папка с указанным именем со следующим содержимым.
Шаг 3: NodeJS Python Jdk8
Убедитесь, что в вашей системе установлены Python NodeJS и jdk8, если нет, установите их. В дополнение к этому рекомендуется установить последнюю версию пряжи, чтобы избежать определенных проблем.
Шаг 4. Установите React Native CLI
Вы можете установить собственный интерфейс командной строки response на npm, используя команду install -g response-native-cli, как показано ниже.
npm install -g react-native-cli
Шаг 5. Начните реагировать на родной язык
Чтобы проверить установку, просмотрите папку проекта и попробуйте запустить проект с помощью команды start.
C:\Users\Tutorialspoint\Desktop>cd MyReactNative
C:\Users\Tutorialspoint\Desktop\MyReactNative>npm startЕсли все прошло хорошо, вы получите QR-код, как показано ниже.
В соответствии с инструкциями, один из способов запустить собственные приложения на вашем устройстве Android - это использовать expo. Установите клиент expo в свое устройство Android и отсканируйте полученный выше QR-код.
Шаг 6: Извлеките проект
Если вы хотите запустить эмулятор Android с помощью студии Android, выйдите из текущей командной строки, нажав ctrl+c.
Затем выполните run eject command в виде
npm run ejectЭто предложит вам варианты для извлечения, выберите первый с помощью стрелок и нажмите Enter.
Затем вы должны предложить название приложения на главном экране и название проекта студии Android и проектов Xcode.
Хотя ваш проект успешно извлечен, вы можете получить сообщение об ошибке:
Игнорируйте эту ошибку и запустите реакцию на Android, используя следующую команду -
react-native run-androidНо перед этим вам необходимо установить студию Android.
Шаг 7: установка Android Studio
Посетите веб-страницу https://developer.android.com/studio/ и скачай андроид студию.
После загрузки установочного файла дважды щелкните по нему и продолжите установку.
Шаг 8: Настройка AVD Manager
Чтобы настроить AVD Manager, щелкните соответствующий значок в строке меню.
Шаг 9: Настройка AVD Manager
Выберите определение устройства, рекомендуется Nexus 5X.
Нажмите кнопку «Далее», чтобы открыть окно «Образ системы». Выберитеx86 Images таб.
Затем выберите Marshmallow и нажмите «Далее».
Наконец, нажмите кнопку «Готово», чтобы завершить настройку AVD.
После настройки виртуального устройства нажмите кнопку воспроизведения в столбце «Действия», чтобы запустить эмулятор Android.
Шаг 10: Запуск Android
Откройте командную строку, просмотрите папку своего проекта и выполните команду react-native run-android команда.
Затем выполнение вашего приложения начинается в другом запросе, вы можете увидеть его статус.
В вашем эмуляторе Android вы можете увидеть выполнение приложения по умолчанию как -
Шаг 11: local.properties
Открыть android папка в папке вашего проекта SampleReactNative/android(в этом случае). Создайте файл с именемlocal.properties и добавьте в него следующий путь.
sdk.dir = /C:\\Users\\Tutorialspoint\\AppData\\Local\\Android\\Sdkздесь замените Tutorialspoint с вашим именем пользователя.
Шаг 12: горячая перезагрузка
А для создания приложения измените App.js, и изменения будут автоматически обновлены в эмуляторе Android.
Если нет, нажмите на эмулятор Android нажмите ctrl+m затем выберите Enable Hot Reloading вариант.
