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

はじめに このセクションでは、 react native を使用して、 expo テンプレートを使って始める方法と、back4appに接続する方法を4つの簡単なステップで学びます。 前提条件 このチュートリアルを完了するには、以下が必要です back4appのバックエンドアプリ。 注 新しいparseアプリのチュートリアル を参照して、back4appでparseアプリを作成する方法を学んでください。 npm または yarn がシステムにインストールされていること。 expo cliが このガイド に従ってインストールされていること。 1 テンプレートを取得する テンプレートプロジェクトを取得するには、ソースコードをダウンロードして解凍するか、 githubリポジトリ からあなたのマシンにコピーします。または、gitコマンドラインを使用してプロジェクトをクローンします。 次のコマンドを実行して、curlを使用してテンプレートをダウンロードして抽出します または 次のコマンドを実行して、gitを使用してテンプレートをクローンします 2 アプリの依存関係をダウンロードする システムに npm npm または yarn yarn がインストールされていることを確認してください。 npmを取得する または yarnを取得する ガイドを参照してください。 2\ ターミナルで、 cd react native template master cd react native template master を実行して、プロジェクトのルートディレクトリを開きます。 3\ npm install npm install を実行して依存関係をインストールします。 このチュートリアルでは、依存関係を管理するために npm を使用していますが、代わりに yarn を使用することもできます。 3 アプリの資格情報を設定する アプリがback4appサーバーに安全に接続できるようにするために、parse javascript sdkにアプリの資格情報を提供する必要があります。 あなたの アプリid アプリid と javascriptキー javascriptキー の資格情報を見つけるには、アプリの ダッシュボード ダッシュボード > アプリ設定 アプリ設定 > セキュリティとキー セキュリティとキー をナビゲートします。 プロジェクトのルートディレクトリで、次のファイルを開きます app/(tabs)/index tsx app/(tabs)/index tsx ファイルは次のようになります 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/'; あなたの アプリid アプリid と javascriptキー javascriptキー をコピーして貼り付けます。 4 接続をテストする テンプレートプロジェクトの app js app js には、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); } } アプリの接続を実行してテストするには プロジェクトのターミナルを開きます。 実行します npm run android npm run android または npm run ios npm run ios または npm run start npm run start して、ターゲットプラットフォームでアプリケーションを開きます。 完了しました！ この時点で、back4appに接続されたreact nativeアプリケーションを立ち上げる方法を学びました。