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 вариант.