ImagePicker

安裝ImagePicker

expo install expo-image-picker

取得Camera圖庫的權限

import React, {useEffect} from 'react';
import * as ImagePicker from 'expo-image-picker';

export default function App(){
  const requestPermission = async => {
	  const result = await ImagePicker.requestCameraRollPermissionsAsync();
	  if(!result.granted) alert('需要存取攝像機照片的權限');
  }
  useEffect(()=>{
	  requestPermission();
  },[]);


  return <View></View>;
}

安裝Expo Permissions

• 也可以用打包好的Permissions來管理需要使用者回應的權限

expo install expo-permissions

要求權限

import React, {useEffect} from 'react';
import * as ImagePicker from 'expo-image-picker';
import * as Permissions from'expo-permissions';

export default function App(){
  const requestPermission = async => {
    const result = await Permissions.askAsync(Permissions.CAMERA_ROLL);
    if(!result.granted) alert('需要存取攝像機照片的權限');
  }
  useEffect(()=>{
    requestPermission();
  },[]);

  return <View></View>;
}

顯示取得的圖片

import React, {useState, useEffect} from 'react';
import * as ImagePicker from 'expo-image-picker';

export default function App(){
  const [imageUri, setImageUri] = useState();
  const requestPermission = async => {
    const result = await ImagePicker.requestCameraRollPermissionsAsync();
    if(!result.granted) alert('需要存取攝像機照片的權限');
  }

  useEffect(()=>{requestPermission();},[]);	//只執行一次

  //function to selectImage
  const selectImage = async () => {
    try {
      const result = await ImagePicker.launchImageLibraryAsync();
        if(!result.cancelled){
          setImageUrl(result.uri);
        }
    } catch(error) {
      console.log('Error reading image: ',error);
    }
  }

  return <View>
    <Button title="Select Image" onPress={selectImage} />
    <Image source={{uri: imageUri}} style={{width:200, height:200}} />
  </View>;
}