react-native 常用的一些插件

最近在做react-native的app,用到的一些好用的插件,在这儿记录一下

由于返回的后台内容是富文本编辑器Quill,返回的的是Delta对象,使用了quill-delta-to-html 插件

https://github.com/nozer/quill-delta-to-html

上传头像,用到了react-native-image-crop-picker,很好用,,需要配置下

react-native-image-crop-picker

https://github.com/react-native-community/react-native-image-picker

  

react-native-image-picker

https://github.com/react-native-community/react-native-image-picker

function uploadImage(url,params){
return new Promise(function (resolve, reject) {
let formData = new FormData();
for (var key in params){
formData.append(key, params[key]);
}
let file = {uri: params.path, type: 'application/octet-stream', name: 'image.jpg'};
formData.append("file", file);
fetch(common_url + url, {
method: 'POST',
headers: {
'Content-Type': 'multipart/form-data;charset=utf-8',
"x-access-token": token,
},
body: formData,
}).then((response) => response.json())
.then((responseData)=> {
console.log('uploadImage', responseData);
resolve(responseData);
})
.catch((err)=> {
console.log('err', err);
reject(err);
});
});

然后redux框架的话,我选择mirror ,流程和redux差不多,但是简化了一些操作,反正挺好用的,详细看文档

https://github.com/mirrorjs/mirror

  轮播类组件的话,用的是 : https://github.com/leecade/react-native-swiper

 图标:

react-native-vector-icons

导航跳转  :    react-navigation

富文本编辑器
react-native-zss-rich-text-editor
大致效果

滑动删除功能组件

react-native-swipeout

视频组件,不过控制界面什么的需要自己去做
react-native-video

https://github.com/react-native-community/react-native-video

  选项卡:   https://github.com/ptomasroos/react-native-scrollable-tab-view

  动画:  https://github.com/oblador/react-native-animatable

表单验证 :  https://github.com/gcanti/tcomb-form-native

滚轮选择器:   https://github.com/beefe/react-native-picker

聊天:  https://github.com/FaridSafi/react-native-gifted-chat

charts类  :  https://github.com/wuxudong/react-native-charts-wrapper

下拉放大:

可滑动的日历组件:   https://github.com/cqm1994617/react-native-myCalendar

毛玻璃效果:  https://github.com/react-native-community/react-native-blur

信息来源: https://segmentfault.com/a/1190000012053486

react-native 常用的一些插件的更多相关文章

  1. React Native常用组件在Android和IOS上的不同

    React Native常用组件在Android和IOS上的不同 一.Text组件在两个平台上的不同表现 1.1 height与fontSize 1.1.1只指定font,不指定height 在这种情 ...

  2. [RN] React Native 常用命令行

    [RN] React Native 常用命令行 1.查看当前版本 react-native --version 或 react-native -v 2.创建指定版本的React Native项目 1) ...

  3. React Native 常用插件案例

    (二).基础入门: 1.React Native For Android环境配置以及第一个实例 2.React Native开发IDE安装及配置 3.React Native应用设备运行(Runnin ...

  4. react native 常用组件汇总

    react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 ...

  5. React Native常用组件之ListView

    1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...

  6. React Native常用组件之ScrollView

    1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...

  7. React Native常用第三方组件汇总--史上最全 之一

    React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...

  8. React Native常用第三方组件汇总--史上最全[转]

    本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-na ...

  9. 一起来点React Native——常用组件之Touchable系列

    在前面的登录界面中,我们发现所有的组件不会对用户的点击.触摸.拖拽做出合适的响应,这是十分不友好的.那么,在React Native中如何让视图对触发做出合适的响应呢? 一.高亮触摸  Touchab ...

  10. React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方

    以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native ...

随机推荐

  1. 【转】web.xml中的contextConfigLocation在spring中的作用

    一.spring中如何使用多个xml配置文件 1.在web.xml中定义contextConfigLocation参数,Spring会使用这个参数去加载所有逗号分隔的xml文件,如果没有这个参数,sp ...

  2. [MySQL]如何支持utf8格式的UCS4unicode字符

    filed中必须是CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci: 连接时必须set names "utf8mb4": 这是一段P ...

  3. A - Alice's Print Service ZOJ - 3726 (二分)

    Alice is providing print service, while the pricing doesn't seem to be reasonable, so people using h ...

  4. java - day003 - 循环嵌套, 循环命名, while, 数组

    1.循环嵌套 break 中断循环或switch(跳出循环).中断后继续往下执行 continue (跳到循环的下一轮继续执行) return (结束方法) 2.循环命名 内层循环控制外层循环.需要给 ...

  5. 微信H5支付开发(maven仓库版)

    官方文档:https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_1 开发之前确认开通了H5支付功能 一.安装微信sdk 二.创建config ...

  6. Topshelf的使用

    一.简介 Topshelf可用于创建和管理Windows服务.其优势在于不需要创建windows服务,创建控制台程序就可以.便于调试. 二.官方地址: 1.官网:http://topshelf-pro ...

  7. 【玩转开源】BananaPi R2——移植RPi.GPIO 到 R2

    1. 首先给大家介绍一下什么是RPi.GPIO. 简单去讲,RPi.GPIO就是一个运行在树莓派开发板上可以通过Python去控制GPIO的一个中间件. 现在我这边做了一个基础功能的移植,接下来大家可 ...

  8. Angular Material design设计

    官网: https://material.io/design/ https://meterial.io/components 优秀的Meterial design站点: http://material ...

  9. java中读取资源文件的方法

    展开全部 1.使用java.util.Properties类的load()方法 示例: //文件在项目下.不是在包下!! InputStream in = new BufferedInputStrea ...

  10. VS 中 无法嵌入互操作类型“……”,请改用适用的接口的解决方法

    在引用COM组件的时候,出现了无法嵌入互操作类型"--",请改用适用的接口的错误提示. 选中项目中引入的dll,鼠标右键,选择属性,把"嵌入互操作类型"设置为F ...