我在使用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,
},
});
首先你的排版很亂,訊息又很少
以下是我的猜測: