Nhảy bắt đầu phản ứng bản địa với hội chợ

Sep 11, 2025
Cách
[số 8]

Phản ứng bản xứ là một nền tảng cho phép bạn xây dựng các ứng dụng di động bản địa bằng JavaScript. Như tên gọi, nó sử dụng Phản ứng , vì vậy sáng tác giao diện di động tương tự như sử dụng phản ứng trên web. Thay vì tạo các thành phần bằng các thẻ HTML, nó có tập hợp các thành phần riêng liên kết với các thành phần UI gốc.

React Native có thể khó thiết lập, đặc biệt là khi nói đến thông báo đẩy. Bạn cần thiết lập Chứng chỉ và Lặn vào Objective-C cho iOS và Java cho Android. Tuy nhiên, Triển lãm Loại bỏ sự cần thiết cho việc này.

Xây dựng một trang web hơn là một ứng dụng? Bạn có thể sử dụng một đàng hoàng người tạo ra trang web . Và để duy trì trang web, có được của bạn web hosting tại chỗ trên.

  • 30 công cụ thiết kế web để tăng tốc độ công việc của bạn

Expo có nghĩa là bạn có thể tạo các ứng dụng gốc React và triển khai chúng vào các cửa hàng ứng dụng chỉ sử dụng JS. Ngoài ra, nó cung cấp SDK có quyền truy cập vào chức năng gốc như thông báo, máy ảnh, danh bạ, vị trí, v.v. Nó cũng cung cấp quyền truy cập vào một số thành phần UI không được bao gồm trong lõi gốc React, nhưng thường được sử dụng, chẳng hạn như các biểu tượng, chế độ mờ và như vậy mà không cần phải viết một dòng mã gốc.

Expo cũng có thể tạo các bản dựng ứng dụng sẵn sàng gửi mà không cần xây dựng bằng Xcode hoặc Android Studio. Nếu bạn chưa sử dụng trước đây, chúng có thể là một nơi đáng sợ, đặc biệt nếu bạn mới bắt đầu với React Native - hoặc không tự tin nói chung với Cách tạo một ứng dụng . Các ứng dụng (hoặc dự án) cũng có thể được xuất bản lên Expo thay vì gửi đến một cửa hàng ứng dụng, cho phép người dùng thử dự án thông qua ứng dụng khách Mobile EXPO. Đừng lo lắng, điều này sẽ được bảo hiểm sau!

Bạn đang xây dựng ứng dụng của bạn với một đội? Lưu các tệp của bạn trong truy cập, đáng tin cậy lưu trữ đám mây .

01. Thiết lập Expo

Cài đặt Expo là một quá trình đơn giản. Đi đến Địa điểm và tải xuống XDE mới nhất, sau đó cài đặt ứng dụng di động trên điện thoại hoặc máy tính bảng của bạn. Máy khách di động cho phép chạy các ứng dụng trên thiết bị thực thông qua ứng dụng của họ mà không cần bất kỳ giấy phép nhà phát triển hoặc thiết lập chứng chỉ trả trước.

Sau đó, bạn có thể xuất bản ứng dụng vào dịch vụ hội chợ để người dùng có thể chạy các dự án đã hoàn thành của bạn thông qua ứng dụng khách expo Mobile, mà không cần phải đi qua các quy trình Đánh giá của App Store và Google Play.

Expo sẽ hỗ trợ xây dựng các ứng dụng độc lập có thể được xuất bản theo cách thủ công cho App Store hoặc Play Store, tuy nhiên bạn sẽ yêu cầu các tài khoản dành cho nhà phát triển cho các nền tảng bạn phát hành. Chương trình nhà phát triển của Apple chi phí £ 79 mỗi năm và Bảng điều khiển chơi của Google Chi phí một khoản phí một lần là $ 25 USD.

02. Tạo ứng dụng đầu tiên của bạn

An image showing the Expo XDE.

XDE này cung cấp cho chúng tôi thông tin chi tiết cho dự án. Cửa sổ bên trái là Packager gốc React và cửa sổ bên phải hiển thị bất kỳ nhật ký nào từ các thiết bị

Hãy để kinh doanh và tạo ứng dụng đầu tiên của chúng tôi với Expo. Mở Expo XDE, chọn Dự án & GT; Dự án mới và chọn mẫu trống. Cài đặt tất cả các phụ thuộc và bắt đầu Trình đóng gói gốc React, gói tất cả các tài sản.

