整理的一份 React Native 开发中常用的三方组件库大全。
完整的 App
使用React Native开发且功能完整的App。
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | surmon.me.native | 一个非常适合入门学习的react-native项目，有借鉴自其他种子项目的组织方式，代码清晰、结构合理。 |
| 2 | Mister-Poster | 用到了 RN+Redux+Redux Storage+Firebase 的一个开源项目 |
| 3 | 仿 whatsapp | |
| 4 | elm-react-native | RN写的饿了么，还原度相当高，实现了各类动效，高度推荐 |
| 5 | HelloRN | 适合入门学习的demo，适配android ios， 有网页、图片、音乐、地图等功能 |
| 6 | ZhiHuDaily-React-Native | 仿知乎日报 |
| 7 | im.js | 一个基于 react-native + mobx + socket.io + node 的仿微信 JS-Wechat |
| 8 | shopping-react-native | 一个商城类的RN项目 |
| 9 | JueJinClient | 仿掘金客户端 |
| 10 | react-weather | 精致的天气类App |
| 11 | 30-days-of-react-native | 30天学React Native的Demo App，结合作者源码，学React Native效果杠杆滴！ |
| 12 | FinanceReactNative | 使用React Native做的金融证券股票类App |
| 13 | GitHubPopular | 这是一个用来查看GitHub最受欢迎与最热项目的App,它基于React Native支持Android和iOS双平台。 |
| 14 | react-native-eyepetizer | 模仿开眼3.1.2 |
| 15 | react-native-gank | 为 Gank.io 做的一个 React-Native 移动客户端 |
| 16 |
组件篇
集合常用组件的综合组件库。
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | native-base | 好用的一套综合组件库，库中集合了很多第三方的库，许多自定义的组件，使用方便 |
| 2 | react-native-elements | 由react-native-community社区维护的一套综合组件库 |
| 3 | Shoutem-UI | 库中包含了顶部标题栏，下拉菜单，视频播放，带加载刷新的ListView，GridView等，界面美观大方 |
| 4 | 1.nachos-ui | 库中包含了一些常用的组件，不想一个个找的可以直接使用这种框架 |
| 5 | tipsi-ui-kit | 组件比较少，大部分都是一些装饰性的组件 |
| 6 | ignite | 通过命令行创建带有模板代码的项目，可以学习一下代码的写法。配置略复杂，要求node和yarn必须是最新的 |
| 7 | react-native-starter-app | 集合了一些常用组件的框架，省去不少搭建项目基础代码的时间 |
| 8 | styled-components | 可以让自定义组件变得更简单的一个库 |
| 9 |
滚动视图
列表、刷新、加载等
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-gifted-listview | 支持刷新，加载更多 |
| 2 | react-native-parallax-view | 可以自定义头部，带弹性当打效果的竖向ScrollView |
| 3 | react-native-pull-to-refresh | 一个下拉刷新的组件，支持任意View刷新 |
| 4 | react-native-parallax-scroll-view | 支持头部弹性放大的ScrollView，功自定义功能丰富，上滑时带有视差效果 |
| 5 | react-native-swiper | 可以实现页面左右滑动的组件，用来制作引导页，Banner，看大图页面等 |
| 6 | react-native-banner | 一个专门针对Banner的组件，是基于react-native-swiper修改的 |
| 7 | react-native-alphabetlistview | 带侧边栏的列表 |
| 8 | react-native-app-intro | Android风格的App引导页组件 |
| 9 |
多媒体
视频播放，拍照，录音等
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-video | 兼容Andorid和iOS的视频播放组件，安卓在安装以后需要还需要手动修改node_module中的文件才能正确使用 |
| 2 | react-native-camera | 通过React Native直接调用设备相机进行录制和拍摄的组件 |
| 3 | react-native-audio | 通过React Native进行音频录制 |
| 4 | react-native-video-processing | 视频编辑库 |
| 5 | react-native-camera-roll-picker | 选取系统相册中的照片 |
| 6 | react-native-smart-barcode | 二维码扫描组件 |
| 7 | react-vr | React&React Native上的 VR 组件，fb官方出品，推荐！ |
| 8 |
导航栏
底部tab，顶部导航，页面管理等
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-tab-navigator | 适合做App底部Tab的组件，简单易用，用的比较多 |
| 2 | react-native-scrollable-tab-view | 一款适合用作顶部tab的组件，类似各大新闻App中的那样 |
| 3 | React Native Tab View | 一个顶部tab组件 |
| 4 | react-native-navigation | 一个用于页面间导航的解决方案 |
| 5 | react-native-nav | 一个通用的顶部标题栏，可以支持文字或图标 |
| 6 | react-navigation | Learn once, navigate anywhere，强大的导航组件 |
| 7 | react-native-navigation-drawer | 侧滑菜单 |
| 8 | react-native-custom-segmented-control | 顶部tab，带指示器和奇切换动画 |
| 9 | react-native-segmented-view | 顶部tab组件 |
| 10 | native-navigation | Airbnb提供的RN导航解决方案 |
存储
文件、数据库、键值对存储等
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-storage | 本地键值对存储，支持持久化存储 |
| 2 | realm-js | 搞移动开发的还有谁还不知道Realm的？移动平台数据库存储没有之一！特点就一个：快！快！快！现在也推出了JS版的v1.0.0 |
| 3 | react-native-sqlite-storage | React Native上的sqlite存储工具 |
| 4 | react-native-fetch-blob | 一个致力于让RN读取手机文件更方便更高效的库 |
| 5 |
辅助资源
图标、工具类等
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-vector-icons | 包含大量图标，如果在引用时直接用"arrow-back"则会自己区分平台，如果使用“ios(md)-arrow-back”，指定平台 |
| 2 | react-native-cross-platform-icons | 一个可以跨平台使用的图标库 |
| 3 | React-Native-Virtual-Keyboard | 虚拟键盘 |
| 4 | ReactNativeLocalization | 一个实现多语言环境的框架 |
| 5 |
动画
各种动画效果
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-spinkit | 一些加载动画的集合 |
| 2 | react-native-progress | 带动画的进度条 |
| 3 | lottie-react-native | Airbnb良心开源动画库 |
| 4 |
Dialog
弱提示，确认框，下拉菜单等
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-easy-toast | 实现类似Android中Toast的效果，用于界面弱提示 |
| 2 | react-native-popup-dialog | 自带动画的弹出框 |
| 3 | react-native-popup-menu | 弹出菜单 |
| 4 | react-native-wheel-picker | 滚轮选择组件 |
| 5 | react-native-message-bar | 可以实现应用内消息通知的弹出框 |
| 6 | react-native-tooltip | 带箭头的弹出菜单 |
| 7 | react-native-searchbar | 弹出式搜索框 |
| 8 | react-native-root-modal | 弹出页面 |
| 9 | react-native-picker | 底部弹出Picker，多级联动，三级联动选择器 |
| 10 | react-native-picker-xg | 滚轮选择器 |
| 11 | React-Native-SnackBar-Component | 类似Android平台上的snackbar |
| 12 | ReactNativeTips | 移动端各类Tips提示组件合集，提供toast，success，error，alert，confirm等 |
图片
图形图像处理（滤镜，模糊，修改）
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | gl-react-native | 通过WebGL给图片添加各种炫酷效果的组件，而且是各种炫酷 |
| 2 | react-native-blur | 图片模糊的组件 |
| 3 | react-native-photo-browser | 选择系统相册图片，浏览选中大图 |
| 4 | react-native-fit-image | 根据图片的大小自动进行缩放的Image组件 |
| 5 | react-native-webp | 使项目支持WebP图片格式 |
| 6 | react-native-palette | 从图片中直接提取颜色的库 |
| 7 | react-native-image-crop-picker | 图片剪裁，自带支持系统图库选择图片功能 |
| 8 |
文本
文本、输入框、搜索框
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-progressive-input | 带输入提示列表的输入框 |
| 2 | react-native-textinput-effects | 类似Android中TextInputLayout，不过可以设置的样式更多 |
| 3 | react-native-slot-machine | 带随机滚动效果的Text组件 |
| 4 | react-native-marquee-label | 带跑马灯效果的Text组件 |
| 5 | react-native-hyperlink | 支持超链接的Text |
| 6 | react-native-hypertext | 支持超链接的Text |
| 7 | react-native-mentions | 一个可以通过 @ 符号提及某人的输入框 |
| 8 | react-native-floating-labels | 类似Android上的一个输入框组件 |
| 9 |
菜单
侧滑，展开，悬浮等各类菜单组件
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-accordion | 可以收起，展开的菜单组件 |
| 2 | react-native-action-button | 悬浮按钮，类似Android中的FloatingActionButton |
| 3 | react-native-actionsheet-native | 类似IOS平台上的底部弹出菜单 |
| 4 | react-native-off-canvas-menu | 侧滑菜单 |
| 5 | react-native-swipeout | 列表Item侧滑菜单 |
| 6 | react-native-swipeable | 为列表Item添加侧滑功能的组件 |
| 7 | react-native-circle-button | 带动画的圆形菜单 |
| 8 | react-native-drawer | 侧滑菜单，用RN代码实现的，所以感觉比较卡 |
| 9 |
图表
各种图表
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-charts-wrapper | 图表组件，用RN代码对原生组件进行了包装。Android上用的MPAndroidChart，iOS上用的是Charts |
| 2 | react-native-pie | 饼状图表，支持双平台 |
| 3 | rn-d3-art-charts | 带动画效果的图表组件，双平台通用，但是在Android 上没有动画效果 |
| 4 |
国内服务
RN封装的QQ登录，极光推送，支付宝等
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-qq | RN中文网的天地之灵封装的QQ登录插件 |
| 2 | jpush-react-native | RN封装的极光推送，支持双平台 |
| 3 | react-native-smart-amap-location | 高德定位 |
| 4 | react-native-smart-alipay | 支付宝支付 |
| 5 | react-native-open-share | 新浪微博，微信，QQ，支付宝等分享，支付，登录 |
| 6 | react-native-share | 用于分享的组件 |
| 7 | react-native-share-extension | 自定义分享平台的组件 |
| 8 |
其它
| 序号 | 名称 | 简介 |
|---|---|---|
| 1 | react-native-splash-screen | 启动页组件 |
| 2 | react-native-display | 给组件添加进入退出动画，通过控制显示与否，提高组件性能 |
| 3 | react-native-button-component | 比系统Button好用一点的Button组件 |
| 4 | react-native-step-indicator | 操作步骤指示器 |
| 5 | react-native-tinder-swipe-cards | 类似探探App中左右滑动的组件 |
| 6 | react-native-star-rating | 星级评分组件 |
| 7 | react-native-qrcode | 展示和生成二维码组件 |
| 8 | react-native-modest-checkbox | 好用的复选框组件 |
| 9 | react-native-foldview | 可以折叠起来的UI组件 |
| 10 | react-native-keyboard-spacer | 让软键盘的弹出和隐藏更优雅一点 |
| 11 | react-native-CountDowntimer | 一个可以定义样式的倒计时组件 |
| 12 | react-native-qrcode | 一个生成二维码的组件 |
| 13 | react-native-smart-gesture-password | 手势九宫格图案解锁组件 |
| 14 | react-native-qrcode-app | 一个利用RN代码实现二维码识别的Demo |
| 15 | react-native-device-info | 获取手机设备信息的组件 |
网友评论