Давайте разберемся, как правильно установить и настроить среду разработки React Native на Mac.

Вы можете использовать Expo CLI и React Native CLI для разработки приложения на Mac. Вы также можете посмотреть подробное описание на официальном сайте.

Давайте для начала установим Homebrew, Nodejs и Watchman.

Homebrew

Homebrew – это менеджер пакетов на Mac для установки и управления пакетами.

Сначала откройте терминал и выполните команду ниже, чтобы проверить, установлен ли Homebrew в вашей системе.

brew --version

Если Homebrew установлен то вы увидите его версию.

Homebrew 2.2.13
Homebrew/homebrew-core (git revision 976650; last commit 2020-04-13)

Если версия не отображается то вы можете установить его с помощью приведенной ниже команды.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

После установки выполните еще раз команду ниже

brew --version

Если установка прошла успешно то вы должны увидеть его версию. p.s. Установленная версия на вашем компьютере может отличаться от моей.

Homebrew 2.2.13
Homebrew/homebrew-core (git revision 976650; last commit 2020-04-13)

Nodejs

React native – это Javascript, поэтому нам нужно установить Nodejs для его выполнения.
Nodejs: https://nodejs.org/

Для установки Nodejs выполните команду Homebrew ниже.

brew install node

После установки выполните команду ниже, чтобы проверить, правильно ли установлен Nodejs.
p.s. Версия может отличаться.

node -v
> v13.11.0

Вместе с установкой Nodejs, также устанавливается npm (Node Package Manager). Выполните команду ниже, чтобы проверить версию npm.

 npm -v
> 6.13.7

Watchman

Watchman – это библиотека от Facebook которая наблюдает за определенными папками или файлами и если они изменяются то он может инициировать некоторые действия. В React Native Watchman следит за исходными файлами и если они добавляются или изменяются то он их перестраивает.
Watchman: https://facebook.github.io/watchman/

Выполните команду ниже, чтобы установить Watchman.

brew install watchman

После установки нужно проверить версию Watchman.

watchman -v 
> 4.9.0

Теперь нам необходимо установить React Native CLI.

React Native CLI

Выполните команду npm ниже, чтобы глобально установить React Native CLI.

npm install -g react-native-cli

После установки мы как обычно проверяем версию.

react-native --version
> 4.6.3

Xcode

Нам нужен Xcode для разработки под IOS.
Нажмите на ссылку ниже, чтобы установить Xcode через App Store
Xcode: https://apps.apple.com/us/app/xcode/id497799835

Вам также необходимо установить инструменты командной строки Xcode. Откройте Xcode, затем выберите «Настройки …» в меню Xcode. Перейдите на панель «Расположение» и установите инструменты, выбрав самую последнюю версию в раскрывающемся списке «Инструменты командной строки».

После того, как Xcode установлен, необходимо установить инструменты командной строки. Откройте Xcode и нажмите “Preferences”. Затем перейдите во вкладку “Locations” в верхнем меню. Дальше нужно в выпадающем списке “Command Line Tools” выбрать самую последнюю версию как показано ниже.

Установка CocоaPods

CocоaPods – это менеджер зависимостей для разработки проектов под IOS.
CocоaPods: https://cocoapods.org/

sudo gem install cocoapods

После окончания установки нужно проверить версию.

pod --version
> 1.7.5

Android Studio и JDK

В этой статье подробно описано как установить Android Studio и JDK на Mac OS

Создание проекта

Выполните команду ниже для инициализации проекта на React Native.

react-native init TestApp

Теперь давайте запустим приложение в IOS симуляторе

cd TestApp
npm run ios или react-native run-ios

После запуска проекта откроется еще одно окно терминала.

Если все было установлено верно то откроется эмулятор и в нем запустится проект.

Осталось еще проверить на Android симуляторе.

cd TestApp
npm run android или react-native run-android

Если во время запуска приложения выпала ошибка о не верно настроенном окружении “Android environment” как показано ниже:

Вам следует выполнить команду ниже и после еще раз запустить проект.

source ~/.bash_profile
npm run android

Если все равно будет отображаться ошибка то следует еще раз проверить правильность настройки Android окружения в этой статье.