Разработка приложений для Android и iOS с использованием React Native с Expo

ЭКСПО! Чем Expo отличается от React Native? Стоит ли начинать свой проект с Expo? Многие вопросы возникают у новичков, когда они хотят начать свой путь в разработке приложений.

Но вам повезло, вы попали в нужное место. Я постараюсь объяснить все просто.

Согласно официальной документации React Native, он используется для:

 «Создавайте собственные мобильные приложения с помощью JavaScript и React».

Позвольте мне сломать это для вас

React Native - это фреймворк, который помогает нам создавать приложения (как для Android, так и для iOS) с использованием единой базы кода javascript. Это позволяет ускорить разработку, поскольку разработчику достаточно знать JavaScript для разработки обоих приложений (iOS и Android).

Учись один раз, пиши везде

Этот фреймворк использует библиотеку React.js - одно из самых обсуждаемых слов на сегодняшнем рынке. Теперь может возникнуть вопрос - в чем разница между React и React Native? Ответ заключается в том, что React Native использует собственные компоненты с JSX - расширение javascript, которое выглядит как HTML, тогда как response использует веб-компоненты.

Компоненты React Native, такие как представление и текст, ведут себя как веб-компоненты div и span. Стиль в React Native дает ощущение CSS. Единственная разница в том, что в React Native имена полей записываются в CamelCase (скажем, font-size), а не в пунктирном стиле (скажем, font-size). Это дает ощущение написания веб-приложений.

Ждать! Может возникнуть еще один вопрос об изучении React.js до React Native. Я бы сказал .. нет! Можно начинать. Я начал свое путешествие по React Native, не зная React.js, но да, необходимо иметь некоторые базовые знания о компонентах React, таких как JSX, компоненты, состояние и свойства.

Надеюсь, у вас есть фотографии React Native. Теперь давайте исследуем рынок, кто использует React Native. Есть много популярных приложений, созданных с использованием React Native, таких как Facebook, Uber, Skype, Instagram… и, возможно, однажды ваше приложение попадет в этот список!

А теперь давайте узнаем, что такое Expo? Чем он отличается от React Native?

Согласно официальной документации Expo,

 «Expo позволяет создавать собственные приложения для iOS и Android, написав JavaScript».

Если вы посмотрите на определение React native, оба определения выглядят одинаково. Expo делает то же, что и React-Native. Оба они позволяют нам создавать собственные приложения (iOS и Android) с использованием javascript, но есть разница. Вы можете подумать, что Expo помогает нам быстрее разрабатывать приложения React-Native.

Приложения Expo на самом деле являются приложениями React-Native. Единственное отличие состоит в том, что Expo поставляется со своим SDK (Expo SDK), который предоставляет нам такие услуги, как push-уведомления, вход в Facebook и Google, всего в нескольких строках кода. Это позволяет нам начать наш проект за минуту. Для начала нам не нужен Xcode (для iOS) и студия Android (для Android). Так что начать проще.

Теперь вы можете задаться вопросом, какого черта я начал свое путешествие с React Native. Я буду использовать Expo. Но есть цитата Брома

 «У всего есть своя цена».

Экспо хорошее начало, но у него есть недостатки. Давайте перечислим преимущества и недостатки Expo.

Преимущества:

1. Настройка проекта настолько проста и может быть выполнена за считанные минуты.
2. Поделиться приложением очень просто (используя QR-код и ссылку). Вы можете опубликовать свое приложение с помощью команды expo publish и поделиться этой ссылкой. Нет необходимости создавать .apk (для Android) и .ipa (для iOS).
3. Expo может очень легко создавать как .apk, так и .ipa.
4. Он предоставляет такие услуги, как Facebook, вход в Google, push-уведомления, которые вы можете легко интегрировать в свое приложение, не прилагая особых усилий.

Недостатки:

1. Самый большой недостаток, с которым я столкнулся, - это размер apk или ipa. Да, размер базового приложения hello world составляет от 20 до 25 МБ. Причина - интегрированные библиотеки.
2. Вы не можете использовать собственные модули, написанные на Java / Objective-C.

Это оно! Это все о React Native с Expo.

Ждать! мы знаем, что такое Expo. Каково его отношение к React Native, но как настроить проект с помощью Expo, с чего начать? Вот ответы на ваши вопросы.

Начнем с настройки вашего первого проекта React Native с Expo.

Предполагая, что вы установили NodeJS (если нет, перейдите по этой ссылке). Теперь установите утилиту командной строки expo-cli с помощью npm:

 npm install -g expo-cli

Это установит expo-cli на ваш компьютер. Прежде чем двигаться дальше, я хотел бы рассказать вам о двух основных его частях:

Первая часть - экспо-кли. Это инструмент, который помогает нам в процессе разработки, например, при настройке нашего проекта, создании APK или IPA и т. Д. Вторая часть - это клиентское приложение Expo, которое мы должны установить на наш телефон Android или iOS для сканирования QR-кода ( который вы можете получить с помощью команды expo start), который откроет проект на нашем телефоне Android или iOS. Смущенный!

Если не получишь. Ничего страшного, я объясню шаг за шагом.

После установки expo-cli давайте создадим ваш проект, используя:

 expo init myApp

Он спросит о выборе шаблона. Пройдите с пустым, нажав клавишу ВВОД. Вы также можете изучить второй вариант с примерами. Прямо сейчас оставьте поле пустым, а затем выполните две команды ниже, чтобы запустить свой проект.

cd myApp 
начало выставки

Это сгенерирует QR-код.

Сгенерированный QR-код

Следующим шагом будет установка клиентского приложения Expo. Клиентское приложение Expo можно установить с помощью магазина приложений (для Android) и магазина приложений (для iOS) на свой телефон.

Теперь пришло время запустить ваше первое приложение React Native с помощью Expo. Вы можете увидеть свое первое приложение, отсканировав QR-код (который был сгенерирован в вашем терминале) с помощью клиентского приложения Expo (которое вы установили на свой телефон Android или iOS). В Android, как только вы сканируете, он скомпилирует / объединит ваш проект для запуска на вашем устройстве.

Идет комплектация проекта. Приложение запустится на вашем устройстве после завершения процесса сборки.

Ждать! Вы можете думать так же, как вы можете запускать на своем устройстве iOS, что в чем-то правильно, но сканирование QR-кода выполняется с помощью камеры. (Функция QR Scan была удалена в Expo для iOS). Просто откройте камеру, и как только вы отсканируете, придет уведомление -> откройте свое приложение в Expo. Щелкните по нему, и оно начнет компилировать / объединять ваше приложение для запуска на вашем устройстве iOS.

Нажмите на уведомление, начнется процесс объединения.

Ура! вы успешно запустили свое первое приложение с помощью Expo.

Разве это не простой процесс. Вы можете изменить свой код app.js и увидеть автоматическую перезагрузку приложения после сохранения изменений.

Спасибо за прочтение!