【ReactNative+TypeScript開発】画像をアップロードする機能を作る(前編)

こんにちは、今日は、React Nativeのアプリ上で、画像をアップロードする機能を実装してみます。

Contents

前提

  • React Native (TypeScript) + Expo

画像アップロードの実装を効率化するライブラリを選ぶ

と、最初に迷ったのは、この機能のために使用するライブラリ。React Nativeでは、調べた限り以下の3つが有名のようでした。

react-native-image-pickerがもっともStarを集めていて人気のようでしたが、今回最終的に私はexpo-image-pickerを利用することにしました。理由は、実装が一番簡単だったから。react-native-image-pickerは、Github上のRead meに簡単な説明がありますが、すぐに動くコードのサンプルなどがなく、ネット記事を探しても古いバージョンのモジュールの記事(バージョンが上がって使えなくなった機能もあるようで、あまり参考にできず)だったりと情報集めに挫折しました・・・。

ご参考までに、各ライブラリのGithub統計情報を以下に載せておきます。

react-native-image-picker

https://github.com/react-native-image-picker/react-native-image-picker

react-native-image-crop-picker

https://github.com/ivpusic/react-native-image-crop-picker

expo-image-picker

https://github.com/expo/expo/tree/master/packages/expo-image-picker

*こちらは、Expoのスター数しか確認できないので、ご参考程度。

こんな便利なチェッカーが・・・

と、調べていると、こんなツールを見つけました。書くライブラリの統計情報が一目で分かって良い!

https://openbase.com/categories/js/best-react-native-image-picker-libraries?orderBy=RECOMMENDED&

フォトライブラリの画像を選択できるようにする

それでは、expo-image-pickerを使って、まずはフォトライブラリの画像選択機能を実装していきます。

参考にした記事:

https://qiita.com/yukihigasi/items/1de0a5cbdebe98b16418

yarn add expo-image-picker

・・・・

[番外編] ReactNativeをもっと学ぶなら・・・

React Nativeをもっとちゃんと学びたい!という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・!

この記事を気に入っていただけたらシェアをお願いします!
ABOUT US
Yuu113
初めまして。ゆうたろうと申します。 兵庫県出身、東京でシステムエンジニアをしております。現在は主にデータ分析、機械学習を活用してビジネスモデリングに取り組んでいます。 日々学んだことや経験したことを整理していきたいと思い、ブログを始めました。旅行、カメラ、IT技術、江戸文化が大好きですので、これらについても記事にしていきたいと思っています。