Для лучшего понимания концепций React Native я позаимствую несколько строк из официальной документации —

React Native позволяет создавать мобильные приложения, используя только JavaScript. Он использует тот же дизайн, что и React, что позволяет создавать богатый мобильный пользовательский интерфейс из декларативных компонентов. С React Native вы не создаете мобильное веб-приложение, приложение HTML5 или гибридное приложение; вы создаете настоящее мобильное приложение, которое неотличимо от приложения, созданного с использованием Objective-C или Java. React Native использует те же основные строительные блоки пользовательского интерфейса, что и обычные приложения для iOS и Android. Вы просто соединяете эти строительные блоки, используя JavaScript и React.

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

Настройка среды

  1. Сначала вам нужно установить менеджер пакетов HomeBrew на вашу OS X, чтобы установить собственные зависимости React на вашем компьютере.
  2. После этого вам необходимо установить node, watchman и flow. Вам потребуется node для инициализации npm для загрузки пакетов React Native. watchman — это служба просмотра файлов, используемая react-native для обнаружения изменений в коде, а затем для автоматической сборки и отправки изменений на устройство. flow — это библиотека проверки типов для Facebook.

Запустите следующие команды в терминале для установки,

brew install node
brew install watchman
brew install flow

Если вы столкнулись с какими-либо трудностями, попробуйте обновить пакеты brew и upgrade с помощью следующих команд:

brew update
brew upgrade

Установка React Native

Теперь, когда у вас установлен npm, вы можете установить React Native CLI с помощью следующих команд:

npm install - g react-native-cli

Эта команда установит собственные инструменты командной строки react в вашей системе по всему миру.

Установите Xcode и инструменты командной строки Xcode

Далее вам нужно установить Xcode из магазина приложений Mac и установить инструменты командной строки.

Создание React-нативного проекта

  1. Теперь вы можете использовать инструменты командной строки React Native для создания нового проекта, выполнив следующую команду:
react-native init HelloWorld

Это создаст шаблон для платформ ReactNative, iOS и Android. Теперь, если вы видите внутри своего проекта HelloWorld, ниже приведена структура каталогов родного приложения реакции,

android — шаблонный код, относящийся к нативному приложению Android.

ios — шаблонный код, относящийся к нативному приложению iOS.

node_modules — содержит зависимые модули, установленные через npm.

index.js — реагирует на нативную точку входа, созданную CLI.

App.js – базовое приложение, созданное с помощью интерфейса командной строки.

package.json — файл метаданных приложения, содержащий список зависимостей.

Запуск приложения React Native для iOS

  1. Теперь перейдите в каталог проекта, введя следующую команду:
cd HelloWorld

2. Чтобы протестировать приложение на симуляторе, выполните следующую команду:

react-native run-ios

И если все настроено правильно, вы увидите работающий симулятор iOS, как показано ниже:

Если вы хотите запустить приложение на конкретном симуляторе, вы можете сделать это, указав следующую команду:

react-native run-ios --simulator="iPhone XR"

Более того, запустить приложение на реальном устройстве iOS можно, введя следующую команду:

react-native run-ios --device "[Device Name]"

Исправление проблем

Если вы видите симулятор с красным экраном и следующим сообщением об ошибке, обязательно запустите «npm start» перед запуском на симуляторе.

Если вы работаете на устройстве, убедитесь, что ваш хост-компьютер и устройство подключены к одной и той же сети Wi-Fi, а URL-адрес сервера узла правильно установлен в App Delegate, как показано ниже,

jsCodeLocation = [NSURL URLWithString:@"http://DEV_SERVER_URI:8081/index.ios.bundle?platform=ios&dev=true"];

IDE

Хотя для React Native доступно несколько бесплатных IDE с открытым исходным кодом, я предпочитаю использовать Visual Studio Code, а не другие IDE. Редактор кода Visual Studio очень популярен в сообществе и имеет широкий спектр расширений, которые помогают поддерживать хороший и читаемый код. Итак, вперед, Скачать и установить VSC. После установки найдите React Native Tools на вкладке Расширения и нажмите кнопку Установить. Теперь все готово к редактированию, отладке и запуску нативного проекта. Для получения дополнительной информации о расширениях я бы порекомендовал вам следовать этому руководству: VSCode для React Native.

Спасибо, что прочитали первую часть «React Native For Beginners — iOS».

Будьте в курсе предстоящих технических сообщений!