Jump start React Native with Expo

Давайте займемся бизнесом и создадим наше первое приложение с Expo. Откройте Expo XDE, выберите Project> New Project и выберите пустой шаблон. зависимостей и начать работу с React Native packager, whi ch объединяет все активы.

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

. При запуске приложения откройте проект в своем любимом коде редактор и открыть App.js. Найдите текст выше и измените его на классический «Hello world!», А затем сохраните. Вы должны увидеть, что приложение перезагрузится автоматически и теперь отображается текст «Hello world!». Magic!

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

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

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

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

  import {Разрешения, Уведомления} из 'expo';
export default class App расширяет React.Component {
  async registerForPushNotifications () {
  }
}  

Здесь вы используете ключевое слово async, чтобы использовать функцию async / await ES2017. React Native имеет Babel, работающий под капотом, чтобы вы могли использовать все новые возможности JavaScript. Теперь давайте попросим разрешения на получение уведомлений и извлеките токен Expo push — чтобы идентифицировать устройство — чтобы Expo знала, куда отправлять push-уведомления:

  async registerForPushNotifications () {
  const result = await Permissions.askAsync (Permissions.REMOTE_NOTIFICATIONS);
  if (result.status! == 'given') {
    вернуть;
  }
  const token = await Notifications.getExpoPushTokenAsync ();
  console.log (маркер);
}  

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

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

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

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

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

  componentDidMount () {
  this.registerForPushNotifications ();
}  

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

Expo предоставляет услугу отправки уведомлений по адресу https://exp.host/—/api/v2/push/send; все, что вам нужно сделать, это отправить некоторые данные. Это будет выглядеть примерно так:

  {
  // Толкающий токен.
  "To": 
  // Заголовок уведомления.
  «Title»: «Заголовок уведомления»,
  // Орган уведомления.
  «Тело»: «орган уведомления»,
  // Передавать данные как объект, это можно использовать при обработке уведомления.
  "Data": {"value": "Hello world!"}
}  

Инструмент «Экспо» делает отправку и получение push-уведомлений без усилий

  handleNotification (уведомление) {
  оповещения (notification.data.value);
}  

  componentDidMount () {
  this.registerForPushNotifications ();
  Notifications.addListener (this.handleNotification);
}  

  curl 
  -X POST 
  -H "Content-Type: application / json" 
  -d '{
    «To»: «»,
    «Title»: «Заголовок уведомления»,
    «Тело»: «орган уведомления»,
    "Data": {"value": "Hello world!"}
  } '
  https://exp.host/--/api/v2/push/send

  [
  { // notification object as above },
  { // another notification object }
]