Початок стрибка реагувати рідний з expo

Реагувати рідним це платформа, яка дозволяє створювати рідними мобільними додатками за допомогою JavaScript. Як випливає з назви, він використовує Реагувати Таким чином, складні мобільні інтерфейси схожі на використання реагування в Інтернеті. Замість того, щоб створювати компоненти, що використовують HTML-теги, він має свій власний набір компонентів, які зв'язуються з нативними компонентами інтерфейсу.

React Rating може бути складним для налаштування, особливо коли мова йде про поштовх. Вам потрібно налаштувати сертифікати та зануритися в об'єкт-C для iOS та Java для Android. Однак, Експо усуває необхідність цього.

Створення веб-сайту, а не додаток? Ви можете використовувати гідний Веб-будівельник . І підтримувати сайт, отримати веб хостинг пляма на.

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

Expo означає, що ви можете створювати React Native Apps та розгорнути їх до магазинів додатків, використовуючи лише JS. Крім того, він пропонує SDK з доступом до внутрішніх функціональних можливостей, таких як сповіщення, камери, контакти, місце розташування тощо. Він також забезпечує доступ до деяких компонентів інтерфейсу, які не включені до React Native Core, але часто використовуються, такі як іконки, розмиті погляди тощо, не потребуючи написання рядка власного коду.

Expo також може створювати подання додатків, що готується, не потребуючи будівництва за допомогою XCode або Android Studio. Якщо ви раніше не використовувались, вони можуть бути страшним місцем, особливо якщо ви просто починаєте з React Rating - або не впевнено в цілому Як зробити додаток . Програми (або проекти) також можуть бути опубліковані для Expo, а не подання до App Store, який дозволяє користувачам спробувати проект через мобільний клієнт Expo. Не хвилюйтеся, це буде покрито пізніше!

Ви створюєте свою програму з командою? Збережіть файли у доступному, надійному хмара зберігання .

01. Налаштування Expo

Встановлення Expo - це простий процес. Голова до сайт і завантажте останнє XDE, а потім встановіть мобільний додаток на свій телефон або планшет. Мобільний клієнт дозволяє запускати програми на реальному пристрої за допомогою додатка, не потребуючи будь-яких ліцензій розробників або налаштування сертифікату.

Потім ви можете опублікувати додатки на службу Expo, щоб користувачі могли запустити готові проекти за допомогою мобільного клієнта Expo, не потребуючи перебування в програму App Store та процеси перегляду Google Play.

Expo робить підтримку будівлі автономних додатків, які можуть бути опубліковані в магазині App або Play Store, однак ви потребуєте розробників рахунків для платформ, які ви випускаєте. Програма розробника Apple коштує 79 фунтів стерлінгів на рік і Консоль відтворення Google коштує одноразову плату за 25 доларів США.

02. Створіть першу програму

Давайте дістанемося до бізнесу та створюємо наше перше додаток з Expo. Відкрийте Expo XDE, виберіть Проект & GT; Новий проект і виберіть порожній шаблон. Встановіть всі залежності та запустіть React Native Packager, який пускає всі активи.

Звідси ви можете опублікувати додаток, поділитися додатком для мобільного клієнта Expo або запустити додаток на симулятор. Ця програма збирається залучити створення поштових повідомлень, тому ви збираєтеся поділитися на мобільний клієнт Expo, оскільки симулятори не підтримують їх. Натисніть кнопку Share, щоб отримати QR-код для сканування або параметр, щоб надіслати посилання через SMS або електронну пошту. Скануйте QR-код за допомогою клієнта Expo. Це запускає додаток через клієнт Expo, і він відкриває до екрана з: "Відкрити app.js, щоб почати працювати над своїм додатком!"

За допомогою програми, що працює, відкрийте проект у своєму улюбленому редакторі коду та відкрийте додаток.js. Знайдіть текст вище та змініть його до класичного "Hello World!", Потім зберегти. Ви повинні переглянути автоматичне перезавантаження програми та мати текст "Hello World!" Тепер видно. Магія!

Поки ви розробляєте, струшувальний пристрій відкриє меню розробника, що має корисні варіанти налагодження. З цього меню ви також можете повернутися до дому Expo - корисно вийти з програми або перейти до іншого.

