こんにちは、今日は、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をもっとちゃんと学びたい！という方は、こちらにおすすめコンテンツをまとめましたので、ご参考にしていただければと思います・・！
