事前構築されたテンプレートを使用してReact Native Expoプロジェクトを開始します

はじめに このセクションでは、 react native を使用して、 expo テンプレートを使って始める方法と、back4appに接続する方法を4つの簡単なステップで学びます。 前提条件 このチュートリアルを完了するには、以下が必要です back4appのバックエンドアプリ。 注 新しいparseアプリのチュートリアル https //www back4app com/docs/get started/new parse app を参照して、back4appでparseアプリを作成する方法を学んでください。 npm https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm または yarn https //classic yarnpkg com/en/docs/install がシステムにインストールされていること。 expo cliが このガイド https //docs expo io/get started/installation/?redirected に従ってインストールされていること。 1 テンプレートを取得する テンプレートプロジェクトを取得するには、ソースコードをダウンロードして解凍するか、 githubリポジトリ https //github com/templates back4app/react native template からあなたのマシンにコピーします。または、gitコマンドラインを使用してプロジェクトをクローンします。 次のコマンドを実行して、curlを使用してテンプレートをダウンロードして抽出します curl lok https //github com/templates back4app/react native template/archive/master zip && unzip master zip または 次のコマンドを実行して、gitを使用してテンプレートをクローンします git clone https //github com/templates back4app/react native template 2 アプリの依存関係をダウンロードする システムに \<font color="#2166ae">npm\</font> または \<font color="#2166ae">yarn\</font> がインストールされていることを確認してください。 npmを取得する https //docs npmjs com/getting started または yarnを取得する https //classic yarnpkg com/en/docs/install#windows stable ガイドを参照してください。 2\ ターミナルで、 \<font color="#2166ae">cd react native template master\</font> を実行して、プロジェクトのルートディレクトリを開きます。 3\ \<font color="#2166ae">npm install\</font> を実行して依存関係をインストールします。 このチュートリアルでは、依存関係を管理するために npm を使用していますが、代わりに yarn を使用することもできます。 3 アプリの資格情報を設定する アプリがback4appサーバーに安全に接続できるようにするために、parse javascript sdkにアプリの資格情報を提供する必要があります。 あなたの \<font color="#2166ae">アプリid\</font> と \<font color="#2166ae">javascriptキー\</font> の資格情報を見つけるには、アプリの \<font color="#2166ae">ダッシュボード\</font> > \<font color="#2166ae">アプリ設定\</font> > \<font color="#2166ae">セキュリティとキー\</font> をナビゲートします。 プロジェクトのルートディレクトリで、次のファイルを開きます \<font color="#2166ae">app/(tabs)/index tsx\</font> ファイルは次のようになります index tsx parse initialize( 'your application id here', // replace with your parse application id 'your javascript key here' // replace with your parse javascript key ); parse serverurl = 'https //parseapi back4app com/'; あなたの \<font color="#2166ae">アプリid\</font> と \<font color="#2166ae">javascriptキー\</font> をコピーして貼り付けます。 4 接続をテストする テンプレートプロジェクトの \<font color="#2166ae">app js\</font> には、personオブジェクトを作成する関数と、アプリのpeopleをback4appデータベースに取得するための別の関数があります。 index tsx // function to create a new person async function createperson() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const personobject = new personobject(); personobject set("name", "back4app user"); const result = await personobject save(); setresult(`object created with id ${result id}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } async function fetchpeople() { setloading(true); seterror(null); try { const personobject = parse object extend("person"); const query = new parse query(personobject); const results = await query find(); const names = results map(result => ({ objectid result id, name result get("name"), })); setresult(`fetched names ${json stringify(names, null, 2)}`); } catch (error) { seterror(error instanceof error ? error message 'unknown error'); } finally { setloading(false); } } アプリの接続を実行してテストするには プロジェクトのターミナルを開きます。 実行します \<font color="#2166ae">npm run android\</font> または \<font color="#2166ae">npm run ios\</font> または \<font color="#2166ae">npm run start\</font> して、ターゲットプラットフォームでアプリケーションを開きます。 完了しました！ この時点で、back4appに接続されたreact nativeアプリケーションを立ち上げる方法を学びました。