react本地图像裁剪选择器不显示图像

Question

我的图像选取器可以从图库中选择图像，但无法在应用程序上显示图像，我尝试了很多方法，并重新查看了我的代码，但我不确定出了什么问题。有人能告诉我出了什么问题吗？这是我的反应和选择版本：

"react native image crop picker"："0.37.2〃；，"react native"："0.67.1〃；，

import { Alert, Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, SafeAreaView, TextInput} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
const Imagepick = ({navigation}) => {
const [image, setImage] = useState(null)
const [images, setImages] = useState(null)
const pickSingle = (cropit, circular = false, mediaType) => {
ImagePicker.openPicker({
width: 500,
height: 500,
cropping: cropit,
cropperCircleOverlay: circular,
sortOrder: 'none',
compressImageMaxWidth: 1000,
compressImageMaxHeight: 1000,
compressImageQuality: 1,
compressVideoPreset: 'MediumQuality',
includeExif: true,
cropperStatusBarColor: 'white',
cropperToolbarColor: 'white',
cropperActiveWidgetColor: 'white',
cropperToolbarWidgetColor: '#3498DB',
})
.then((image) => {
console.log('received image', image);
setImage({
uri: image.path,
width: image.width,
height: image.height,
mime: image.mime,
})
setImage(null);
})
.catch((e) => {
console.log(e);
Alert.alert(e.message ? e.message : e);
});
}

const renderAsset = (image) =>  {
return renderImage(image);
}
const renderImage = (image) => {
return (
<Image
style={{ width: 300, height: 300, resizeMode: 'contain' }}
source={image}
/>
);
}

return (
<View style={styles.container}>
{image ? renderAsset(image) : null}
{images
? images.map((i) => (
<View key={i.uri}>{this.renderAsset(i)}</View>
))
: null}

<TouchableOpacity onPress={() => pickSingle(false)} style={styles.button}>
<Text style={styles.text}>Select Single</Text>
</TouchableOpacity>      
</View>
)
}
export {Imagepick}

Answer 1

这是因为您在设置其值后将图像设置为null

.then((image) => {
console.log('received image', image);
setImage({
uri: image.path,
width: image.width,
height: image.height,
mime: image.mime,
})
// setImage(null); //remove this line
})

您也在传递图像源中的全部数据。相反，只需像这个一样传递uri

const renderImage = (image) => {
return (
<Image
style={{ width: 300, height: 300, resizeMode: 'contain' }}
source={{uri:image.uri}}
/>
);
}