React Nativeでカメラロールを一覧表示して、選択した画像をアップロードする

React Nativeでカメラロールを一覧表示して、選択した画像をアップロードする

React Nativeでカメラロールを一覧表示して、選択した画像をアップロードする

React Nativeでカメラロールを一覧表示して、選択した画像をアップロードする へのコメントはまだありません

はじめに

React Nativeでカメラロールをいじる方法がわからなかったので調べました。
ついでに、一覧表示した画像から、複数ファイルを選択し、axiosでアップロードするところまでを紹介します。
サーバーサイドはRailsで受け取るソースをのっけておきます。

最後に全ソースを貼り付けます。
説明は部分部分かいつまんで行います。

CameraRollから画像一覧取得

カメラロールをインポートして、

componentDidMountで一覧を取得し、Stateにセットします。
imageSelは画像が選択されたかどうかのフラグです。

画像一覧表示

renderメソッドで一覧表示します。
画像をTouchableHighlightタグの中にセットします。画像が選択されているか否かを selViewという変数にセットして、
選択中の画像にチェックがつくようにします。

画像が選択されたら、チェックマークをつける

画像がクリックされたら、ステートのフラグをたてかえて、チェックマークをつけます。

cameraroll-1

選択された画像をaxiosでアップロード

注意すべき点は、data.appendするときに uriと name と typeの3つをセットすることです。

アップロードされた画像を保存するサーバーサイド(Rails)のソース

全ソース

以下に全ソースを貼り付けておきます。


About the author:

Related Posts

Leave a comment

Back to Top