ImagePicker未显示所选图像

Question

我正在使用react本机图像选择器库中的launchImageLibrary函数。我可以从我的库中选择图像，但所选的图像不会显示在我的应用程序上，但它显示控制台中的uri已经更改。这是我的一段代码。

chooseImage = () => {
let options = {
maxWidth: 300,
maxHeight: 300,
storageOptions: {
skipBackup: true,
path: 'images',
cameraRoll: true,
},
};
launchImageLibrary(options, response => {
console.log('Response = ', response);
if (response.didCancel) {
console.log('User cancelled image picker');
} else if (response.error) {
console.log('ImagePicker Error: ', response.error);
} else {
this.setState({
fileUri: response.assets[0].uri,
});
console.log(this.state.fileUri);
}
});

<TouchableOpacity
activeOpacity={0.8}
onPress={this.chooseImage}
style={{
width: 300,
height: 300,
backgroundColor: COLORS.dark,
alignItems: 'center',
justifyContent: 'center',
}}>
{this.state.fileUri ? (
<Image source={{ uri: this.state.fileUri }} />
) : (
<Icon name="add-a-photo" size={40} color={COLORS.inactive} />
)}
</TouchableOpacity>

Answer 1

您必须为图像提供宽度和高度样式。

chooseImage = (type) => {
let options = {
mediaType: type,
};
launchImageLibrary(options, (response) => {
if (response.didCancel) {
alert('User cancelled camera picker');
} else if (response.errorCode == 'camera_unavailable') {
alert('Camera not available on device');
} else if (response.errorCode == 'permission') {
alert('Permission not satisfied');
} else if (response.errorCode == 'others') {
alert(response.errorMessage);
}else{
console.log('uri -> ', response.uri);
this.setState({
imageUri: response.uri,
})
}
});
};

render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => this.chooseImage('photo')}>
<Icon  name="images-outline" size={25}  />
<Text >Library </Text>
</TouchableOpacity>

<View style={{marginTop: 50}}>
{this.state.imageUri ? (
<Image source={{ uri: this.state.imageUri }} style={{width: 80, height: 80}} />
) : (
<Icon name="add-circle-outline" size={40} />
)}
</View>

</View>
);
}

对于react本地图像选择器的v4

launchImageLibrary(options, (response) => {
if (response.didCancel) {
alert('User cancelled camera picker');
} else if (response.errorCode == 'camera_unavailable') {
alert('Camera not available on device');
} else if (response.errorCode == 'permission') {
alert('Permission not satisfied');
} else if (response.errorCode == 'others') {
alert(response.errorMessage);
}else{
response.assets.map((asset) => {
console.log('uri -> ', asset.uri);
this.setState({
imageUri: asset.uri,
})
});
}
});