Создание веб-приложений - это то, на чем выросло целое поколение разработчиков. Однако создание приложений для телефонов на 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