EXPOと原ネイティブのジャンプスタート

Sep 16, 2025

操作方法

An image showing a React Native app running on a smartphone.

リアクトネイティブ JavaScriptを使用してネイティブのモバイルアプリを構築することを可能にするプラットフォームです。その名前が暗示するにつれて、それは使います反応するそうであれば、モバイルインターフェイスを構成することは、Web上で反応するのと同じです。 HTMLタグを使用してコンポーネントを作成するのではなく、ネイティブUIコンポーネントにバインドする独自のコンポーネントのセットがあります。

React Nativeは、特にそれがプッシュ通知に関してあるときに設定するのに困難になることがあります。 Android用のiOSおよびJavaの場合は、証明書を設定し、Objective-Cにダイビングする必要があります。しかしながら、 exp exp この必要性を排除します。

アプリではなくウェブサイトを構築する？あなたはまともなものを使うことができました ウェブサイトビルダー 。そしてサイトを維持するために、あなたのものを手に入れます ウェブホスティング スポットオン。

あなたのワークフローをスピードアップするための30 Webデザインツール

expoとは、React Native Appsを作成し、それらをJSのみを使用してアプリストアに配置できます。さらに、通知、カメラ、連絡先、場所などのようなネイティブ機能へのアクセスを持つSDKを提供します。また、React Native Coreに含まれていないいくつかのUIコンポーネントへのアクセスを提供しますが、ネイティブコードの行を作成する必要なしにアイコン、ぼやけビューなどのような使用されることがよくあります。

expoでは、XcodeまたはAndroid Studioを使用して構築する必要なく、提出対応アプリケーションを作成することもできます。あなたが以前に使用していないならば、特にあなたが原生の反応を始めたばかりであるならば、彼らは怖い場所になることも、一般的には自信を持っていない場合 アプリを作る方法 。アプリケーション（またはプロジェクト）は、App Storeを送信するのではなく、expoに公開することもできます。これにより、ユーザーがExpo Mobileクライアントを介してプロジェクトを試みます。心配しないで、これは後でカバーされます！

あなたはチームを使ってあなたのアプリを構築していますか？アクセス可能で信頼性の高いファイルを保存してください クラウドストレージ 。

01. expo.を設定します

EXPOのインストールは簡単なプロセスです。に頭上に向かって地点最新のXDEをダウンロードしてから、携帯電話やタブレットにモバイルアプリをインストールしてください。モバイルクライアントは、開発者ライセンスまたは証明書セットアップのUpfrontを必要とせずに、実際のデバイス上のアプリを自分のアプリで実行することを可能にします。

その後、App StoreとGoogle Play Reviewプロセスを実行する必要なく、ユーザーがExpo Mobileクライアントを介して完成したプロジェクトを実行できるように、アプリケーションをExpoサービスに公開できます。

Expoは、手動でApp StoreまたはPlay Storeに公開できるスタンドアロンアプリの構築をサポートしていますが、リリースしたプラットフォームの開発者アカウントが必要になります。アップルの開発者プログラム年間79ポンド GoogleのPlay Console. 25ドルの$ 25ドルの料金をかけます。

02.最初のアプリを作成します

An image showing the Expo XDE. — このXDEはプロジェクトの詳細な情報を提供します。左側のウィンドウはReact Native Packagerで、右側のウィンドウはデバイスからのログを表示します。

ビジネスに着き、エキスポで最初のアプリを作成しましょう。 Expo XDEを開き、Project＆GTを選択します。新しいプロジェクトと空白のテンプレートを選択します。すべての依存関係をインストールし、React Native Packagerを起動します。これはすべてのアセットをバンドします。

ここから、アプリを公開したり、アプリをExpo Mobileクライアントに共有したり、シミュレータ上でアプリを実行したりできます。このアプリはプッシュ通知を作成することを巻き込ませるので、シミュレータはそれらをサポートしていないため、エキスポモバイルクライアントに共有するつもりです。 [共有]ボタンをクリックして、スキャンするQRコードを取得するか、SMSまたはEメールを介してリンクを送信するオプションを取得します。 QRコードをEXPOクライアントでスキャンします。これはExpo Clientを介してアプリを実行し、それは：「App.jsを開くためにapp.jsを開く」とスクリーンに開きます。

アプリを実行している場合は、お気に入りのコードエディタでプロジェクトを開き、App.jsを開きます。上記のテキストを見つけて、それを古典的な 'hello world！'に変更してから保存してください。アプリが自動的にリロードされ、テキスト 'Hello World！'が表示されます。マジック！