03. Додати сповіщення

Тепер у вас є основна програма, налаштування та запущена, давайте додати можливість надсилати та отримувати сповіщення. Це, як правило, вимагає об'єктивного та Java, інтегруючи третій-партійну службу для надсилання сповіщень, і вам також потрібно створити сертифікати для iOS та створювати ключі для Android.

По-перше, вам потрібно імпортувати дозволи та сповіщення від Expo та створити нову функцію в класі програми:

 імпорту {дозволів, сповіщення} від "expo";
Експортна програма за замовчуванням розширюється read.component {
  async registerforpustinotifications () {
  }
} 

Тут ви використовуєте ключове слово Async, щоб скористатися функцією ES2017 Async / Await - React Rating має Вавилон, який працює під капотом, щоб ви могли використовувати весь новий JavaScript доброту. Тепер, давайте попросити дозволів сповіщень та вилучення The Expo Push Token - для ідентифікації пристрою - так що Expo знає, де відправити поштові повідомлення:

 async registerfupustnotifications () {
  CONST RESTURT = AWAIT ДОСЛІДЖЕННЯ.СЬКИЙСИНГ (Дослідження.
  якщо (результат.Status! == "Надано") {
    повернення;
  }
  const token = чекає сповіщень .getexpopusttoknasync ();
  console.log (маркер);
} 

Тут ви попросите дозвіл на повідомлення, використовуючи метод дозволів.askasync (). Попередження покаже лише на iOS, оскільки Android дозволяє за замовчуванням. Незважаючи на це, вам насправді потрібно працювати через ту ж логіку на Android, оскільки можна вимкнути сповіщення.

Далі перевірте відповідь. Якщо сповіщення не надаються, ви можете зупинитися та повернути функцію. Якщо видається сповіщення, ви отримуєте маркер поштовху від послуги Expo. Нарешті, ви можете зареєструвати маркер для подальшого використання для перевірки сповіщень, і це буде зареєстровано до Expo XDE.

Варто відзначити, що на цьому етапі - на iOS - це попередження може бути спрацьовуючи лише один раз за дизайном; Отже, якщо користувач заперечує дозвіл, ви можете розглянути питання про додавання спеціального повідомлення або попередження, перш ніж повернути функцію. Для того, щоб увімкнути сповіщення на цьому етапі, користувачеві доведеться перейти до параметрів додатків (у нашому випадку, це буде експортом) & GT; Сповіщення та enable їх звідти. Через це вам потрібно буде видалити Expo Mobile Client, а потім перевстановити, якщо ви хочете перевірити попередження про дозвіл на iOS більше одного разу.

Крім того, Expo надає метод, який називається дозволами.getasync (), і це працює аналогічним чином до дозволів. SAKSYNC (), просто не вистрілюючи сповіщення IOS. Це може бути корисним, якщо ви хочете спочатку перевірити статус, щоб створити індивідуальний потік, який попросить вас для дозволів, наприклад. Якщо попередження IOS раніше було запущено (пам'ятайте, він може бути звільнений лише один раз на додаток встановити), дозволи.askasync () поверне таку ж інформацію, як дозволи .getasync (), тому у нашому випадку ми не потребуємо Використовувати дозволи.getasync ().

Потім вам потрібно назвати цю функцію в методі LifeCycy ComponsumDiDMount, щоб він працював у запуску додатків:

 КомпонентDiDMount () {
  це. Регістрформувань ();
} 

Далі, якщо ви приймаєте дозвіл на повідомлення, ваша програма зможе отримати локальні та віддалені сповіщення. Тоді місцеві сповіщення встановлюються та надсилаються за допомогою пристрою безпосередньо до програми, і не вимагають підключення до Інтернету. Віддалені сповіщення надходять з сервера та надсилайте повідомлення через систему сповіщень Apple Push (APNS) або службами Google Cloud Messaging (GCM). Цей процес також вимагатиме доступу до підключення до Інтернету, щоб отримати їх.

Expo має сервіс для надсилання сповіщень на https://exp.host/--/api/v2/push/send; Все, що вам потрібно зробити, це відправити деякі дані до нього. Тоді це буде трохи схожим на наступне:

  // Токен.
  "До": & lt; token з програми & gt;
  // Назва сповіщення.
  "Назва": "Назва сповіщення",
  // орган сповіщення.
  "Тіло": "Повідомлення органу",
  // Передайте дані як об'єкт, це може бути використане при обробці повідомлення.
  "Дані": {"Значення": "Hello World!" }
} 

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

 Handlenotification (повідомлення) {
  сповіщення (Notification.Data.Value);
} 

Тоді в нашому компоненті, метод LifeCycle LifeCycle, необхідний для налаштування слухача, який викликає обробник сповіщень, який ми просто створили:

 КомпонентDiDMount () {
  це. Регістрформувань ();
  Сповіщення. Адділістенер (це.HandleNotification);
} 

Тепер ви встановлені. Давайте надішлемо повідомлення поштовху за запитом Curl:

 Curl \ t
  -X \ t
  -H "Тип вмісту: Заява / JSON"
  -d '{{{{
    "До": "& lt; token & gt;",
    "Назва": "Назва сповіщення",
    "Тіло": "Повідомлення органу",
    "Дані": {"Значення": "Hello World!" }
  } '\ T
  https://exp.host//api/v2/push/send[ 106]
  

   Ви можете захопити цю команду Curl
   
    тут
   
   . Якщо ви не знайомі з Curl, ви можете надіслати запит за допомогою чогось подібного
   
    Листоноша
   
   , який використовує графічний інтерфейс для надсилання запитів.
  
  

   Після того, як запит надіслав, тепер ви повинні побачити повідомлення пройде. Немає обмежень щодо використання послуг Expo Push. У реальному сценарії, він рекомендується використовувати партійний API, відправивши масив поштових сповіщень, у партіях 100, щоб відправити на ефективність:
  
  
 [
  {// Об'єкт сповіщення, як вище,},
  {// Інший об'єкт сповіщення}
] 
  

   04. Опублікувати з Expo
  
  

   

    

     

      
       
       
       
      
     
    
   
   
  
  

   Отже, тепер, коли у нас є блискуча нова Read Native App (навіть якщо це ще не робить багато!), Як ми дозволяємо іншим використовувати його, не запускаючи його від Expo XDE? Найпростіший спосіб - натиснувши опублікувати з XDE. Це буде опублікувати проект Expo, а посилання з'явиться у вашому профілі, який ви можете знайти за https://expo.io/@< ;ususername>.
  
  

   Коли ви відвідуєте опубліковану посилання проекту, буде сканувати QR-код (розташований серед тих самих варіантів, як XDE) з мобільним клієнтом Expo, так само, як під час розробки. Якщо ми хочемо оновити додаток, все, що нам потрібно зробити, це перевидати, і зміни будуть доступні користувачеві під час запуску програми.
  
  

   
    Ця стаття була опублікована у випуску 297 чистих, найпопулярніших журналів у світі для веб-дизайнерів та розробників.
   
   
    
     Підписатися на мережу тут
    
   
   
    .
   
  
  

   Хочете дізнатись більше способів, якими ви можете перевірити?
  
  
   

    

     

      

       
        
        
        
       
      
     
    
    
   
  
  

   
    Якщо ви зацікавлені в тому, щоб дізнатися більше про реагування, переконайтеся, що ви вибрали свій квиток
   
   
    
     Генерувати Лондон з 19-21 вересня 2018 року
    
   
   
    . Заснував реагування академії, щоб навчити реагувати по всьому світу і запустив
   
   
    
     sizzy.co
    
   
   
    і
   
   
    
     ok-google.io
    
   
   
    , Крістіан Рістовскі буде доставляти свою майстерню - Дізнайтеся, як мислити в реагуванні, в якій він буде вивчати найкращі практики реагування та навчити вас вирішувати реальні проблеми, які ви можете зіткнутися з процесом побудови програми.
   
  
  

   
    Генерувати Лондон відбудеться з 19-21 вересня 2018 року.
   
   
    
     Отримайте квиток зараз
    
   
   
    .
   
  
  

   
    Пов'язані статті:
   
  
  

   

    
     Отримайте голову навколо, реагуючи з цими п'яти чинниками
    
   
   

    
     10 порад експерта Readjs, які вам потрібно знати сьогодні
    
   
   

    
     Побудувати рідне мобільний додаток з React Rating