从react原生图像选择器中选择图像后，不会显示图像

Question

我正在开发一个应用程序，需要从手机摄像头和图库上传图像。相机&画廊并没有显示图像标签内的图像。

这是我的代码

function profile({ route,navigation }) {
const [imageUri, setimageUri] = useState('');

const openCamera = () => {
let options={
storageOptions: {
path: 'images',
mediaType: 'photo',
},
};
launchCamera(options, response => {
console.log("response =", response);
if(response.didCancel){
console.log('user cancelled image picker');
}else if(response.error){
console.log('Image picker Error:', response.error);
}else if(response.customButton){
console.log('User taped cutom button:', response.customButton);
}else{
const source = {uri: 'data: image/jpeg;base64,'+ response.base64 };
setimageUri(source);    
}
});
}

这是图像视图代码

<Image
source={imageUri}
style={{
height: 100,
width: 100,
borderRadius: 100,
borderWidth: 2,
borderColor: 'black',
alignSelf: 'center',
}}
/>  

Answer 1

试试这个，它会帮助你

function profile({ route,navigation }) {
const [imageUri, setimageUri] = useState('');
const openCamera = () => {
let options={
storageOptions: {
path: 'images',
mediaType: 'photo',
},
};
launchCamera(options, response => {
console.log("response =", response);
if(response.didCancel){
console.log('user cancelled image picker');
}else if(response.error){
console.log('Image picker Error:', response.error);
}else if(response.customButton){
console.log('User taped cutom button:', response.customButton);
}else{
setimageUri(response.assets[0].uri);    
}
});
}

<Image
source={{ uri: imageUri }}
style={{
height: 100,
width: 100,
borderRadius: 100,
borderWidth: 2,
borderColor: 'black',
alignSelf: 'center',
}}
/>  

response将为您提供assets阵列，您可以将图像uri访问为response.assets[0].uri。