リアルタイム更新を実現するReactフックの実装ガイド

parseを使用したリアルタイム更新のためのreactフックの始め方 はじめに parse react native libへようこそ！このガイドでは、parse react libとは何か、どのようにインストールしてreact nativeプロジェクトで使用を開始するかを学びます。 動機 parse/back4appをjavascriptベースのプロジェクトに統合する最も簡単な方法は、 https //www npmjs com/package/parse を通じてです。このライブラリは、nodejs、reactjs、vuejs、angularjs、react nativeなどの複数のjavascript環境で動作し、back4appの機能にアクセスできます。 parse react nativeの目標は、react native開発者にとってこの体験をさらに良くすることです。最小限の設定、コードの再利用、androidおよびios向けのネイティブ最適化を提供する軽量で使いやすいレイヤーを提供します。 このパッケージを使用することで、資格情報の設定、httpリクエスト、リアルタイム同期、オフラインファーストのインタラクションなどの項目が自動的にreact nativeアプリに利用可能になります。このライブラリは完全にtypescriptで書かれており、 https //www npmjs com/package/parse の上に構築されており、現在はアルファ版です。 この初期ガイドでは、@parse/react nativeライブラリをreact nativeプロジェクトにインストールして設定します。 parse react nativeは現在アルファ版です。このライブラリはテスト中ですので、慎重に進めることをお勧めします。皆様のフィードバックを非常に感謝していますので、ライブラリを自由に使用し、質問や最初の印象をcommunity\@back4app comまでメールでお送りください。 前提条件 このチュートリアルを完了するには、次のものが必要です： back4appでの https //www back4app com/docs/get started/new parse app ： 「 https //www back4app com/docs/platform/parse live query 」チュートリアルに従ってください。 https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm またはyarnがインストールされていること： https //www npmjs com/package/npx パッケージランナーがインストールされていること。 1 インストール react nativeアプリケーションがない場合は、次のコマンドラインを使用して、 npx npx パッケージランナーで新しいプロジェクトを作成してください。 npx react native init startwithparsern 次に、react nativeアプリケーションに @parse/react native @parse/react native とそのピア依存関係である parse parse をインストールします。 \# yarnを使用する場合 yarn add @parse/react native parse \# npmを使用する場合 npm install save @parse/react native parse 2 アプリケーション設定 アプリがback4appサーバーに安全に接続できるように、parse javascript sdkにアプリの資格情報を提供する必要があります。 1 //in your app js 2 import { initializeparse } from '@parse/react native'; 3&#x9; 4 initializeparse( 5 'https //your subdomain b4a io/', 6 'application id', 7 'javascript key' 8 ); あなたの アプリid アプリid と javascriptキー javascriptキー の資格情報は、あなたのアプリの ダッシュボード ダッシュボード を開いて https //www back4app com/ をクリックすることで見つけることができます アプリ設定 アプリ設定 > コア設定 コア設定 , の下に サーバー設定 サーバー設定 あなたのサブドメインは アプリ設定 アプリ設定 > コア設定 コア設定 > サーバーurlとライブクエリ サーバーurlとライブクエリ 詳細については、このガイドを確認してください https //www back4app com/docs/platform/parse live query 3 最初のクエリを作成する 次に、最初のクエリを構築し、アプリに表示します。 @parse/react native @parse/react native ライブラリは useparsequery useparsequery フックをエクスポートしているので、オフラインサポートやリアルタイムの変更などの機能を実装する方法を探す時間を無駄にすることはありません。 それは parse query parse query を取り、クエリによって返されたデータにアクセスするために使用できるいくつかのプロパティを持つオブジェクトを返します 1 // in your app js 2&#x9; 3 import react from 'react'; 4 import { activityindicator, flatlist, view,text } from 'react native'; 5 import { initializeparse, useparsequery } from '@parse/react native'; 6&#x9; 7 // remember to call initializeparse with your credentials before using useparsequery 8 initializeparse( 9 'https //your subdomain b4a io/', 10 'application id', 11 'javascript key' 12 ); 13&#x9; 14 export default function app() { 15 const parsequery = new parse query('todo'); 16 const { 17 islive, 18 isloading, 19 issyncing, 20 results, 21 count, 22 error, 23 reload 24 } = useparsequery(parsequery); 25&#x9; 26 if (isloading) { 27 return \<activityindicator/>; 28 } 29&#x9; 30 return ( 31 \<flatlist 32 data={results} 33 renderitem={({item}) => ( 34 \<view 35 style={ { 36 height 70, 37 flex 1, 38 alignitems 'center', 39 justifycontent 'center', 40 } }> 41 \<text>task {item get('title')}\</text> 42 \</view> 43 )} 44 />); 45 } フックにクエリを渡すと、最初にキャッシュされた結果を探します。次に、back4app livequery サーバーと通信するための websocket 接続を作成し、自動的に同期します。言い換えれば、オフラインファーストのアプローチとリアルタイムの変更がデフォルトで有効になっています。 クエリの状態を確認するには、フックによって返された props props を使用します islive islive もし true true , クエリがリアルタイム更新にサブスクライブしていることを示します。 isloading isloading もし true true , クエリが結果を取得しています。 issyncing issyncing もし true true , クエリがback4appサーバーから更新された結果を取得しています。 results results これはクエリから返されたデータです。 count count クエリに一致したオブジェクトの数を示します。 error error クエリに何か問題が発生した場合、エラーが返されます。 reload reload クエリ結果を再読み込みします。 「 useparsequery useparsequery 」は任意の parse query parse query を受け入れ、 https //github com/neon bindings/examples/blob/master/thread count/native/src/lib rs を例とともに見ることができます。 4 アプリフックをテストする 今、あなたはreact nativeアプリを実行し、結果を見ることができるはずです。 \# androidで npx react native run android \# iosで npx react native run ios アプリにアイテムを表示するには、back4appプロジェクトにデータを追加する必要があることを忘れないでください。 完了しました！ この時点で、プロジェクトに @parse/react native @parse/react native をインストールし、back4appとの接続を設定し、最初のクエリを書きました。次のガイドでは、このライブラリの主な機能の1つである使用方法を見ていきます。さらに https //reactnavigation org/docs/1 x/hello react navigation に進んで、さらにいくつかのクエリを書き始めましょう。