Jump Start реагирует на родных с EXPO

Реагировать на родной это платформа, которая позволяет создавать собственные мобильные приложения, используя JavaScript. Как подразумевает имя, он использует Реагировать Настолько сочинение мобильных интерфейсов аналогично использованию реагирования на Интернет. Вместо того, чтобы создавать компоненты с помощью HTML-тегов, он имеет свой собственный набор компонентов, которые связываются с собственными компонентами пользовательского интерфейса.

React Naious можно сложно настроить, особенно когда речь идет о push-уведомлениях. Вам необходимо настроить сертификаты и погружение в Objective-C для iOS и Java для Android. Тем не мение, Экспо Устраняет необходимость этого.

Строить сайт, а не приложение? Вы можете использовать приличный Строитель сайта Отказ И поддерживать сайт, получите свой веб хостинг на месте.

• 30 инструментов веб-дизайна для ускорения вашего рабочего процесса

EXPO означает, что вы можете создавать реагирование нативных приложений и развернуть их в магазины приложений, используя только JS. Кроме того, он предлагает SDK с доступом к собственной функциональности, такими как уведомления, камера, контакты, местоположение и так далее. Он также обеспечивает доступ к некоторым компонентам пользовательских интерфейсов, которые не включены в оригинальное ядро ​​реагирования, но часто используются, такие как значки, размытые виды и так далее, не требуя записи линии нативного кода.

Экспо также может создать приложение для подготовки к отправке, не требуя создания с помощью Xcode или Android-студии. Если вы не использовали раньше, они могут быть страшным местом, особенно если вы просто начинаете с реактивными нажимами - или не уверен в целом с Как сделать приложение Отказ Приложения (или проекты) также могут быть опубликованы в EXPO, а не отправлять в App Store, который позволяет пользователям попробовать проект через мобильный клиент EXPO. Не волнуйтесь, это будет покрыто позже!

Вы строите свое приложение с командой? Сохраните ваши файлы в доступных, надежных облачное хранилище Отказ

01. Настройка экспо

Установка EXPO - это простой процесс. Переходить к сайт И загрузите последний XDE, затем установите мобильное приложение на свой телефон или планшет. Мобильный клиент позволяет запустить приложения на реальном устройстве через приложение, не требуя никаких лицензий разработчиков или настроек сертификата.

Затем вы можете опубликовать приложения к службе EXPO, чтобы пользователи могли запускать ваши готовые проекты через мобильный клиент EXPO, без необходимости проходить через процессы App Store и Google Play.

EXPO делает поддержку встроенным встроенным приложениям, которые могут вручную публиковать в App Store или Play Store, однако вам потребуется разработчика для выпускаемых вами платформ. Программа разработчика Apple стоит 79 фунтов стерлингов в год и Google Play Console стоит разовая плата в размере 25 долларов США.

02. Создайте свое первое приложение

Давайте добраться до бизнеса и создайте наше первое приложение с EXPO. Откройте EXPO XDE, выберите Project & GT; Новый проект и выберите пустой шаблон. Установите все зависимости и начните реагировать нативный пакет, который связывается со всеми активами.

Отсюда вы можете опубликовать приложение, поделиться приложением к мобильному клиенту EXPO или запустить приложение на симуляторе. Это приложение собирается включать создание Push-уведомлений, поэтому вы собираетесь поделиться на мобильный клиент EXPO, так как симуляторы не поддерживают их. Нажмите кнопку «Соблюдение», чтобы получить QR-код, чтобы сканировать или возможность отправить ссылку через SMS или адрес электронной почты. Сканируйте QR-код с клиентом EXPO. Это запускает приложение через клиент EXPO, и он открывается на экран с: «Откройте App.js, чтобы начать работать в вашем приложении!»

С помощью приложения запустите проект в вашем любимом редакторе кода и откройте App.js. Найдите текст выше и измените его в классический «Hello World!», Затем сохраните. Вы должны увидеть приложение перезагрузить автоматически и иметь текст «Hello World!» Теперь виден. Магия!

