看自己前面标题写的上传头像,实际都没有完成,现在回头看看全都是瞎扯的,只是刚开始用的时候出现的一些问题,现在上一下获取本地相机并且上传图片的代码。
本文参考:https://github.com/react-community/react-native-image-picker
还有这个组件需要配置的东西,可以参考:http://www.cnblogs.com/shaoting/p/6148085.html
图片上传的时候react-native-image-picker这个插件的时候ios上的会出现闪退现象。
可以给大家一个网址,这个网址上已经很清晰的解决了
http://www.jianshu.com/p/977bc5eea1b1
大家可以看这个文章,写的很详细
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Text,
Button,
Dimensions,
Image,
TouchableOpacity
} from 'react-native';
var {width,height} =Dimensions.get('window');
import ImagePicker from 'react-native-image-picker';
var photoOptions={
title:'请选择',
cancelButtonTitle:'取消',
takePhotoButtonTitle:'拍照',
chooseFromLibraryButtonTitle:'选择相册',
quality:0.8,
allowsEditing:true,
noData:false,
storageOptions:{
skipBackup:true,
path:'images'
}
};
class UploadPhoto extends Component {
constructor(props){
super(props);
this.state={
avatarSource:null,
}
}
render() {
return (
<View style={styles.praPhoto}>
<View style={styles.jia}>
<TouchableOpacity onPress={this.openMycamera.bind(this)}>
<Image
source={this.state.avatarSource==null?require('../img/add.png'):this.state.avatarSource}
style={{width:58,height:59,borderRadius:5,}}/>
</TouchableOpacity>
</View>
</View>
);
}
openMycamera=()=>{
var _this = this;
ImagePicker.showImagePicker(photoOptions,(response)=>{
console.log('response'+response);
if(response.didCancel){
return;
}else if(response.error){
console.log('ImagePicker Error:',response.error)
}else if(response.customButton){
console.log('Usr tapped custom button:',response.customButton)
}else {
let source = {uri:response.uri};
this.setState({
avatarSource: source,
});
this.props.changeImg(response.uri)
}
})
}
}
const styles=StyleSheet.create({
praPhoto:{
flexDirection:'row',
paddingTop:17,
},
jia:{
width:60,
height:60,
borderWidth:1,
borderColor:'#f0f0f0',
marginRight:10,
borderRadius:5,
alignItems:'center',
},
});
module.exports=UploadPhoto;
网友评论