Từ đây, bạn có thể xuất bản ứng dụng, chia sẻ ứng dụng vào ứng dụng khách hội triển lãm hoặc chạy ứng dụng trên trình giả lập. Ứng dụng này sẽ liên quan đến việc tạo thông báo đẩy, vì vậy bạn sẽ chia sẻ với Expo Mobile Client, vì trình mô phỏng không hỗ trợ chúng. Nhấp vào nút Chia sẻ để lấy mã QR để quét hoặc tùy chọn để gửi liên kết qua SMS hoặc email. Quét mã QR bằng máy khách Expo. Điều này chạy ứng dụng thông qua ứng dụng khách hội triển lãm và nó sẽ mở màn hình với: 'Mở App.js để bắt đầu hoạt động trên ứng dụng của bạn!'

Với ứng dụng đang chạy, hãy mở dự án trong trình chỉnh sửa mã yêu thích của bạn và mở App.js. Tìm văn bản trên và thay đổi nó thành 'Hello World Hello!', Sau đó lưu. Bạn sẽ thấy ứng dụng Tải lại tự động và có văn bản 'Hello World!' Bây giờ có thể nhìn thấy. Ma thuật!

Trong khi bạn đang phát triển, lắc thiết bị sẽ tiết lộ một menu dành cho nhà phát triển, có các tùy chọn hữu ích để gỡ lỗi. Từ menu này, bạn cũng có thể quay lại Triển lãm Trang chủ - hữu ích để thoát khỏi ứng dụng hoặc chuyển sang ứng dụng khác.

03. Thêm thông báo

Bây giờ bạn có một ứng dụng cơ bản được thiết lập và chạy, hãy thêm khả năng gửi và nhận thông báo. Điều này thường sẽ yêu cầu Objective-C và Java, tích hợp dịch vụ của bên thứ ba để gửi thông báo và bạn cũng cần thiết lập chứng chỉ cho iOS và tạo các phím cho Android.

Đầu tiên, bạn cần nhập quyền và thông báo từ Expo và tạo một chức năng mới trong lớp ứng dụng:

 Nhập {quyền, thông báo} từ 'Triển lãm';