Хотя вы разрабатываете, встряхивая устройство раскроет меню разработчика, которое имеет полезные варианты отладки. Из этого меню вы также можете вернуться к дому EXPO - полезно выйти из приложения или переключиться на другой.

03. Добавить уведомления

Теперь у вас есть базовое приложение, настроенное и запуску, давайте добавим возможность отправлять и получать уведомления. Обычно это потребует объектов-C и Java, интегрируя стороннюю службу для отправки уведомлений, и вам также нужно будет настроить сертификаты для iOS и создавать ключи для Android.

Во-первых, вам необходимо импортировать разрешения и уведомления из EXPO и создать новую функцию в классе App:

 Импорт {разрешения, уведомления} из «EXPO»;
Экспорт приложения Class Class продлевает racte.component {
  async registerforpushnotifications () {
  }
} 

Здесь вы используете ключевое слово Async, чтобы использовать функцию as2017 Async / a a enaiq - React Nature имеет Babel, работающий под капотом, поэтому вы можете использовать все новые JavaScript Good. Теперь давайте попросим разрешения на уведомление и извлеките токен EXPO Push - для идентификации устройства - так что выxpo знает, где отправлять Push-уведомления:

 async registerforpushnotifications () {
  Результат const = await permissions.askasync (permissions.remote_notifications);
  если (результат .Status! == «предоставлено») {
    возвращаться;
  }
  Const Token = awaque уведомления .getexpopushtokenasync ();
  console.log (токен);
} 

Здесь вы попросите разрешение уведомления с помощью метода Permissions.Skasync (). Предупреждение будет отображаться только на iOS, так как Android позволяет уведомлять по умолчанию. Несмотря на это, вам действительно нужно пройти через одну и ту же логику на Android, так как можно отключить уведомления.

Далее проверьте ответ. Если уведомления не предоставлены, то вы можете остановиться и вернуть из функции. Если уведомления предоставляются уведомления, вы получаете тонк-токен из службы EXPO. Наконец, вы можете зарегистрировать токен для последующего использования для тестирования уведомлений, и это будет зарегистрировано в XDE EXPO.

Стоит отметить на данный момент, что - на iOS - это предупреждение может быть вызвано только один раз по дизайну; Таким образом, если пользователь отрицает разрешение, вы можете рассмотреть возможность добавления пользовательского уведомления или предупреждения перед возвратом из функции. Чтобы включить уведомления на данный момент, пользователю нужно будет перейти в настройки приложения (в нашем случае, это будет экспо) и GT; Уведомления и позволяйте им оттуда. Из-за этого вам нужно будет удалить мобильный клиент EXPO, а затем переустановить, если хотите проверить оповещение разрешения на iOS более одного раза.

Кроме того, EXPO обеспечивает метод под названием Permissions.getAsync (), и это работает аналогично разрешениям. Настраин (), просто не выходя о предупреждении IOS. Это может быть полезно, если вы хотите проверить статус первым, чтобы создать пользовательский поток, который будет задать вам разрешения, например. Если предупреждение IOS ранее сработало (помните, оно может быть уволено только один раз в приложении), разрешения. Настраин () вернут ту же информацию, что и permissions.getAsync (), поэтому в нашем использовании мы не нужны использовать разрешения. GTETASYNC ().

Затем вам нужно позвонить в эту функцию в методе жизненного цикла ComponentDidmount, чтобы он запускал приложение.

 ComponentDidMount () {
  Это. РегистрацияФорушноцитификация ();
} 

Далее, если вы принимаете разрешение уведомления, ваше приложение сможет принимать локальные и удаленные уведомления. Затем локальные уведомления устанавливаются и отправляются через устройство непосредственно в приложение и не требуют подключения к Интернету. Удаленные уведомления поступают с сервера и отправляют уведомление через систему Apple Push-уведомлений (APN) или услуги Google Cloud Messaging (GCM). Этот процесс также потребует доступа к подключению к Интернету для их получения.

