Для лучшего понимания концепций React Native я позаимствую несколько строк из официальной документации —
React Native позволяет создавать мобильные приложения, используя только JavaScript. Он использует тот же дизайн, что и React, что позволяет создавать богатый мобильный пользовательский интерфейс из декларативных компонентов. С React Native вы не создаете мобильное веб-приложение, приложение HTML5 или гибридное приложение; вы создаете настоящее мобильное приложение, которое неотличимо от приложения, созданного с использованием Objective-C или Java. React Native использует те же основные строительные блоки пользовательского интерфейса, что и обычные приложения для iOS и Android. Вы просто соединяете эти строительные блоки, используя JavaScript и React.
В этом руководстве я объясню, как создать ваше первое приложение, отвечающее требованиям, и как развернуть ваше приложение на устройстве iOS.
Настройка среды
- Сначала вам нужно установить менеджер пакетов HomeBrew на вашу OS X, чтобы установить собственные зависимости React на вашем компьютере.
- После этого вам необходимо установить 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-нативного проекта
- Теперь вы можете использовать инструменты командной строки 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
- Теперь перейдите в каталог проекта, введя следующую команду:
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».
Будьте в курсе предстоящих технических сообщений!