react-native 开发笔记 (三)

前端之家收集整理的这篇文章主要介绍了react-native 开发笔记 (三)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

react-native 开发笔记

es7 async

react native默认编译配置可以编译一部分es7语法的,async await是其中的一种。使用起来自然是很简单,和koa 1.x 基本一致,没有区别。

多个路由页面之间的通信

有这样子一种场景

  1. 用户进来,显示登录首页

  2. 用户点击去登录,进入登录页面

  3. 登录成功,跳转回首页,这时候要重新加载首页的信息,那怎么通知首页更新呢

react-native自带了RCTDeviceEventEmitter模块,用来做事件通信的。这个模块的设计思想和nodejs的event模块类似。

需要注意的是,此模块只需要引入一次放置到一个文件里,然后其他模块通通引入这个文件,才可以通信。不能每个文件都引入这个模块,那样子就是单独的事件实例,无法进行通信。

文件上传

比如用户需要修改头像,这时候就会用到摄像头和选择图片,社区有现成的模块可以使用
使用到的组件:

react-native-image-picker:调用摄像头和选取图片
react-native-image-resizer:图片压缩模块

get到一个技能点就是,formData的使用。是的react-native里面也集成了这个方法

formData可以附加文件,以前在web上,我只是使用了file获取文件,直接append进去。

今天得到一个新技能

let formData = new FormData()
formData.append('avatar',{uri: resizedImagePath,name: response.fileName,type: 'multipart/form-data'})

其实append的第二个参数就是一个File实例,根据file.type可以决定很多东西

如果是multipart/form-data,uri就可以是一个图片路径
如果是 image/jpeg,uri可以是一个图片的base64编码字符串

可能还有一些其他的功能,待研究

猜你在找的React相关文章