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

はじめに このセクションでは、 react native を使用して、 expo テンプレートを使って始める方法と、back4appに接続する方法を4つの簡単なステップで学びます。 前提条件 このチュートリアルを完了するには、以下が必要です back4appのバックエンドアプリ。 注 https //www back4app com/docs/get started/new parse app を参照して、back4appでparseアプリを作成する方法を学んでください。 https //www npmjs com/get npm?utm source=house\&utm medium=homepage\&utm campaign=free%20orgs\&utm term=install%20npm または https //classic yarnpkg com/en/docs/install がシステムにインストールされていること。 expo cliが https //docs expo io/get started/installation/?redirected に従ってインストールされていること。 1 テンプレートを取得する テンプレートプロジェクトを取得するには、ソースコードをダウンロードして解凍するか、 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 アプリの依存関係をダウンロードする システムに npm npm または yarn yarn がインストールされていることを確認してください。 https //docs npmjs com/getting started または https //classic yarnpkg com/en/docs/install#windows stable ガイドを参照してください。 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アプリケーションを立ち上げる方法を学びました。