Создание веб-приложений - это то, на чем выросло целое поколение разработчиков. Однако создание приложений для телефонов на Android и iOS обычно требует знания Swift или Kotlin, которые могут быть не вашим первым языком программирования.
Работа всего вашего кода на всех устройствах в одном репозитории - мечта тех, кто в первую очередь создает Интернет. К счастью, мы можем добиться этого с помощью Apache Cordova. В этой статье мы рассмотрим, как превратить проект React в нативное приложение для iOS или Android. Давайте начнем.
Примечание. Это руководство основано на react-create-app
. Если вы не использовали это раньше, вы можете создать новое приложение с помощью следующей команды. Это создаст стандартную файловую структуру React:
Шаг 1. Кордова
Cordova позволяет нам превращать веб-сайты HTML, CSS и Javascript в собственные приложения для iOS. Для начала установим его в командной строке. Здесь важен -g
, поэтому мы можем использовать cordova в командной строке:
Далее нам нужно создать папку Cordova. Откройте свой проект реакции и в базовом каталоге выполните следующую команду:
Эта простая строка создает новый проект под названием «cordova» в структуре папок React. Вы можете сделать cordova create myApp
, чтобы создать папку myApp, но мне легче пометить эту папку cordova в уже существующих проектах.
Шаг 2. Обновите свой Package.json.
В корневом каталоге React у вас будет package.json
файл. Нам нужно добавить к этому одну строку - "homepage" : "./"
. Это необходимо добавить, чтобы все файлы Cordova, которые мы создадим в будущем, имели правильные пути:
Шаг 3. Переместите ваш скрипт Cordova
Затем перейдите в папку cordova и найдите файл index.js, который будет создан в ./cordova/www/js/index.js
. Скопируйте этот скрипт и поместите его в папку React ./public
, как показано ниже:
Обновите файл index.html в ./public
, чтобы включить этот новый файл после вашего root
div:
Шаг 4. Обновите ваш index.jsx
Затем нам нужно обновить наш файл index.jsx в нашей папке React ./src
, чтобы он распознавал кордову, если кордова доступна. Для этого обновите его, чтобы он выглядел так:
Приведенный выше код запустит обычное приложение для реагирования, если вы обращаетесь к нему через Интернет, или он запустит событие cordova deviceready
, которое мы находимся на iOS или Android.
Если вы работаете на машинописном тексте, вам нужно будет добавить объект cordova к объекту окна. Вы можете сделать это, добавив следующее в верх index.tsx
файла под операторами импорта:
Шаг 5. Добавьте команду сборки в свой package.json.
Затем добавьте команду сборки в свой package.json. Когда мы строим, мы хотим делать две вещи:
- Создайте обычную сборку React для использования в Интернете
- Скопируйте эту сборку в
./cordova/www
, чтобы она стала доступна для iOS и Android.
Обновите свои package.json
скрипты, чтобы они выглядели как приведенный ниже код. Обратите внимание, как мы обновили строку сборки:
Затем запустите вашу сборку:
Если все пойдет по плану, в вашей cordova/www
папке будет сборка. Теперь, когда мы это сделали, перейдите в папку cordova с помощью cd cordova в командной строке:
Теперь мы можем добавить наше устройство с помощью командной строки Cordova. Я буду добавлять iOS. Вы можете сделать это, набрав следующее:
Наконец, нам нужно создать приложение для iOS. Для этого выполните в папке cordova следующую команду:
Примечание: для работы с этим битом вам необходимо установить XCode, поэтому убедитесь, что он у вас установлен и хотя бы один раз открывал его раньше. На Android у вас могут быть похожие ограничения.
Шаг 6: загрузите его в XCode
Затем откройте папку ./cordova/platforms/ios
в XCode. Когда вы это сделаете, вы можете эмулировать свое новое устройство, и у вас должно быть полностью функционирующее приложение iOS, основанное на вашем коде React:
Обслуживание "#"
Чтобы поддерживать последнюю версию вашего кода при добавлении новых функций, просто запустите npm run build
, чтобы собрать код React, который автоматически создаст версию в cordova.
Затем введите cd cordova
, чтобы перейти в каталог cordova, и cordova build ios
, чтобы создать последнюю сборку для XCode. Вы также можете создать свой собственный сценарий сборки Cordova или объединить все в npm run build
.
Заключение
Мы рассмотрели iOS, но вы можете сделать то же самое для Android с cordova platform add android
и cordova build android
.
После всего этого нужно просто обновить значок и название вашего приложения. Мы надеемся, что вам понравилась эта статья - см. Ниже некоторые ссылки, которые могут оказаться полезными:
Больше контента на plainenglish.io