ReactNative开发常用的三方模块

写在前面

一个好的App缺不了好的三方支持,生活在ReactNative这个活跃的开源社区,寻找合适的三方组件是一个开发者最基本的能力。不过不积跬步,无以至千里,不积小流,无以成江海。下面分享几个我收集的三方模块,希望对大家有点帮助。

文件上传 react-native-uploader

这里写图片描述

github地址:https://github.com/aroth/reac...

评价:支持多图上传和上传进度显示,demo比较粗糙。项目已经停止更新 4个月

<!--more-->

毛玻璃效果 react-native-blur

这里写图片描述

github 地址:https://github.com/react-nati...

评价:星星比较多,支持3种常见的毛玻璃效果,不错的组件。

图片轮播

  • react-native-viewpager

这里写图片描述
GitHub 地址:https://github.com/race604/re...

评价:实际使用过,轮播效果比较普通,算比较实用吧

  • react-native-looped-carousel

这里写图片描述

GitHub 地址:https://github.com/appintheai...

评价:demo比较精致,可以尝试

  • react-native-app-intro

这里写图片描述

GitHub 地址:https://github.com/FuYaoDe/re...

评价:星星比较多,适合做App进入的引导页

图片选择

  • react-native-image-picker

这里写图片描述

GitHub 地址:https://github.com/marcshilli...

评价:实际使用过,功能强大,兼容性好。但是不支持多图

  • react-native-image-crop-picker

这里写图片描述

GitHub 地址:https://github.com/ivpusic/re...

评价:功能类似,但支持多图

获取设备信息 react-native-device-info

GitHub 地址:https://github.com/rebeccahug...

评价:文档比较细致,算是靠谱的组件

ListView优化替代组件 react-native-sglistview

GitHub 地址:https://github.com/sghiassy/r...

评价:用法简单,可以减小ListView运行占用的内存

二维码识别 react-native-qrcode-reader

github 地址:https://github.com/starknx/re...

评价:比较实用的功能

手势解锁 react-native-gesture-password

这里写图片描述

GitHub 地址:https://github.com/SunflowerG...

评价:为App添彩的功能

这里写图片描述

GitHub 地址:https://github.com/starknx/re...

评价: 星星比较少,项目1年未更新,谨慎使用

键盘遮挡问题解决

评价:新版RN的KeyboardAvoidingView组件可以解决这个问题

图片查看 react-native-gallery

这里写图片描述

GitHub 地址:https://github.com/ldn0x7dc/r...

评价:支持轮播和 放大查看

3D Touch react-native-quick-actions

这里写图片描述

GitHub 地址:https://github.com/madriska/r...

评价:为App添彩的功能,但不是必须的

可滑动的日历组件 react-native-myCalendar

这里写图片描述

GitHub 地址:https://github.com/cqm1994617...

评价:demo 耦合性略高

可拖拽元素 react-native-gesture-recognizers

这里写图片描述

GitHub 地址:https://github.com/johanneslu...

评价:比较有趣的功能

下拉放大 react-native-parallax-view

这里写图片描述

GitHub 地址:https://github.com/lelandrich...

评价:这个功能适合带图片的详情页

简单图表 react-native-chart

这里写图片描述

GitHub 地址:https://github.com/tomauty/re...

评价:比较成熟的项目,放心使用

侧滑按钮 react-native-swipeout

这里写图片描述

GitHub 地址:https://github.com/dancormier...

评价:如果放在水平滚动的容器里会有BUG

抽屉功能 react-native-drawer

这里写图片描述

GitHub 地址:https://github.com/root-two/r...

评价:实际使用过,性能还不错,可放心使用

加载动画 react-native-spinkit

这里写图片描述

GitHub 地址:https://github.com/maxs15/rea...

评价:比较有趣的动画,为项目添彩

登录动画 react-native-login

这里写图片描述

GitHub 地址:https://github.com/brentvatne...

评价:动画为mp4格式

动画组件 react-native-animatable

这里写图片描述

GitHub 地址:https://github.com/oblador/re...

评价:为元素添加灵动感,比较实用

即时通讯

  • react-native-gifted-chat

这里写图片描述

GitHub 地址:https://github.com/FaridSafi/...

评价:支持发送位置和图片

  • react-native-imUI

这里写图片描述

GitHub 地址:https://github.com/Ice-MT/rea...

评价:从项目里抽取出来的demo,UI做的挺萌,有发送语音功能

精致的输入框 react-native-textinput-effects

这里写图片描述

GitHub 地址:https://github.com/halilb/rea...

评价:为项目添彩的功能

表单验证 react-native-gifted-form

这里写图片描述

GitHub 地址:https://github.com/FaridSafi/...

评价:比较实用,适合用在复杂的表单

UI组件库

  • NativeBase

这里写图片描述

github:https://github.com/GeekyAnts/...

在线文档:http://nativebase.io/docs/v0....

评价:组件比较多,不过设计风格一般

  • shoutem

这里写图片描述

团队github: https://github.com/shoutem

在线文档:http://shoutem.github.io/docs...

评价:组件丰富,设计风格酷炫、团队也比较牛逼

  • Teaset

这里写图片描述

github: https://github.com/rilyu/teaset

评价:国人作品,组件丰富,设计风格简约,比较适宜新手实用吧

  • react-native-material-design

这里写图片描述

GitHub 地址:https://github.com/react-nati...

评价:纯js编写,没有依赖,demo用的是Android

  • react-native-elements

这里写图片描述

github: https://github.com/react-nati...

在线文档:http://react-native-material-...

评价:ReactNative作者操刀领导的作品,值得拥有

  • react-native-ui-kitten

这里写图片描述

github: https://github.com/akveo/reac...

在线文档:https://akveo.github.io/react...

评价:一个酷炫简单的App组件Demo,适合新手学习


@参考:React Native 项目常用第三方组件汇总

欢迎关注我的个人博客 Jafeney


思诚^_^
分享最前沿的前端技术,React、ReactNative、NodeJS

成功的道路并不拥挤,因为坚持的人不会太多

926 声望
885 粉丝
0 条评论
推荐阅读
支付宝小程序性能分析
首屏即 页面首次渲染满屏内容,是用于计算T2的关键节点。简单说就是,在页面加载的过程中,记录所有的渲染帧,在页面加载结束之后,回溯检查每一帧,图片渲染面积首次达到最大值的那一帧记为T2

jafeney阅读 1.7k评论 1

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 7k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.3k评论 4

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

成功的道路并不拥挤,因为坚持的人不会太多

926 声望
885 粉丝
宣传栏