ギャラリーまたはカメラから画像を選択することは、ReactNativeを使用してアプリを開発するための最も一般的で基本的なタスクの1つです。どうすればそれができますか？

今日は、デバイスのライブラリから画像を簡単に選択したり、カメラを使用して写真をキャプチャしたりする方法についてお話しします。を紹介しますReact Native Image Picker。

この記事では、画像をアップロードするアプリを開発して、React Native ImagePickerを紹介します。アプリは私たちが写真を選んで表示することを可能にします。

プロジェクトの設定

始める前に、次のコード行を使用して新しいReactNativeプロジェクトを作成する必要があります。

react-native init react_native_image_avatar_picker
cd react_native_image_avatar_picker
npm run ios

次に、React Native Image Pickerライブラリを使用してイメージピッカーコンポーネントを実装します。これは、デバイスライブラリまたはカメラから写真/ビデオを選択できるようにするReactNativeモジュールです。次のコマンドでインストールしましょう。

yarn add react-native-image-picker
cd ios && pod install && cd ..

<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>
<key>NSCameraUsageDescription</key>
<string>The camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>The microphone is accessed for the first time</string>

その後、アプリを実行してすべてが正常であれば、コーディングの準備が整います。

ベースアプリ画面を作成する

基本的な考え方は、ユーザーがデバイスのライブラリから新しい写真をアップロードしたり、カメラを介して写真をキャプチャしたりできるようにするイメージピッカーコンポーネントを構築することです。

まず、ベースアプリの画面を新しい緑色のヘッダーと背景で更新します。ImagePickerHeaderコンポーネントを作成しましょう：

次に、ImagePickerAvatar画像をアップロードできるメインコンポーネントを作成します。

結果は次のとおりです。

デバイスから写真を選ぶ

このチュートリアルでは、カメラを介して写真を選択またはキャプチャする2つの機能を実装します。React Native Modalパッケージを使用してカスタマイズ可能なアニメーションモーダルを使用し、ユーザーに2つのオプションを表示します。このために、それをインストールする必要があります：

yarn add react-native-modal

最後になりましたが、2つの関数を実装する必要があります。

• onImageLibraryPress —ライブラリから画像を選択します
• onCameraPress —カメラを使用して写真を撮る

イメージピッカーアプリのデモをしましょう

すべてのコードを確認したい場合は、Githubへのリンクをご覧ください。

読んでいただきありがとうございます。この作品がお役に立てば幸いです。ハッピーコーディング！

資力