Игра с React Native - # 2

Чтобы узнать основы React Native, React и JSX, см. Мой предыдущий пост ниже.



Игра с React Native - Основы №1 React и JSX
Не слишком ли сложно разрабатывать мобильные приложения? А вот и React-Native с гораздо более простым способом создания собственных мобильных приложений… medium.com



Реагирующую собственную среду можно настроить, выполнив 5 простых шагов. Выполните шаги в зависимости от ваших платформ (Windows, Linux и Mac).

Шаг 1. Установите NodeJs и react-native-cli

Загрузите и установите NodeJs для всех платформ здесь - https://nodejs.org/en

React-native-cli - это пакет узла, используемый для создания пустого собственного приложения react. Мы должны установить react-native-cli, используя npm глобально для всей системы. Для этого выполните следующие команды.

Linux и Mac

После установки NodeJs откройте терминал и введите эту команду в Mac и Linux, чтобы установить response-native-cli.

sudo npm install -g react-native-cli

Примечание. Укажите пароль для входа в свою учетную запись, когда в команде используется «sudo».

Окна

Откройте командную строку от имени администратора и выполните следующую команду, чтобы установить response-native-cli.

npm install -g react-native-cli

Шаг 2 - Установка зависимостей для Android

Скачайте и установите Android Studio здесь. Убедитесь, что вы установили SDK с SDK Manager.

После установки Android Studio перейдите в диспетчер SDK, который доступен в «Настройки → Внешний вид и поведение → Системные настройки → Android SDK», и убедитесь, что отмечены следующие пакеты.

  • Android SDK
  • Платформа Android SDK
  • Производительность (Intel ® HAXM)
  • Виртуальное устройство Android

а также вам понадобятся некоторые базовые пакеты и платформы, поэтому проверьте и эти элементы и нажмите кнопку «Применить».

  • Платформа SDK для Android 27
  • Системный образ Intel x86 Atom_64 API Google
  • Затем выберите вкладку «Инструменты SDK» и также установите флажок рядом с «Показать сведения о пакете». Найдите и разверните запись «Android SDK Build-Tools», затем убедитесь, что выбрано 26.0.3.

Теперь добавьте переменные пути, чтобы запустить эмулятор на основе вашей платформы.

Mac

Отредактируйте файл .bash_profile в домашнем каталоге пользователя. Вы можете открыть его, выполнив в терминале следующую команду.

open $HOME/.bash_profile

Добавьте следующие строки в конец файла.

export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

Linux

Отредактируйте файл .bash_profile в домашнем каталоге пользователя. Вы можете открыть его, выполнив в терминале следующую команду.

gedit $HOME/.bash_profile

Добавьте следующие строки в конец файла.

export ANDROID_HOME=$HOME/Android/Sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

Окна

В Windows вам нужно добавить путь к SDK в Переменные среды. Задайте имя переменной ANDROID_HOME и значение переменной,

C:\Users\<your_username>\AppData\Local\Android\Sdk

Примечание. установите ‹your_username› на собственное имя пользователя системы.

Шаг 3 - Установка зависимостей для iOS

Mac

Для разработки приложений iOS вам понадобится Xcode, который можно загрузить с https://itunes.apple.com/in/app/xcode/id497799835.

Linux и Windows

Для разработки приложений iOS требуется Xcode, он недоступен для Linux и Windows. Итак, эти платформы сейчас не поддерживаются.

Шаг 4 - Создание приложения React Native

Настройка среды завершена. А теперь давайте попробуем создать приложение с адаптивным дизайном.

Перейдите в терминал (Linux и Mac) или в командную строку (Windows) и введите следующую команду, чтобы создать пустой собственный проект реакции.

react-native init YourAwesomeProject

Примечание. Замените ‹YourAwesomeProject› названием своего проекта.

Шаг 5 - Запуск вашего замечательного приложения

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

Android

Эти команды развернут ваше приложение в эмуляторе, доступном в Android Studio, или на физическом устройстве, подключенном через Android Debugging Bridge (ADB).

Примечание. Чтобы использовать ADB, в телефоне с Android перейдите в «Настройки» → «Параметры разработчика» → «Отладка по USB». Теперь подключите устройство к компьютеру через USB, чтобы использовать ADB.

cd YourAwesomeProject
react-native run-android

iOS

Примечание. Они будут работать только на Mac, поскольку никакая другая платформа не поддерживает Xcode.

Эти команды развернут приложение в одном из симуляторов, доступных в Xcode.

cd YourAwesomeProject
react-native run-ios

Если вы хотите запустить приложение на конкретном симуляторе, таком как iPhone-x, тогда

cd YourAwesomeProject
react-native run-ios --simulator="iPhone X"

Если вышеуказанные команды были успешными, то результат будет таким:

Вот и все, ваша среда React Native готова. Начните воплощать свои удивительные идеи в мобильные приложения уже сегодня.

«Как использовать собственный init с нуля» опубликовано ниже.



Игра с React Native - №3 Как использовать« react-native init с нуля
Здравствуйте, ребята, здесь мы собираемся начать работу с новым проектом react native. Попробуйте использовать response-native init medium.com »



Скажите Привет, это бесплатно. @Matheswaaran_S или https://matheswaaran.com