EXPO имеет услугу для отправки уведомлений в HTTPS://exp.host/--/api/v2/push/send; Все, что вам нужно сделать, это отправить ему некоторые данные. Затем это будет выглядеть немного похоже на следующее:

 {
  // толкательный токен.
  ":": & Lt; токен из приложения & gt;
  // Название уведомления.
  «Название»: «Название уведомления»,
  // тело уведомления.
  «Тело»: «Тело уведомления»,
  // Передайте данные в качестве объекта, это можно использовать при обращении с уведомлением.
  «Данные»: {«Значение»: «Здравствуйте, мир!» }
} 

Перед тем, как мы проверим уведомление, мы настроим наше приложение для обработки уведомлений, если приложение открыто. По дизайну, iOS и Android не показывают уведомление, когда приложение открыто. Вы также можете обрабатывать любые данные, отправленные в толкающем сообщение здесь, если нам нужно действовать на нем. Давайте создадим новую функцию для обработки этого и предупреждающего свойство «Значение данных»:

 Handlenotification (Уведомление) {
  оповещение (уведомление.data.value);
} 

Затем в нашем методе жизненного цикла ComponentDidmount вам необходимо настроить слушателя, который вызывает обработчик уведомлений, который мы только что создали:

 ComponentDidMount () {
  Это. РегистрацияФорушноцитификация ();
  Уведомления .addlistener (это. Handleenotification);
} 

Теперь вы сейчас установлены. Давайте отправим Push-уведомление с запросом скручиваемости:

 Curl \
  -X сообщение \
  -H «Тип контента: приложение / JSON» \
  -d '{
    ":": "" TOKEN & GT; ",
    «Название»: «Название уведомления»,
    «Тело»: «Тело уведомления»,
    «Данные»: {«Значение»: «Здравствуйте, мир!» }
  } '\
  https://exp.host/--/api/v2/push/send

Вы можете схватить эту команду curl здесь Отказ Если вы не знакомы с CURL, вы можете отправить запрос, используя что-то вроде Почтальон , который использует графический интерфейс для отправки запросов.

После того, как запрос отправлен, вы теперь должны увидеть уведомление. Нет ограничений на использование EXPO Push-сервиса. В реальном мире рекомендуется использовать пакетную API, отправив массив Push-уведомлений, в партиях 100, которые будут отправлены для эффективности:

 [
  {// Объект уведомления, как указано выше},
  {// другой объект уведомлений}
] 

04. Опубликовать с EXPO

Итак, теперь, когда у нас есть блестящее новое нативное приложение raction (даже если это еще не значит!), Как мы позволяем другим использовать его, не запутая его из EXPO XDE? Самый простой способ, нажав на публикацию из XDE. Это опубликует проект в EXPO, а ссылка появится в вашем профиле, что вы можете найти по адресу https://expo.io/@< ;username>.

Когда вы посещаете опубликованную ссылку проекта, будет QR-код для сканирования (расположен среди тех же параметров, что и XDE) с мобильным клиентом EXPO, как во время разработки. Если мы хотим обновить приложение, все, что нам нужно сделать, это резак, и изменения будут доступны пользователю при запуске приложения.

Эта статья была первоначально опубликована в выпуске 297 чистых, самых продаваемых в мире журнала для веб-дизайнеров и разработчиков. Подписаться на Net здесь Отказ

Хотите узнать больше способов осваивать реагирование?

Если вы заинтересованы в обучении больше о реагировании, убедитесь, что вы подняли свой билет на Генерировать Лондон с 19 по 21 сентября 2018 года Отказ На основании Академии Рейктовы преподавали реагировать по всему миру и запустили sizzy.co. и ok-google.io. Кристиян Ристовский будет доставлять свою семинар - научиться думать в реагировании - в котором он будет изучать лучшие практики реагирования и научить вас решениям реальных проблем, которые вы могли бы столкнуться в процессе построения приложения.

Generate London проходит с 19 по 21 сентября 2018 года. Получить свой билет сейчас Отказ

Статьи по Теме:

• Возьми голову вокруг реагирования с этими пятью факторами
• 10 Советы экспертов Experties, которые вам нужно знать сегодня
• Построить родное мобильное приложение с реактивным