あなたが開発中に、デバイスを振ると開発者メニューが表示され、デバッグのための役立つオプションがあります。このメニューから、エキスポのホームに戻ることもできます - あなたはアプリを出て別のものに終了するのに役立ちます。

03.通知を追加します

これで基本的なアプリが設定されて実行されている、通知を送受信する機能を追加しましょう。これにより、通常はObjective-CとJavaが必要になり、サードパーティ製サービスを統合し、通知を送信し、iOSの証明書を設定し、Android用のキーを作成する必要があります。

まず、expoからのアクセス許可と通知をインポートして、アプリクラスで新しい機能を作成する必要があります。

 'expo'から{権限、通知}をインポートします。
デフォルトのクラスAppをエクスポートするReactOv_ponent {
  ASYNC RESITRICALFORPUSHNOTICATIONS（）{
  }

ここでは、asnycキーワードを使用してES2017 Async / Awaitフィーチャを利用しています。さて、通知権限を要求し、EXPOプッシュトークンを取得しましょう - デバイスを識別するには - Expoがプッシュ通知を送信する場所を知っているように：

 Async RegisterForPushNotifications（）{
  const result = permissions.askAsync（permissions.remote_notifications）;
  if（result.status！== '許可'）{
    帰国;
  }
  const token =通知をawait notificats.getexpopushtokenasync（）;
  console.log（トークン）;

ここでは、permissions.askAsync（）メソッドを使用して通知権限を要求します。 Androidはデフォルトで通知を有効にするため、アラートはiOSにのみ表示されます。それにもかかわらず、あなたは実際には、通知をオフにすることが可能なので、実際にはAndroid上の同じロジックを実行する必要があります。

次に、応答を確認してください。通知が付与されていない場合は、機能を停止して戻します。通知が付与されている場合は、Expoサービスからプッシュトークンを取得します。最後に、後で通知をテストするためにトークンをログアウトに記録でき、これはEXPO XDEに記録されます。

この時点で注目に値する - iOSオン - このアラートはデザインでのみ起動できます。したがって、ユーザーが許可を拒否した場合は、機能から返却する前にカスタム通知または警告を追加することを検討してください。この時点で通知を有効にするために、ユーザーはアプリの設定（私たちの場合はこれがexpoになる）＆gtにアクセスする必要があります。通知とそこからそれらを有効にします。このため、Expo Mobileクライアントを削除してから、iOS上の許可アラートを複数回テストしたい場合は再インストールする必要があります。

さらに、ExpoはPermissions.getAsync（）と呼ばれるメソッドを提供し、これはiOSアラートを発射することなく、Permissions.AkaSync（）と同様の方法で機能します。これは、最初にステータスを確認したい場合に役立ちます。たとえば、アクセス許可を求めるカスタムフローを作成します。 IOSアラートが以前にトリガーされた場合（アプリケーションインストールごとにのみ発生する可能性があります）、permissions.askAsync（）はPermissions.GetAsync（）と同じ情報を返します。 permissions.getAsync（）を使用するには。

その後、ComponentDIDMount Lifecycleメソッドでこの関数を呼び出す必要があります。

 ComponentDIDMount（）{
  this.registerForPushNotifications（）。

次に、通知権限を受け入れると、アプリはローカル通知とリモートの通知を受信できます。その後、ローカル通知を設定してデバイスを介して直接アプリに送信し、インターネット接続を必要としません。リモート通知はサーバーから来て、アップルプッシュ通知システム（APN）またはGoogle Cloud Messaging（GCM）サービスを介して通知を送信します。このプロセスでは、インターネット接続にアクセスする必要があります。

expoには、https://exp.host/--/api/v2/push/sendで通知を送信するためのサービスがあります。あなたがする必要があるのはそれにいくつかのデータを送ることだけです。これは次のように少し見えます。

 {
  //プッシュトークン。
  "to"：＆lt; app＆gtからのトークン。
  //通知タイトル。
  "Title"： "通知のタイトル"、
  //通知体。
  「ボディ」：「通知ボディ」、
  //データをオブジェクトとして渡すと、これは通知を処理するときに使用できます。
  "data"：{"value"： "Hello World！" }

A newly created React Native app showing a message with the words 'Hello world!' — Expo Toolkitはプッシュ通知の送受信を楽にしています

通知をテストする前に、アプリが開いている場合は通知を処理するようにアプリを設定します。設計では、アプリが開いているときにiOSとAndroidは通知を表示しません。ここで行動する必要がある場合は、ここでPUSHメッセージで送信されたデータを処理することもできます。これを処理してデータ値プロパティを警告するための新しい関数を作成しましょう。

 handreNotification（通知）{
  alert（Notification.Data.Value）;

その後、ComponentDIDMount Lifecycleメソッドで、作成したばかりの通知ハンドラを呼び出すリスナーを設定する必要があります。

 ComponentDIDMount（）{
  this.registerForPushNotifications（）。
  Notifications.AddListener（this.handleNotification）;

あなたは今設定されています。カール要求でプッシュ通知を送信しましょう。

カール\
  -X POST \
  -h "content-type：application / json" \
  -d '{
    "to"： "＆lt; token＆gt;"、
    "Title"： "通知のタイトル"、
    「ボディ」：「通知ボディ」、
    "data"：{"value"： "Hello World！" }
  '\
  https://exp.host/--/api/v2/push/send

あなたはこのcurlコマンドをつかむことができますここに。あなたがカールに慣れていないのなら、あなたはそのようなものを使って要求を送ることができます郵便配達これは要求を送信するためにGUIを使用しています。

要求が送信されると、通知が通過するのを見てください。 EXPOプッシュサービスの使用に制限はありません。実世界のシナリオでは、効率のために送り出すために、プッシュ通知の配列を100のバッチで送信することによってバッチAPIを使用することが奨励されています。

  [
  {//上記の通知オブジェクト}
  {//他の通知オブジェクト}
] 
  
   04.エキスポに出版します
  
  
   
    
     
      
       
       
       
      
     
    
   
   
    
     デバイス上のアプリを実行することは、ノースでの経験です。 expoアプリでQRコードをスキャンしてすぐにロードするだけです
    
   
  
  
   だから、私たちは光沢のある新しい反応ネイティブアプリを持っています（それがまだあまりしていなくても！）、Expo XDEからそれを実行せずに他の人にそれを使用させなさいか？最も簡単な方法は、XDEから公開をクリックすることです。これによりプロジェクトをexpoに公開し、あなたのプロフィールにリンクが表示されます。
  
  
   公開されたプロジェクトリンクを訪問しているとき、開発中のように、Expo Mobileクライアントを使用して（XDEと同じオプションの中にある）をスキャンするQRコードがあります。アプリを更新したい場合は、再頒布する必要があり、再度アプリを実行するときに変更がユーザーに利用可能になります。
  
  
   
    この記事はもともとネットの297号線、Webデザイナーと開発者向けの世界で最も売れている雑誌で発行されました。
   
   
    
     ここでネットを購読する
    
   
   
    。
   
  
  
   あなたが反応することができるより多くの方法を学びたいですか？
  
  
   
    
     
      
       
        
        
        
       
      
     
    
    
     
      Kristijan Ristovskiは彼のワークショップを与えています2018年9月19日から21日までロンドンの生成で考える方法を学びます。
     
    
   
  
  
   
    Reactについてもっと学ぶことに興味があるなら、必ずあなたのチケットを拾ったことを確認してください
   
   
    
     2018年9月19日から21日までロンドンを生成します
    
   
   
    。 React Academyを世界中に反応して発売しました
   
   
    
     シッピング
    
   
   
    そして
   
   
    
     ok- google.io.
    
   
   
    、Kristijan Ristovskiは彼のワークショップを届けるでしょう - 反応を考えて学ぶ - 彼はベストプラクティスを回復させ、あなたがアプリを構築するプロセスで遭遇するかもしれない本当の問題に対する解決策をあなたに教えることを学びましょう。
   
  
  
   
    ロンドンを生成する2018年9月19日から21日までに行われます。
   
   
    
     今すぐあなたのチケットを入手してください
    
   
   
    。
   
  
  
   
    関連記事：
   
  
  
   
    
     これらの5つの要因と反応しながら頭を向けてください
    
   
   
    
     あなたが今日知る必要がある10個のエキスパートReactJSのヒント
    
   
   
    
     React Nativeを使用してネイティブのモバイルアプリを構築します

EXPOと原ネイティブのジャンプスタート

01. expo.を設定します

02.最初のアプリを作成します

03.通知を追加します

04.エキスポに出版します

あなたが反応することができるより多くの方法を学びたいですか？

操作方法 - 最も人気のある記事

フラッシュゲームをHTML5に変換する

あなたのサイトにUIアニメーションを追加する

Procreateで古典的なおとぎ話のシーンを描く

毛皮のような漫画のキャラクターを作成する方法

センサーデータを収集するアプリを作成する

ユーザーの行動に影響を与える7キラー方法

3D印刷のための作品を準備する：8トップヒント

わずか4色で自画像を作成する

カテゴリ