我是React Native的新手,我试图在我的应用程序中显示来自Gallery的图像。从图库中选取图片后,图片不会显示在应用程序上,并且按钮(即TouchOpacity)和后退导航按钮也将停止工作。请帮我解决这个问题。
Android 运行正常。但是iOS正在做奇怪的事情。
这是我的代码:
import React from 'react';
import ImagePicker from 'react-native-image-picker';
import {
StyleSheet,
View,
TextInput,
Image,
Text,
TouchableOpacity,
Alert,
} from 'react-native';
export default class AddNewProductPage extends React.Component {
static navigationOptions = {
title: 'Add Product',
};
constructor(props){
super(props)
this.state = {
filepath: {
data: '',
uri: ''
},
}
}
_showImagePickerOptions(titleVal, messageVal) {
Alert.alert(
titleVal,
messageVal,
[
{
text: "Camera",
onPress: () => console.log("Camera pressed")
},
{
text: "Photo Gallery",
onPress: () => console.log("Photo Gallery pressed"),
},
{
text: "Cancel", onPress: () => console.log("Cancel pressed..."),
style: "cancel"
}
],
{ cancelable: false }
);
}
_handleSignUp() {
this._showImagePickerOptions("Upload Product Photo", "Please upload product photo using below options")
}
render() {
const {navigate} = this.props.navigation;
return (
<View>
<View style={{marginTop: 20}} >
<Text style={styles.titleTextStyle}>
PRODUCT PHOTO
</Text>
</View>
<View style={{flexDirection: 'row', borderRadius: 18, borderColor: '#d8d8d8', borderWidth:1, height: 150, marginLeft: 18, marginRight: 18, marginTop: 10}}>
<TouchableOpacity onPress={() => this.chooseImage()} style={{height: 150, marginLeft: 0, marginRight: 0}}>
{this.renderFileData()}
</TouchableOpacity>
</View>
</View>
);
}
chooseImage = () => {
let options = {
title: 'Select Image',
// customButtons: [
// { name: 'customOptionKey', title: 'Choose Photo from Custom Option' },
// ],
storageOptions: {
skipBackup: true,
path: 'images',
},
};
ImagePicker.showImagePicker(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 if (response.customButton) {
console.log('User tapped custom button: ', response.customButton);
alert(response.customButton);
} else {
const source = { uri: response.uri };
// You can also display the image using data:
// const source = { uri: 'data:image/jpeg;base64,' + response.data };
// alert(JSON.stringify(response));s
console.log('response', JSON.stringify(response));
this.setState({
filePath: response,
fileData: response.data,
fileUri: response.uri
});
}
});
}
renderFileData() {
if (this.state.fileData) {
return <Image source={{ uri: 'data:image/jpeg;base64,' + this.state.fileData }}
style={styles.images}
/>
} else {
return <Image source={require('./Images/mail_icon.png')}
style={styles.images}
/>
}
}
}
const styles = StyleSheet.create({
image_container: {
flex: 1,
// remove width and height to override fixed static size
width: null,
height: null,
},
imageIcons: {
left: 11,
top: 14,
},
textInputContainer: {
flexDirection:'row',
padding: 0,
marginLeft: 18,
marginRight: 18,
marginTop: 14,
height: 42,
},
txtInput: {
flex:1,
height:42,
fontSize: 18,
},
titleTextStyle: {
textAlign: "left",
fontSize: 14,
fontWeight: '500',
color: '#161616',
marginLeft: 18,
},
images: {
width: 150,
height: 150,
borderColor: 'black',
borderWidth: 1,
marginHorizontal: 3
},
});
我正在为此实现 react-native-image-picker 。