React NativeでBack4Appにファイルを保存・取得する方法

react nativeアプリからファイルを保存する はじめに このガイドでは、parse javascript sdkを使用してback4appクラウドストレージを管理し、react nativeアプリケーションでファイルを保存および取得する方法を学びます。 parseの世界では、ファイルを管理するために parse file parse file というタイプを使用します。 parse file parse file を作成した後、 save() save() メソッドを使用してback4appクラウドに保存します。ファイルを他のデータオブジェクトに関連付けることを常にお勧めします。そうすれば、オブジェクトをクエリするときにこのファイルパスを取得できます。関連付けを行わない場合、ファイルは保存されますが、クラウド上で見つけることはできません。 もう一つの重要なヒントは、ファイルに拡張子を持つ名前を付けることです。この拡張子により、parseはファイルタイプを特定し、それに応じて処理します。また、各アップロードには一意の識別子が付与されるため、同じ名前を使用して複数のファイルをアップロードすることに問題はありません。 react nativeアプリの最も一般的な使用例は、画像を保存することです。このガイドでは、画像を保存して表示するデモギャラリーアプリを作成します。 このチュートリアルで作成したアプリの完全なサンプルコードは こちら https //github com/templates back4app/react native demo gallery app です。ステップバイステップで進むか、コードに直接飛んでください。 画像を再生します。 ファイルをデータオブジェクトに関連付けない場合、そのファイルは孤立ファイルとなり、back4appクラウド上で見つけることができなくなります。 目標 parse javascriptとback4appを使用して画像をアップロードおよび表示するreact nativeギャラリーアプリを作成すること。 前提条件 このチュートリアルを完了するには、次のものが必要です： parse sdkをインストールする チュートリアルを完了してください。 1 依存関係のインストール react nativeアプリでファイル（つまり、写真のアップロード）を扱うことは、最も一般的な機能の1つです。このチュートリアルでは、画像をアップロードして表示するシンプルなギャラリーアプリを作成します。 「 back4appに正常に接続されたreact nativeプロジェクト https //www back4app com/docs/parse sdk/react native sdk 」を持っている場合は、そのルートディレクトリに移動し、次の依存関係をインストールします iosの場合、ポッドをインストールします react native v0 60+ v0 60+ では自動リンクが利用可能ですが、 react native image picker react native image picker の古いバージョンのインストールに関する情報は、 こちらの公式ドキュメントを確認してください https //github com/react native image picker/react native image picker 。 インストール後、ユーザーがiosの写真から画像/ビデオを選択できるようにするために、 nsphotolibraryusagedescription nsphotolibraryusagedescription キーを info plist info plist に追加する必要があります。 androidでは、ギャラリーから写真を選択するために権限は必要ありません。 2 ギャラリーから画像を選択する 次に、ギャラリーから画像を選択してアップロードするためのuiとロジックをラップするコンポーネントを作成します。 ルートディレクトリに、次の内容の uploadingimage js uploadingimage js ファイルを作成します 1 import react, {usestate} from 'react'; 2 import {view, button, image, stylesheet} from 'react native'; 3&#x9; 4 import {launchimagelibrary} from 'react native image picker'; 5 import parse from 'parse/react native js'; 6&#x9; 7 const uploadimage = () => { 8 const \[image, setimage] = usestate(null); 9&#x9; 10 async function upload() { 11 // todo implement this method 12 } 13 // this will open phone image library 14 function pickimage() { 15 launchimagelibrary( 16 { 17 mediatype 'photo', 18 includebase64 true, 19 maxheight 200, 20 maxwidth 200, 21 }, 22 (response) => { 23 // add selected image to the state 24 setimage(response); 25 }, 26 ); 27 } 28&#x9; 29 return ( 30 \<view> 31 \<button 32 onpress={pickimage} 33 title="pick an image from gallery" 34 color="#841584" /> 35 {image && \<image source={ {uri image uri} } style={styles currentimage}/>} 36&#x9; 37 {image && \<button title="upload" color="green" onpress={upload} />} 38 \</view> 39 ); 40&#x9; 41 }; 42&#x9; 43 const styles = stylesheet create({ 44 container { 45 height 400, 46 justifycontent 'center', 47 alignitems 'center', 48 }, 49 currentimage { 50 width 250, 51 height 250, 52 resizemode 'cover', 53 alignself 'center', 54 }, 55 }); 56&#x9; 57 export default uploadimage; 上記のコンポーネントは次のようにレンダリングされます ユーザーがクリックすると画像ライブラリを開くボタン 選択した画像とアップロードボタン ご覧の通り、 アップロード アップロード メソッドは何も行いません。次に、その動作を実装し、実際に画像をback4appクラウドにアップロードする方法を見ていきます。 3 画像のアップロード back4appストレージは parse file parse file に基づいており、ドキュメント、画像、ビデオ、音楽、その他のバイナリデータなど、任意のファイルを保存できます。 parse file parse file は、ファイルストレージプロセスを抽象化し、簡単にするためにparse javascript sdkが提供するユーティリティクラスです。 したがって、画像をアップロードするには、 parse file parse file インスタンスを作成し、次にsaveメソッドを呼び出すだけで済みます。これを行うことで、parseは自動的に残りの処理を行います。 parseファイルに関する完全なドキュメントはこちら https //docs parseplatform org/js/guide/#files をご覧いただけます。 では、私たちの アップロード アップロード 関数でそれを行いましょう 1 async function upload() { 2 // 1 create a file 3 const {base64, filename} = image; 4 const parsefile = new parse file(filename, {base64}); 5&#x9; 6 // 2 save the file 7 try { 8 const responsefile = await parsefile save(); 9 const gallery = parse object extend('gallery'); 10 const gallery = new gallery(); 11 gallery set('picture', responsefile); 12&#x9; 13 await gallery save(); 14 alert alert('the file has been saved to back4app '); 15 } catch (error) { 16 console log( 17 'the file either could not be read, or could not be saved to back4app ', 18 ); 19 } 20 } 要するに、上記のスニペットは選択した画像を作成して保存し、保存が完了した後にそれを parse object parse object と呼ばれる gallery gallery に関連付けます。 今、あなたは uploadimage uploadimage コンポーネントをあなたの app js app js にインポートして使用する必要があります。 1 import react from 'react'; 2 import {safeareaview, stylesheet} from 'react native'; 3 // in a react native application 4 import parse from 'parse/react native js'; 5 import asyncstorage from '@react native community/async storage'; 6 import keys from ' /constants/keys'; 7 //before using the sdk 8 parse setasyncstorage(asyncstorage); 9 parse initialize(keys applicationid, keys javascriptkey); 10 parse serverurl = keys serverurl; 11&#x9; 12 import uploadimage from ' /uploadimage'; 13&#x9; 14 const app = () => { 15 return ( 16 \<safeareaview style={styles container}> 17 \<uploadimage/> 18 \</safeareaview> 19 ) 20 }; 21&#x9; 22 const styles = stylesheet create({ 23 container { 24 backgroundcolor '#f5f5f5', 25 flex 1, 26 }, 27 title { 28 fontsize 18, 29 textalign 'center', 30 fontweight 'bold', 31 }, 32 }); 33&#x9; 34 export default app; それを行うと、ギャラリーから画像を選択できるようになります そして、アップロードボタンを押して画像を正常にアップロードします 4 画像の表示 画像の内容を取得し、ユーザーに表示するために、画像のurlを取得する必要があります。次に、私たちの ギャラリー ギャラリー オブジェクトから画像をクエリし、flatlistに表示するコンポーネントを作成します。 ルートディレクトリに、次の内容を持つ gallery js gallery js ファイルを作成します 1 import react, {usestate, useeffect} from 'react'; 2 import {text, image, flatlist, stylesheet} from 'react native'; 3&#x9; 4 import parse from 'parse/react native js'; 5&#x9; 6 const gallery = () => { 7 const \[images, setimages] = usestate(\[]); 8&#x9; 9 useeffect(() => { 10 const fetchimages = async () => { 11 let query = new parse query('gallery'); 12 const results = await query find(); 13 setimages(results); 14 }; 15 16 fetchimages(); 17 }, \[]); 18&#x9; 19 return ( 20 \<flatlist 21 style={styles container} 22 contentcontainerstyle={styles listcontent} 23 data={images} 24 horizontal={false} 25 numcolumns={3} 26 listemptycomponent={() => \<text>no images uploaded \</text>} 27 renderitem={({item}) => 28 \<image source={ {uri item get('picture') url()} } style={styles imageitem}/> 29 )} 30 keyextractor={(item) => item id} 31 />); 32 }; 33&#x9; 34 const styles = stylesheet create({ 35 container { 36 flex 1, 37 backgroundcolor '#f5f5f5', 38 }, 39 listcontent { 40 justifycontent 'center', 41 alignitems 'center', 42 }, 43 imageitem { 44 width 100, 45 height 100, 46 resizemode 'cover', 47 marginhorizontal 5, 48 marginvertical 5, 49 }, 50 }); 51&#x9; 52 export default gallery; 上記のコンポーネントは、 useeffect useeffect フックを使用して、 gallery gallery オブジェクトにアップロードされた画像をクエリします。レンダリングが完了したら、次に、コンポーネントをあなたの app js app js に追加する必要があります。 1 // other imports 2 import uploadimage from ' /uploadimage'; 3 import gallery from ' /gallery'; 4&#x9; 5 const app = () => { 6 return ( 7 \<safeareaview style={styles container}> 8 \<uploadimage/> 9 \<gallery/> 10 \</safeareaview> 11 ); 12 } アプリを実行すると、アップロードされた画像のリストがこのように表示されるはずです 5 完了！ この時点で、あなたはback4appに最初の画像をアップロードし、react nativeアプリケーションに表示しました。