В этой статье я покажу вам, как запустить базовое приложение jdReact Native на macOS. В статье будут представлены подробные пошаговые инструкции, демонстрирующие, как установить правильные зависимости, необходимые для React Native, а также как запустить базовый проект.
Какие зависимости нужны?
Прежде чем вы сможете начать разработку с использованием React Native, для macOS должны быть установлены следующие зависимости:
- Узел — позволяет разработчикам писать код JavaScript, который выполняется непосредственно в самом компьютерном процессе, а не в браузере.
- Watchman — существует для просмотра файлов и записи их изменений. Он также может инициировать действия (например, перестроение активов) при изменении соответствующих файлов.
- React Native CLI — предоставляет вам команду react-native init, которая создает для вас простой нативный проект с отдельными нативными проектами для платформ iOS и Android.
- Xcode — это интегрированная среда разработки Apple для macOS, используемая для разработки программного обеспечения для macOS, iOS, iPadOS, watchOS и tvOS.
- CocoaPods — это менеджер зависимостей уровня приложения для Objective-C, Swift и любых других языков, работающих в среде выполнения Objective-C, таких как RubyMotion, который предоставляет стандартный формат для управления внешними библиотеками.
1. Установите зависимости
Для установки Node и Watchman я рекомендую использовать Homebrew.
Homebrew — это бесплатная система управления пакетами программного обеспечения с открытым исходным кодом, которая упрощает установку программного обеспечения в операционной системе Apple macOS, а также в Linux.
Если на вашем Mac в настоящее время не установлен Homebrew, вот ссылка на процесс установки:
Убедитесь, что Homebrew установлен, прежде чем продолжить эту статью. Если он у вас уже установлен, вы можете продолжить.
Установить узел и сторож
Давайте теперь установим Node и Watchman, выполнив следующие команды в терминале:
brew install node
Дождитесь завершения установки пакета узла, а затем выполните следующую команду для установки Watchman:
brew install watchman
Установить Xcode
Если у вас в настоящее время установлен Xcode на вашем Mac, вы должны убедиться, что версия Xcode 10 или выше. Если Xcode в данный момент не установлен, вы можете легко установить его из Mac App Store.
После завершения установки Xcode вам также потребуется установить инструмент командной строки.
Установите инструмент командной строки Xcode
Чтобы установить инструмент командной строки, вам необходимо выполнить следующие шаги:
- Откройте Xcode
- Выберите «Настройки…» в меню Xcode.
- Перейти на панель «Местоположения»
- Установите инструменты, выбрав самую последнюю версию в раскрывающемся списке Инструменты командной строки.
Установить CocoaPods
CocoaPods построен на Ruby, и его можно будет установить с Ruby по умолчанию, доступным в macOS. Хотя вы можете использовать диспетчер версий Ruby, команда React Native рекомендует использовать стандартный Ruby, доступный в macOS, если вы не знаете, что делаете.
Введите следующую команду в своем терминале и нажмите Enter:
sudo gem install cocoapods
Установите интерфейс командной строки React Native
React Native имеет встроенный интерфейс командной строки. Вместо того, чтобы глобально устанавливать и управлять определенной версией CLI, React Native рекомендует получать доступ к текущей версии во время выполнения с помощью npx, который поставляется с Node.js.
При использовании команды npx react-native ‹command› текущая стабильная версия интерфейса командной строки будет загружена и выполнена во время выполнения команды.
2. Создайте новое приложение React Native.
После установки всех необходимых зависимостей начинается самое интересное. Давайте создадим новое приложение React Native под названием «ZeroesAndOnes», используя интерфейс командной строки React Native, введя следующую команду в терминале Mac:
npx react-native init ZeroesAndOnes
Это может занять несколько минут, поэтому наберитесь терпения.
После завершения установки вы готовы запустить приложение.
3. Запустите приложение React Native
Существует несколько способов запустить приложение React Native:
- Вы можете позволить Metro Bundler работать в собственном терминале.
- Или вы можете запустить его из Xcode
1. Запустите его с помощью Metro Bundler
Один из способов — позволить Metro Bundler работать в собственном терминале. Для этого вам нужно будет открыть новый терминал в папке проекта React Native и выполнить следующее (убедитесь, что при открытии терминала вы переходите в папку проекта):
npx react-native run-ios
После того, как вы наберете команду и запустите ее в терминале, начнется сборка приложения и запустится новый терминал (Metro Server).
Как только сервер Metro будет запущен, вы увидите, что ваше новое приложение работает в симуляторе iOS. Симулятор запустится сам.
Как видите, теперь вы запускаете свое приложение React Native на симуляторе iOS. И, как отмечено в «Шаге 1» внутри приложения в симуляторе, как только вы внесете изменения в App.js или любой другой код, изменения автоматически отразятся в приложении, и приложение обновится само по себе благодаря Watchman.
Далее в этой статье я покажу вам, как открыть код React Native, чтобы внести изменения в приложение.
2. Запустите React Native из Xcode
Второй способ запуска приложения React Native — из Xcode (это мой любимый способ).
Чтобы запустить его из Xcode, перейдите в папку проекта и найдите папку ios. Это папка, к которой относится любая конфигурация файлов, связанных с iOS, и т. д. Внутри папки ios найдите тип файла .xcworkspace(в этом примере файл называется ZeroesAndOnes.xcworkspace) и дважды щелкните его, чтобы открыть решение в Xcode.
Когда решение открыто в Xcode, найдите кнопку воспроизведения в верхнем левом углу внутри Xcode IDE и нажмите на нее. Вы также можете изменить iPhone, на который хотите настроить таргетинг, из списка симуляторов, расположенного справа от кнопки «Стоп».
В этом примере я ориентируюсь на «iPhone 12 Pro Max».
Как только вы нажмете кнопку воспроизведения (запуска), Xcode скомпилирует код, и Metro Server будет автоматически запущен. Симулятор iOS также будет запущен, и приложение начнет работать.
4. Как внести изменения в код React Native
Итак, теперь, когда у нас есть приложение React Native, работающее на симуляторе iOS, я покажу вам, как вы можете изменить код React Native и увидеть, как изменения отразятся внутри приложения.
Чтобы иметь возможность внести изменения в код RN, вам понадобится IDE, которая значительно облегчит вам работу при кодировании. Я настоятельно рекомендую использовать визуальный код.
Visual Studio Code (Ссылка) — Visual Studio Code — это интегрированная среда разработки, созданная Microsoft для Windows, Linux и macOS.
После загрузки нам нужно будет открыть приложение RN в среде IDE. Запустите VScode и перейдите в корневую папку приложения RN.
После открытия вы увидите что-то похожее на снимок экрана, показанный ниже. На рисунке ниже левая панель содержит структуры проекта.
Папка Android содержит весь код, конфигурацию и т. д., необходимые для приложения Android. Точно так же папка iOS содержит информацию и код, относящиеся к приложению iOS. node_modules содержит все пакеты и библиотеки, необходимые для запуска React Native, а также любой новый/будущий пакет, который вы загрузите для своего приложения.
Сейчас нас интересует файл App.js. Этот файл в настоящее время содержит весь код, который вы видите в симуляторе iOS. Любые изменения, внесенные вами в этот файл, автоматически отразятся в приложении.
Давайте посмотрим на снимок экрана ниже. давайте изменим заголовок в представлении. Я собираюсь изменить текст с «Шаг первый» на «Ноль и единицы, шаг первый».
В VScode откройте файл App.js и найдите следующий раздел:
Измените атрибут title на следующий текст «Zeroes&Ones Step One» и сохраните файл. Как только вы сохраните файл, сторож подхватит изменения и автоматически обновит приложение.
Если вы сейчас посмотрите на симулятор iOS, вы заметите, что изменение заголовка раздела было изменено.
5. Заключение
Поздравляем! Вы успешно запустили и изменили свое первое приложение React Native. Отсюда возможности безграничны, и интересно посмотреть, что вы сможете построить дальше.
