React Native(Expo)でカメラロールから写真を選択してみる

JavaScript

React Native(Expo)でカメラロールを使うには expo-image-picker を使います。

npx expo install expo-image-picker

カメラロールを開くための前提知識

カメラロールを開くステップは

STEP1 : 許可を取得
STEP2 : カメラロールを開く

です。

expo-image-picker の中でも今回はカメラロールから写真の情報を取得する最低限のものを使っていきます。

使うものは

  • useMediaLibraryPermissions
  • launchImageLibraryAsync

です。

useMediaLibraryPermissionsはカメラロールの許可に関するフックです。
mediaPermissionは許可状態を表し、requestMediaPermissionは許可を申請するために使います。

const [ mediaPermission, requestMediaPermission ] = useMediaLibraryPermissions();

ちなみに、mediaPermissionにどのような値が入るかは下のドキュメントを見てみてください

ImagePicker - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
docs.expo.dev

次に launchImageLibraryAsync ですが、これはカメラロールを開き、選択された画像か動画の情報を返してくれる関数です。

let data = await launchImageLibraryAsync()
// data には選択した画像か動画の情報が格納される

返ってくる情報に関してはこちらを見てください

ImagePicker - Expo Documentation
Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.
docs.expo.dev

カメラロールで画像を選択するコードまとめ

カメラロールを開いて、選択した画像を表示する最低限？のコードを書いてみました

import { useState } from 'react';
import { Button, StyleSheet, Image, View } from 'react-native';
import { launchImageLibraryAsync, useMediaLibraryPermissions } from 'expo-image-picker';

export default function App() {
  const [mediaPermission, requestMediaPermission] = useMediaLibraryPermissions();

  const [imageData, setImageData] = useState(null)
  
  return (
    <View style={styles.container}>      
      {
        imageData===null ?

        <Button
        title='カメラロールを開く'
        onPress={async ()=>{
          if(mediaPermission.granted){
            setImageData(await launchImageLibraryAsync())
          }
          else if(mediaPermission.canAskAgain){
            requestMediaPermission()
          }
        }}
        /> :
        
        <Image
        source={{
          uri: imageData.uri
        }}
        resizeMode='contain'
        style={{
          width: '100%',
          height: '100%'
        }}
        />
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

コメント