Xuất ứng dụng lớp mặc định Mở rộng React.component {
  async arganforpushnotifyes () {
  Không thể
} 

Tại đây bạn sử dụng từ khóa Async để sử dụng tính năng es2017 async / đang chờ - React gốc có Babel hoạt động dưới mui xe để bạn có thể tận dụng tất cả lòng tốt JavaScript mới. Bây giờ, hãy yêu cầu Quyền thông báo và lấy mã thông báo đẩy Expo - để xác định thiết bị - để Expo biết nơi gửi thông báo đẩy:

 async arganforpushnotifiction () {
  Kết quả const = chờ đợi quyền.askasync (quyền.remote_notifyes);
  if (result.status! == 'cấp') {
    trở về;
  Không thể
  const token = chờ thông báo.getexpopushtoSync ();
  Console.log (mã thông báo);
} 

Ở đây, bạn sẽ yêu cầu quyền thông báo bằng phương thức Quyền.askasync (). Thông báo sẽ chỉ hiển thị trên iOS là Android cho phép thông báo theo mặc định. Mặc dù vậy, bạn thực sự vẫn cần chạy qua cùng một logic trên Android, vì có thể tắt thông báo.

Tiếp theo, kiểm tra phản hồi. Nếu các thông báo không được cấp thì bạn có thể dừng và trả về chức năng. Nếu thông báo được cấp, bạn sẽ nhận được mã thông báo đẩy từ dịch vụ hội chợ. Cuối cùng, bạn có thể đăng nhập mã thông báo để sử dụng sau này để kiểm tra thông báo và điều này sẽ được đăng nhập vào hội chợ XDE.

Điều đáng chú ý vào thời điểm này - trên iOS - cảnh báo này chỉ có thể được kích hoạt một lần theo thiết kế; Vì vậy, nếu người dùng phủ nhận quyền, bạn có thể muốn xem xét thêm thông báo hoặc cảnh báo tùy chỉnh trước khi trả lại chức năng. Để bật thông báo tại thời điểm này, người dùng sẽ cần chuyển đến cài đặt ứng dụng (trong trường hợp của chúng tôi, đây sẽ là Expo) & GT; Thông báo và kích hoạt chúng từ đó. Bởi vì điều này, bạn sẽ cần xóa máy khách Mobile Expo và sau đó cài đặt lại nếu bạn muốn kiểm tra cảnh báo quyền trên iOS nhiều lần.

Ngoài ra, Expo cung cấp một phương thức có tên là quyền.getasync () và điều này hoạt động theo cách tương tự như cho phép.askasync (), chỉ cần bật tắt cảnh báo iOS. Điều này có thể hữu ích nếu bạn muốn kiểm tra trạng thái trước để tạo luồng tùy chỉnh sẽ yêu cầu bạn quyền, ví dụ. Nếu cảnh báo iOS trước đây đã được kích hoạt (hãy nhớ, nó chỉ có thể được kích hoạt một lần trên mỗi cài đặt ứng dụng), các quyền.askasync () sẽ trả về cùng một thông tin với quyền.getasync (), vì vậy trong trường hợp sử dụng của chúng tôi, chúng tôi không cần để sử dụng quyền.getasync ().

Sau đó, bạn cần gọi chức năng này trong phương thức LifeCycle componentDidMount để nó chạy trên khởi chạy ứng dụng:

 Thành phầnDIDMOUNT () {
  Điều này.RegisterForPushnotification ();
} 

Tiếp theo, nếu bạn chấp nhận quyền thông báo, ứng dụng của bạn sẽ có thể nhận thông báo cục bộ và từ xa. Thông báo cục bộ sau đó được thiết lập và gửi qua thiết bị trực tiếp vào ứng dụng và không yêu cầu kết nối Internet. Thông báo từ xa đến từ một máy chủ và gửi thông báo qua các dịch vụ Hệ thống thông báo (APN) hoặc Google Cloud Messaging (GCM). Quá trình này cũng sẽ yêu cầu truy cập vào kết nối Internet để nhận chúng.

Expo có một dịch vụ để gửi thông báo tại https://exp.host/--/api/v2/push/send; Tất cả bạn cần làm là gửi một số dữ liệu cho nó. Điều này sau đó sẽ trông hơi giống như sau:

 {
  // Token đẩy.
  "Đến": & lt; token từ ứng dụng & gt;
  // Tiêu đề thông báo.
  "Tiêu đề": "Tiêu đề thông báo",
  // cơ quan thông báo.
  "Cơ thể": "Cơ quan thông báo",
  // Chuyển dữ liệu dưới dạng đối tượng, điều này có thể được sử dụng khi xử lý thông báo.
  "Dữ liệu": {"Giá trị": "Hello World!" Không thể
} 

A newly created React Native app showing a message with the words 'Hello world!'

Bộ công cụ Expo làm cho việc gửi và nhận thông báo đẩy dễ dàng

Trước khi chúng tôi kiểm tra một thông báo, chúng tôi sẽ định cấu hình ứng dụng của chúng tôi để xử lý các thông báo nếu ứng dụng mở. Theo thiết kế, iOS và Android không hiển thị thông báo khi một ứng dụng mở. Bạn cũng có thể xử lý bất kỳ dữ liệu nào được gửi trong thông báo đẩy ở đây, trong trường hợp chúng ta cần phải hành động trên đó. Hãy tạo một hàm mới để xử lý việc này và cảnh báo thuộc tính Giá trị dữ liệu:

 Handlenotification (thông báo) {
  cảnh báo (thông báo.data.value);
} 

Sau đó, trong phương thức LifeCycle của chúng tôi, bạn cần thiết lập trình nghe, gọi là trình xử lý thông báo chúng tôi vừa tạo:

 Thành phầnDIDMOUNT () {
  Điều này.RegisterForPushnotification ();
  Thông báo.addlistener (này.handlenotification);
} 

Bây giờ bạn đang đặt. Hãy gửi một thông báo đẩy với yêu cầu Curl:

 Curl \
  -X bài \
  -H "Loại nội dung: Ứng dụng / JSON" \
  -d '{
    "Đến": "& lt; token & gt;",
    "Tiêu đề": "Tiêu đề thông báo",
    "Cơ thể": "Cơ quan thông báo",
    "Dữ liệu": {"Giá trị": "Hello World!" Không thể
  } '\
  https://exp.host/--/api/v2/push/send

Bạn có thể lấy lệnh curl này đây . Nếu bạn không quen với Curl, bạn có thể gửi yêu cầu bằng cách sử dụng một cái gì đó như Người phát thơ , sử dụng GUI để gửi yêu cầu.

Khi yêu cầu đã gửi, bây giờ bạn sẽ thấy thông báo xuất hiện. Không có giới hạn về việc sử dụng dịch vụ đẩy Expo. Trong một kịch bản trong thế giới thực, bạn nên sử dụng API Batch bằng cách gửi một loạt các thông báo đẩy, theo lô 100, sẽ được gửi đi về hiệu quả:

 [
  {// đối tượng thông báo như trên},
  {// Một đối tượng thông báo khác}
] 

04. Xuất bản với hội chợ

A newly created React Native app showing a message with the words 'Hello world!

Chạy một ứng dụng trên một thiết bị là một trải nghiệm không ồn ào. Chỉ cần quét mã QR bằng ứng dụng Expo và nó tải ngay

Vì vậy, bây giờ chúng ta có một ứng dụng bản gốc mới sáng bóng (ngay cả khi nó không làm gì nhiều!), Làm thế nào để chúng ta để người khác sử dụng nó mà không chạy nó từ Expo XDE? Cách đơn giản nhất là nhấp vào xuất bản từ XDE. Điều này sẽ công bố dự án vào Expo và một liên kết sẽ xuất hiện trên hồ sơ của bạn, mà bạn có thể tìm thấy tại https://expo.io/@<username> ;.

Khi bạn đang truy cập liên kết dự án được xuất bản, sẽ có mã QR để quét (nằm giữa các tùy chọn tương tự như XDE) với ứng dụng khách Mobile Expo, giống như trong quá trình phát triển. Nếu chúng tôi muốn cập nhật ứng dụng, tất cả những gì chúng tôi cần làm được xuất bản lại và những thay đổi sẽ có sẵn cho người dùng khi chạy lại ứng dụng.

Bài viết này ban đầu được xuất bản vào ngày 297 của Net, tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Theo dõi mạng tại đây .

Bạn muốn học nhiều cách bạn có thể thành thạo phản ứng?

Kristijan Ristovski is giving his workshop Learn How to Think in React at Generate London from 19-21 September 2018.

Kristijan Ristovski đang đưa ra xưởng của mình học cách suy nghĩ trong việc phản ứng tại việc tạo London từ 19-21 tháng 9 năm 2018

Nếu bạn quan tâm đến việc tìm hiểu thêm về phản ứng, hãy chắc chắn rằng bạn đã chọn vé của mình cho Tạo London từ 19-21 tháng 9 năm 2018 . Đã thành lập Học viện Pheact để dạy phản ứng trên toàn thế giới và ra mắt sizzy.co. ok-google.io. , Kristijan Ristovski sẽ giao xưởng của mình - tìm hiểu cách nghĩ trong việc phản ứng - trong đó anh ta sẽ khám phá các thực tiễn tốt nhất và dạy bạn giải pháp cho những vấn đề thực sự mà bạn có thể gặp phải trong quá trình xây dựng một ứng dụng.

Tạo London diễn ra từ ngày 19-21 tháng 9 năm 2018. Nhận vé của bạn bây giờ .

Những bài viết liên quan:

  • Lấy đầu của bạn xung quanh phản ứng với năm yếu tố này
  • 10 Lời khuyên của Expert Reactjs mà bạn cần biết ngày hôm nay
  • Xây dựng một ứng dụng di động bản địa với React Native

Cách - Các bài báo phổ biến nhất

Cách vẽ đầu: Hướng dẫn đầy đủ

Cách Sep 11, 2025

[số 8] (Tín dụng hình ảnh: Oliver SIN) Trang 1/2: Làm thế nào để vẽ một c..


Sử dụng Framer X để xây dựng các nguyên mẫu tương tác

Cách Sep 11, 2025

[số 8] (Tín dụng hình ảnh: Framer) Là nhà thiết kế, luôn có câu hỏi về những công cụ tạo m..


10 cách để cải thiện giải phẫu 3D của bạn

Cách Sep 11, 2025

[số 8] (Tín dụng hình ảnh: Ryan Kingslien) Tái tạo hình người là một trong những thách thức kh�..


Giữ kiểm soát phiên bản hoàn hảo với Tóm tắt

Cách Sep 11, 2025

[số 8] Kiểm soát phiên bản ban đầu là nhằm vào các nhà phát triển làm việc với mã, như một cách đ�..


Giới thiệu về Thử nghiệm Frontend

Cách Sep 11, 2025

[số 8] Trang 1/2: Các loại bài kiểm tra frontend khác nhau (và khi nào nên sử dụng chún..


tạo họa tiết hữu cơ bằng mực

Cách Sep 11, 2025

[số 8] Vẽ bằng mực tạo ra các khả năng rộng lớn. Có nhiều cách đơn giản nhưng hiệu quả ..


Stitch và tổng hợp 360 cảnh quay

Cách Sep 11, 2025

Với việc bổ sung Plugin VR VR. Để nuke, bây giờ chúng tôi có một công cụ mạnh mẽ theo ý của chúng tôi để khâu và kết hợp các cảnh quay ..


Cách nhận thêm từ GIF

Cách Sep 11, 2025

Gifs làm việc trong chu kỳ liền mạch, mà Rebecca Mock. mô tả là 'vòng lặp hoàn hảo'. Loop này nên xóa kh..


Thể loại