Liquidsのロゴ Liquids

0

カメラロールから写真の選択【Expo】

React Native
Expo

Expo SDKからカメロールを開き、写真を選択する方法を紹介する。

Expo SDKでカメラロールから写真を選択するにはexpo-image-pickerを使用します。

必要なパッケージをインストールする。

npx expo install expo-image-picker

カメラロールを開くにはユーザーから許可を得る必要があり、許可を得ることができた後にカメラロールを開くという順序をとります。

expo-image-pickerでカメラロールへの許可はuseMediaLibraryPermissions、カメラロールを開くのはlaunchImageLibraryAsyncを使用します。

useMediaLibraryPermissions()では、カメラロールへの許可状態と、許可を要求するための関数を得ることができます。

const [ mediaPermission, requestMediaPermission ] = useMediaLibraryPermissions();

launchImageLibraryAsyncで、カメラロールを開き、画像を選択します。
返り値として選択した画像または動画の情報を得ることができます。

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

上記で説明したuseMediaLibraryPermissionslaunchImageLibraryAsyncを使用してカメラロールから画像を選択するコード例を紹介します。

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',
  },
});
Liquidsのロゴ Liquids

Liquidsは誰でも投稿・編集ができる技術Wikiコミュニティ📝です。

あなたもLiquidsで技術Wikiを
書いてみませんか?