iT邦幫忙

0

解決 LOG error: [Error: MEDIA_LIBRARY permission is required to do this operation.]

Lcw 2024-04-07 01:43:27638 瀏覽
  • 分享至 

  • xImage

我在使用react native的Camera模組的時候,出現了 LOG error: [Error: MEDIA_LIBRARY permission is required to do this operation.]的訊息,上網查到的方法也都沒法改善
程式碼如下:
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import React,{useState,useEffect,useRef} from 'react';
import { SafeAreaView,TouchableOpacity,Modal,Image,Alert } from 'react-native';
import { Camera } from 'expo-camera';
import { CameraType } from 'expo-camera';
import * as Location from 'expo-location';
import { FontAwesome,Ionicons } from '@expo/vector-icons';

import * as MediaLibrary from 'expo-media-library';

import * as Permissions from 'expo-permissions';

export default function App() {
const camRef=useRef(null);
const [type,setType]=useState(Camera.Constants.Type.back);
const [hasPermission,setHasPermission]=useState(null);
const[cpaturePic,setCpaturePic]=useState(null);
const [open,setOpen]=useState(null);

// 拍照
const takePicture=async()=>{
if(camRef){
const data=await camRef.current.takePictureAsync();
// console.log(data);
setCpaturePic(data.uri);
setOpen(true);
}
}

// 儲存照片
const savePicture=async()=>{
const asset=MediaLibrary.createAssetAsync(cpaturePic)
.then(()=>{
alert('照片存檔成功!')
setOpen(false)
}).catch((e)=>{
console.log('error:',e)
})
}

useEffect(() => {
(async () => {
const { status } = await Camera.requestCameraPermissionsAsync();
setHasPermission(status === "granted")
})();

(async () => {
  // const { status } = await Permissions.askAsync(Permissions.MEDIA_LIBRARY)
  const { status } = await Location.requestForegroundPermissionsAsync();
  console.log("status= ", status)
  setHasPermission(status === "granted")

})();

}, [])

if (hasPermission===null){
return
}
else if (hasPermission===false){
return 沒有照相機的使用權限!!!
}

return(


<View style={{flex:1,backgroundColor:'transparent',flexDirection:'row'}}>
<TouchableOpacity style={{
position:'absolute',
bottom:20,
left:20,
}}
onPress={()=>{
setType(type===Camera.Constants.Type.back
? Camera.Constants.Type.front
: Camera.Constants.Type.back
);
}}
>
{/* 前後鏡頭交換 的圖示按鈕 */}

    </View>
  </Camera>

  <TouchableOpacity
    style={styles.button}
    onPress={takePicture}
  >
    <FontAwesome
      name='camera'
      size={25}
      color="#fff"
    />
  </TouchableOpacity>

  {/* 展示照片區 */}
  {cpaturePic &&
    <Modal
      animationType='slide'
      transparent={false}
      visible={open}
    >
      <View style={{flex:1,justifyContent:'center',alignItems:'center',margin:20}}>
        <View style={{margin:10,flexDirection:'row'}}>
          {/* 關閉的圖示按鈕 */}
          <TouchableOpacity
            style={{margin:10}}
            onPress={()=>setOpen(false)}
          >
            <FontAwesome 
              name="window-close"
              size={50}
              color='red'
            />
          </TouchableOpacity>
          {/* 存檔的圖示按鈕 */}
          <TouchableOpacity
            style={{margin:10}}
            onPress={savePicture}  
          >
            <FontAwesome
              name='upload'
              size={50}
              color="#121212"
            />
          </TouchableOpacity>
        </View>
        {/* 在畫面中秀出照片 */}
        <Image
          style={{
            width:'100%',
            height:450,
            borderRadius:20,
          }}
          source={{uri:cpaturePic}}
        ></Image>
      </View>

    </Modal>
  }
</SafeAreaView>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
button: {
justifyContent: 'center',
alignItems: "center",
backgroundColor: "#121212",
margin: 20,
borderRadius: 10,
height: 50,
},
});

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
YC
iT邦研究生 2 級 ‧ 2024-04-08 16:04:19

首先你的排版很亂,訊息又很少

以下是我的猜測:

  1. 你沒說問題的平臺,所以我先假裝是android
  2. MediaLibrary 是 expo 的外掛
  3. Log的問題是MediaLibrary沒權限,所以我猜是你android沒設定
    綜合以上猜測,你需要確定android設定是否有照文件做

我要發表回答

立即登入回答