宝宝秀项目学习（五）
2024-04-24 08:28:51
我的账户页面设计
1、react-native-image-picker组件的使用，该组件主要用于调用系统相册和照相机，更换当前的图片。本例中为更换用户头像
2、react-native-progress组件的使用，该组件提供饼状的和条形状的进度条，显示当前进度。本例中用于显示上传头像到图床的进度
3、cloudinary云端图片处理工具平台的使用。本例中主要使用到的是将头像上传到此云端。
4、注销用户信息功能的添加，此例中会销毁存储在本地的用户信息。
代码：
let pickPhotoOptions = { //组件react-native-image-picker的配置
title: '选择头像',cancelButtonTitle:'取消',takePhotoButtonTitle:'拍照',chooseFromLibraryButtonTitle:'从相册...',customButtons: [{name: '自定义', title: '自定义的Button'},],quality:0.8, //图片的品质
storageOptions: {skipBackup: true,path: 'images'
}
};const CLOUDINARY = {//cloudinary云端图片处理工具平台，
// 是一个基于云端的图片处理、管理、存储、美化于一体的平台，同时还集成了图片抓取功能，提供API接口
cloud_name: 'dgwmifbnp',api_key: '533424975835423',api_secret: 'cVCod7YFesQ4isD2ac2ANz8VUIk',base:'http://res.cloudinary.com/dgwmifbnp',image:'https://api.cloudinary.com/v1_1/dgwmifbnp/image/upload',video:'https://api.cloudinary.com/v1_1/dgwmifbnp/video/upload',audio:'https://api.cloudinary.com/v1_1/dgwmifbnp/audio/upload',
}
export default class Account extends Component {constructor(props){super(props)this.state={logined:false, //标记是否已经登录，初始状态是没有登录
user:'', //用户信息也是個對象
avatarProgress:0, //图片上传进度
avatarUploading:false, //是否正在上传头像
animationType:'fade',modalVisible:false, //模态场景是否可见
transparent:false, //是否透明显示
}}componentDidMount(){this._asyncGetAppStatus(); //组件已加载完就从本地获取用户信息
}_editAccountBtn = () => {this.setState({ modalVisible: true });}_setModalVisible = (visible)=> {this.setState({ modalVisible: visible });}_backfromModal = ()=> {this.setState({ modalVisible: false });}_startShow = ()=>{}render() {let user = this.state.user
if(!user){return <View/>}return (<View style={styles.container}><View style = {styles.topBar}><Text style = {styles.topBarText}>我的账户</Text><Text style = {styles.topBarEdit} onPress={this._editAccountBtn}>编辑</Text></View>{/*如果有用户的头像，则显示用户的头像。如果没有就显示一个添加用户像的图标，三元运算符控制*/}{user.avatar ?<TouchableOpacity style = {styles.avatarContainer} onPress = {this._pickPhoto}><Image style = {styles.avatarContainer} source={{uri:user.avatar}}><View style = {styles.avatarBox}>{/*如果正在上传就显示一个饼状的进度条，如果不在上传就显示一个avatar*/}{this.state.avatarUploading ?<Progress.Circle //饼状的显示进度的组件
size={45}
progress={this.state.avatarProgress}
showsText={true} //就是显示的进度的百分比
color={'#ee735d'}
/>:<Image style = {styles.avatar} source={{uri:user.avatar}} />}</View><Text style = {styles.avatarText}>点击这里更换头像</Text></Image></TouchableOpacity>:<View style = {styles.avatarContainer}><Text style = {styles.avatarText}>添加用户头像</Text><TouchableOpacity style = {styles.avatarBox} onPress = {this._pickPhoto}>{/*如果正在上传就显示一个饼状的进度条，如果不在上传就显示一个Icon*/}{this.state.avatarUploading ?<Progress.Circle
size={45}
progress={this.state.avatarProgress}
showsText={true}
color={'#ee735d'}
/>:<Icon
name='md-add'
size={45}
style={styles.plusIcon}
/>}</TouchableOpacity></View>}<AccountModal changeUserInfo={this._changeUserInfo()} /><View style={styles.sendBtn}><Text style={styles.btnText} onPress={this._logOut}>退出登录</Text></View></View>);}//点击更换头像
_pickPhoto = ()=>{//response 是回调
ImagePicker.showImagePicker(pickPhotoOptions, (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);}else { //选择照片
// let source = response.uri
//当我们需要上传图片的时候需要用到这种图片的64进制格式
let source = 'data:image/jpeg;base64,' + response.data //data是基于base64编码的图片的字节流
// source 就是拿到的本地的图片资源，开始上传图片服务器， 图床
//在自己的服务器中生成签名
let timestamp = Date.now();let tags = 'app,avatar';let folder = 'avatar';let signatureUrl = config.apis.base+config.apis.signature
let accessToken = this.state.user.accessToken
request.post(signatureUrl,{accessToken:accessToken,tags:tags,folder:folder,timestamp:timestamp,}).then((data)=>{if(data && data.success){//data.data就是服务器生成的签名
console.log('data.data签名'+data.data)// 自己在本地生成签名（模拟的是服务器生成的签名）
let signature = 'folder='+folder+'&tags='+tags+'×tamp='+timestamp+CLOUDINARY.api_secret
// sha1加密
signature = sha1(signature);//开始post到图床
console.log('模拟服务器生成的sha1'+signature);// post到图床了
let body = new FormData();//通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对
body.append('folder',folder)body.append('tags',tags)body.append('tags',tags)body.append('api_key',CLOUDINARY.api_key)body.append('signature',signature)body.append('rosource_type','image')body.append('file',source)body.append('timestamp',timestamp)//_uploadToCloud用的就是XMLHttpRequest请求，将图片资源上传到cloudinary云
this._uploadToCloud(body)}}).catch((err)=>{console.log(err)})}});}//上传到云
_uploadToCloud = (body) => {let uploadRequest = new XMLHttpRequest()let url = CLOUDINARY.image
uploadRequest.open('POST',url)uploadRequest.send(body) //使用XMLHttpRequest发送post请求，将参数body发送到服务器
this.setState({avatarUploading:true,avatarProgress:0
})uploadRequest.onload = ()=>{ //当请求成功完成时触发，此时xhr.readystate=4
if(uploadRequest.status !== 200){return alert('请求失败'+uploadRequest.responseText)}if(!uploadRequest.responseText){return alert('返回了一个空的消息体')}let response;let resposeText;try{resposeText = uploadRequest.responseText
console.log('图床返回的内容'+resposeText)response = JSON.parse(resposeText)//JSON字符串解析成JSON对象
}catch (err){console.log('responseText解析失败'+err)}if(response && response.public_id){ //到这里上传完毕,即有响应反回了响应的内容
//更新我们的视图
let user = this.state.user;//https://res.cloudinary.com/dgwmifbnp/image/upload/v1503970172/avatar/podsijtzsgtqh60c6wue.jpg
//根据图床的响应拼接图片上传后的地址
let cloudUrl = CLOUDINARY.base + '/image/upload/v'+response.version + '/'+ response.public_id + '.' + response.formatconsole.log('上传图床后的地址'+cloudUrl)user.avatar = cloudUrl
this.setState({user:user,avatarProgress:0,avatarUploading:false
})//更新本地的user
this._asyncUpdateUser();}}// 上传触发的是xhr.upload对象的 onprogress事件
// 下载触发的是xhr对象的onprogress事件
/**
* 获取上传进度
*/
if(uploadRequest.upload){uploadRequest.upload.onprogress = (event) => {if(event.lengthComputable){//lengthComputable判断长度是否可以计算
//percent是上传进度
let percent = Number((event.loaded /event.total).toFixed(2))//toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。
this.setState({avatarProgress:percent
})}}}}//更新本地的用户信息
_asyncUpdateUser = ()=> {// 更新用户信息：自己的服务器 本地
let user = this.state.user
console.log('开始同步用户信息了'+ JSON.stringify((user)))AsyncStorage.setItem('user',JSON.stringify(user)) //存储到本地的必须是字符串
.then(()=>{console.log('同步到本地成功')}).catch((err)=>{console.log('同步到本地出错'+err)})// 更新自己的服务器
let url = config.apis.base+config.apis.update
request.post(url,user).then((data)=>{if(data && data.success){console.log('同步到自己的服务器成功了')this._backfromModal(); //配合在modal中修改用户信息用的
}}).catch((err)=>{console.log('同步到自己的服务器出错'+err)})}//从本地获取用户信息
_asyncGetAppStatus = ()=> {AsyncStorage.getItem('user') //异步获取本地存储中的用户信息（根据key值获取value值）
.then((data)=>{ //data是获取本地数据成功后的回调数据
let user;let newState = {}; //定义一个空对象
if(data){user = JSON.parse(data); //JSON.parse()方法用来解析json字符串成json对象
//存在本地是json字符串，从服务器获取到的是json对象
}if(user && user.accesssToken){newState.logined = true;newState.user = user;//就相当于 newState = {logined:true,user:user}
}else{newState.loaded = false;}this.setState(newState);}).catch((err) =>{alert('AsyncStorage err'+err)})}//改变用户信息，根据键来改变值得内容，user是一个对象，所以可以通过user[key]来指向key的value
_changeUserInfo = (key,value)=> {// console.log('key::'+key+'--value::'+value)
let user = this.state.user
user[key] = value;console.log('改变后'+JSON.stringify(user))this.setState({user:user
})}_saveUserInfo = () => {this._asyncUpdateUser();}_logOut = () => {//清空本地的用户存储，该整个APP的额登录状态
alert('退出登录')this.props.logOut();}
}
宝宝秀项目学习（五）相关推荐
- 医学计算机应用基础项目五思维导图,【羊五小•项目学习】“一千零一夜+思维导图”学习成果发布会（五年级）...
原标题:[羊五小•项目学习]"一千零一夜+思维导图"学习成果发布会(五年级) 在"思维导图"的世界里遇到最美好的自己 题记 学校借助美国项目学习理念,围绕&qu ...
- 韦东山 数码相框 项目学习（五）libjpeg-turbo的移植
韦东山 数码相框 项目学习(五)libjpeg-turbo的移植 效果图 能够在100ask STM32MP157上显示一张JPG图片 一.下载源码 首先去libjpeg-turbo官网下载源码,这里 ...
- 项目学习 - 收藏集 - 掘金
一款开源的视频直播项目 --EvilsLive - Android - 掘金 项目介绍 EvilsLive 是一个视频直播件开发工具包(SDK), 目前只支持 Android, 主要负责视频直播的采集 ...
- 延大计算机文化基础课程作业,基于项目学习的大学《计算机文化基础课》教学设计...
摘要: 从大学教育看,计算机文化已经愈来愈多地融入了各专业科研和专业课的教学过程之中.计算机教学已成为素质教育的必要组成部分,良好的信息素养是当代大学生可持续发展的重要基础平台.大学计算机文化基础课程 ...
- Docker学习五：Docker 数据管理
前言 本次学习来自于datawhale组队学习: 教程地址为: https://github.com/datawhalechina/team-learning-program/tree/master/ ...
- 新生儿婴幼儿宝宝护理知识学习
新生儿婴幼儿宝宝护理知识学习 新生儿护理是指新生儿卧室应安静清洁,布置优雅,阳光充足.有条件的话,宝宝室内温度可控制在21度-24度之间,湿度为60度-65度左右. 尽量保持安静的环境,当晚上喂奶或换 ...
- Hbase深入学习(五) 命令及查看状态
Hbase深入学习(五) ―― 命令及查看状态 HBase是Apache Hadoop中的一个子项目,Hbase依托于Hadoop的HDFS作为最基本存储基础单元,通过使用hadoop的DFS工具就可 ...
- VUE项目学习系列博文
VUE项目学习系列博文 1.VUE2.0项目学习 (1)VUE项目学习(一):搭建VUE前端项目 (2)VUE项目学习(二):学习项目文件结构 (3)VUE项目学习(三):win10版nginx部署v ...
- 客快物流大数据项目学习框架
文章目录 客快物流大数据项目学习框架 前言 一.项目简介 二.功能介绍 三.项目背景 四.服务器资源规划 五.技术亮点及价值 六.智慧物流大数据平台 客快物流大数据项目学习框架 前言 利用框架的力量, ...
最新文章
- docker image 实践之容器化 ganglia
- [LeetCode] 3. Longest Substring Without Repeating Characters 题解
- Winform 水印TextBox
- webpack 分离css html,【已解决】ReactJS中Webpack打包时分离css
- 青少年编程python等级考试题目_2020年全国青少年软件编程(python）等级考试试卷doc下载...
- sqlserver2010教程百度云盘_郝斌SqlServer2005自学全集视频教程
- JUnit4 Note (尚学堂马士兵)
- imp oracle reschema_oracle中imp命令详解(导入数据库)
- android流光字体实现,【流光算法代码实现】Demo
- Android 拨打电话
- opencv图像处理学习（六十八）——肤色检测
- 【通讯术语】VoLTE
- 如何利用Python词云和wordart可视化工具对朋友圈数据进行可视化展示
- 试玩wordpress成功－－oNthEWay
- HBuilderX打包的app腾讯手机管家报毒问题,打包总是提示报毒
- 分享一个c++连线小游戏
- TeamViewer 帐户的“信任设备”
- SQL 招聘网站岗位数据分析
- threejs实现VR看房材质贴图
- CVX 工具箱（安装及用户指南）