# awesome-react-native **Repository Path**: solocoding/awesome-react-native ## Basic Information - **Project Name**: awesome-react-native - **Description**: React Native 学习资源精选仓库(汇聚知识,分享精华) - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 4 - **Forks**: 1 - **Created**: 2020-07-09 - **Last Updated**: 2025-05-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README React Native 学习资源精选仓库(汇聚知识,分享精华) --- [![](https://jaywcjlove.github.io/sb/ico/awesome.svg)](#目录) [![](https://jaywcjlove.github.io/sb/lang/chinese.svg)](https://github.com/wabg/react-native-awesome) [![](https://jaywcjlove.github.io/sb/lang/english.svg)](https://github.com/jondot/awesome-react-native) [《React Native Awesome》](https://github.com/crazycodeboy/react-native-awesome)这里fork过来的,汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。因后面无法 Pull requests 所以增加了居多资源,比如:[一起踩坑](#一起踩坑)、[音视频相机](#音视频相机)、[图形动画](#图形动画)...,比原项目内容更丰富🔥。 ## 目录 - [目录](#目录) - [资源网站](#资源网站) - [ES6&ES7](#es6es7) - [React.js](#reactjs) - [React.js相关教程](#reactjs相关教程) - [React Native](#react-native) - [教程](#教程) - [布局相关](#布局相关) - [开发调试](#开发调试) - [发布部署](#发布部署) - [系列教程](#系列教程) - [项目实践&教程](#项目实践教程) - [开源APP](#开源app) - [框架](#框架) - [库](#库) - [组件](#组件) - [UI](#ui) - [Navigation](#navigation) - [ViewPager](#viewpager) - [ListView&ScrollView](#listviewscrollview) - [Text&Rich Content](#textrich-content) - [弹框](#弹框) - [音视频相机](#音视频相机) - [图形动画](#图形动画) - [数据存储](#数据存储) - [Web相关](#web相关) - [系统相关](#系统相关) - [Material Design](#material-design) - [工具包](#工具包) - [TabLayout](#tablayout) - [工具](#工具) - [IDE](#ide) - [其他](#其他) - [视频](#视频) - [新闻&讨论](#新闻讨论) - [一次学习,随处可写](#一次学习随处可写) - [一起踩坑](#一起踩坑) - [资源下载](#资源下载) ## 资源网站 ### ES6&ES7 * [ES6的新特性,以及ES6与ES5的区别](http://blog.csdn.net/fengyuzhengfan/article/details/52233582) * [深入浅出ES6(十三):类 Class](http://www.infoq.com/cn/articles/es6-in-depth-classes/) * [ES6新特性:使用export和import实现模块化](http://www.cnblogs.com/diligenceday/p/5503777.html) * [ES6令人激动的特性](http://www.infoq.com/cn/news/2015/07/JavaScript-Promises-Generator?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term=global) * [ES6 学习笔记](https://segmentfault.com/a/1190000002904199) * [React on ES6+](https://babeljs.io/blog/2015/06/07/react-on-es6-plus) * [React/React Native 的ES5 ES6写法对照表](http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8) * [深入浅出ES6](http://www.infoq.com/cn/es6-in-depth/) * [阮一峰ES6 文档](http://es6.ruanyifeng.com/#docs/intro) ### React.js * [React官网](https://facebook.github.io/react/) * [React中文网](http://reactjs.cn/) * [React Router中文文档](https://react-guide.github.io/react-router-cn/) * [React-China社区](http://react-china.org/) * [组件的详细说明和生命周期(Component Specs and Lifecycle)](http://reactjs.cn/react/docs/component-specs.html) ### React.js相关教程 * [React速学教程(上)](http://blog.csdn.net/fengyuzhengfan/article/details/52185921) * [React速学教程(中)](http://blog.csdn.net/fengyuzhengfan/article/details/52201554) * [React速学教程(下)](http://blog.csdn.net/fengyuzhengfan/article/details/52233582) * [React入门教程](https://hulufei.gitbooks.io/react-tutorial/content/introduction.html) * [React入门实例教程-阮一峰](http://www.ruanyifeng.com/blog/2015/03/react.html) * [React组件间通信](http://www.alloyteam.com/2015/07/react-zu-jian-jian-tong-xin/) * [React数据流管理架构之 Redux 介绍](http://www.alloyteam.com/2015/09/react-redux/) ### React Native * [React Native 官方文档](https://facebook.github.io/react-native/) * [React Native 中文版 - 极客学院](http://wiki.jikexueyuan.com/project/react-native/) * [React Native 中文版 - reactnative.cn](http://reactnative.cn/) * [React Native中文社区](http://bbs.react-native.cn/) * [React Native组件库网站](https://js.coach/react-native) * [Use React Native 资讯站](http://www.reactnative.com/) ## 教程 ### 布局相关 * [React Native布局详细指南](http://blog.csdn.net/fengyuzhengfan/article/details/52090154) * [React Native布局篇](https://segmentfault.com/a/1190000002658374) * [Flex 布局语法教程](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) * [React Native探索(二):布局篇](http://www.infoq.com/cn/articles/react-native-layout) * [构建 F8 App / React Native 开发指南](http://f8-app.liaohuqiu.net/) ### 开发调试 * [React Native调试技巧与心得](http://blog.csdn.net/fengyuzhengfan/article/details/52106496) * [教你轻松修改React Native端口(如何同时运行多个React Native、8081端口占用问题)](http://www.devio.org/2017/08/18/Modify-the-React-Native-listening-port/)![ new](http://www.devio.org/img/ico/ico_new.gif) ### 发布部署 * [React-native Android环境搭建](https://github.com/jaywcjlove/handbook/blob/master/Android/React-native%20Android%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md) * [React Native应用部署/热更新-CodePush最新集成总结](http://blog.csdn.net/fengyuzhengfan/article/details/52003798) * [React Native发布APP之签名打包APK](http://blog.csdn.net/fengyuzhengfan/article/details/51958848) * [ReactNative增量升级方案](http://bbs.reactnative.cn/topic/276/reactnative%E5%A2%9E%E9%87%8F%E5%8D%87%E7%BA%A7%E6%96%B9%E6%A1%88) * [React Native: Android 的打包](http://www.liaohuqiu.net/cn/posts/react-native-android-package/) * [ReactNative之原生模块开发并发布——iOS篇](http://www.liuchungui.com/blog/2016/05/02/reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-iospian/) * [ReactNative之原生模块开发并发布——android篇](http://www.liuchungui.com/blog/2016/05/08/reactnativezhi-yuan-sheng-mo-kuai-kai-fa-bing-fa-bu-androidpian/) * [React Native for Android 入门老虎](http://www.race604.com/react-native-for-android-start/) ### 系列教程 * [React Native 学习笔记](https://github.com/crazycodeboy/RNStudyNotes) * [React Native高手进阶-专栏](http://blog.csdn.net/column/details/react-native-advance.html) * [React Native高手进阶-专题](http://www.jianshu.com/collection/b6da4107b30d) * [React Native 每日一学(Learn a little every day)](https://github.com/crazycodeboy/RNStudyNotes/tree/master/React%20Native%20%E6%AF%8F%E6%97%A5%E4%B8%80%E5%AD%A6) * [React-Native-lesson](https://github.com/vczero/react-native-lesson) * [React Native 学习笔记](https://github.com/Kennytian/learning-react-native) * [React Native 之 JSBridge](http://www.alloyteam.com/2015/05/react-native-zhi-jsbridge/) * [ReactNative iOS源码解析(一)](http://awhisper.github.io/2016/06/24/ReactNative%E6%B5%81%E7%A8%8B%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90/ ) * [ReactNative iOS源码解析(二)](http://awhisper.github.io/2016/07/02/ReactNative%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%902/) * [学习ReactNative,全平台所需要的知识点](http://www.reactnativeexpress.com/) * [React Native与Iconfont](https://github.com/MrErHu/blog/issues/15) ### 项目实践&教程 * [React Native项目实战视频教程](http://coding.imooc.com/class/89.html)![ hot](http://www.devio.org/img/ico/ico_hot.gif) * [教你轻松在React Native中集成统计的功能)](http://www.devio.org/2017/09/03/React-Native-Integrated-analysis-function/)![ new](http://www.devio.org/img/ico/ico_new.gif) * [手把手教你构建运行React Native官方Examples](http://www.devio.org/2017/06/01/Construction-of-React-Native-Official/) * [ReactNative For Android 项目实战总结](https://mp.weixin.qq.com/s?__biz=MzI1MTA1MzM2Nw==&mid=401483604&idx=1&sn=399cdf7e13fe6125108de1bfd045f2cf&scene=1&srcid=0228wE75TF9Zqzny7mt7ZS3J&key=710a5d99946419d9b9d0a316ddb898594e9089b1b29a8759cca5ff2407c204f72876180e08fd6c60d3816da7e4c39053&ascene=0&uin=Mjc3OTU3Nzk1&devicetype=iMac+MacBookPro10%2C1+OSX+OSX+10.10.5+build%2814F27%29&version=11020201&pass_ticket=m2YLRqjCZ5S4CHXKqIpGbkf59t1oYvRDZ6krGXEuDfWlQcoVj1p2g8gzHOEYrM9U) * [Moles:携程基于React Native的跨平台开发框架](https://mp.weixin.qq.com/s?__biz=MzA3ODg4MDk0Ng==&mid=2651112408&idx=1&sn=32c2636a2653fe9391b44de514261cbf&scene=0&key=77421cf58af4a653dcba21da5c024ac89779f9441ef063c83a81320190267d73448404f84638ac9741a1c60d023e7e88&ascene=0&uin=Mjc3OTU3Nzk1&devicetype=iMac+MacBookPro10%2C1+OSX+OSX+10.10.5+build%2814F1808%29&version=11020201&pass_ticket=x3C%2Bf%2BjqNCVt%2FGoLAeJ5hccBYdZiUgf8Rr%2FLW%2Bpr4auXqEdjgM%2Fbrnmu6Qu%2B3N7N) * [构建 Facebook F8 2016 App / React Native 开发指南](http://f8-app.liaohuqiu.net/) * [React Native 从入门到原理](http://www.jianshu.com/p/978c4bd3a759#) * [在react-native中使用redux](http://www.jianshu.com/p/2c43860b0532) * [深入浅出 - Redux](https://github.com/berwin/Blog/issues/4) ## 开源APP >它山之石可以攻玉。 * [GitHubPopular](https://github.com/crazycodeboy/GitHubPopular):基于React Native的查看、阅读、收藏GitHub上 最受欢迎的开源项目的APP,不仅如此,它还是一款GitHub Trending的客户端。 * [React Native官方Demo](https://github.com/facebook/react-native/tree/master/Examples):React Native官方Demo,汇集了各种组件,API的使用Examples。 * [Facebook F8 App ](https://github.com/fbsamples/f8app):基于React Native 的2016 F8大会APP。 * [HackerNews-React-Native](https://github.com/iSimar/HackerNews-React-Native):Hacker 新闻客户端。 * [react-native-nw-react-calculator](https://github.com/benoitvallon/react-native-nw-react-calculator):基于React Native的计算器,iOS/Android、Web、桌面多端。 * [react-native-dribbble-app](https://github.com/catalinmiron/react-native-dribbble-app):基于React Native的Dribbble客户端。 * [noder-react-native](https://github.com/soliury/noder-react-native):Noder-cnodejs客户端。 * [ZhiHuDaily-React-Native](https://github.com/race604/ZhiHuDaily-React-Native):知乎日报Android版。 * [react-native-gitfeed](https://github.com/xiekw2010/react-native-gitfeed):一款基于React Native的GitHub客户端。 * [FinanceReactNative](https://github.com/7kfpun/FinanceReactNative):Finance - 股票报价app。 * [React-Native-Gank](https://github.com/Bob1993/React-Native-Gank):Gank.io客户端。 * [leanote-ios-rnLeanote](https://github.com/leanote/leanote-ios-rn):Leanote for iOS(云笔记)。 * [shopping-react-native](https://github.com/bigsui/shopping-react-native) :购物app-界面。 * [react-native-nba-app](https://github.com/wwayne/react-native-nba-app):This is why we play。 * [react-native-gitosc](http://git.oschina.net/rplees/react-native-gitosc):使用React Native重写的OSChina的Git@OSC客户端。 * [reading](https://github.com/attentiveness/reading):iReading App。 * [toutiao](https://github.com/kailuo99/toutiao):一款基于react-native 的ios android版 资讯头条 APP。 * [react-native-lagou](https://github.com/heruijun/react-native-lagou):用react native写的仿拉勾ios版本demo。 * [RN-ListViewLoadMore](https://github.com/yongqianvip/RN-ListViewLoadMore):ReactNative基础项目,包含Navigator、TabBar、以及ListView的Refresh和LoadMore * [react-native-BabyHealth-](https://github.com/liuhongjun719/react-native-BabyHealth-):仿 “宝宝健康” app,实现Listview展示、收藏、跳到appstore、react-redux与redux-thunk的使用 * [react-native接入ios/android原生模块](https://github.com/Xing-He/react-native-nativeModule) : react-native接入ios/android原生模块例子 * [react-native图片上传实例](https://github.com/Xing-He/imagePicker) ## 框架 > React-Native开发的库/ SDK类型。 * [NativeBase](https://github.com/GeekyAnts/NativeBase):一款融合了ES6用于在React Native上创建创建高质量的Android&iOS APP的框架。 * [tcomb-form-native](https://github.com/gcanti/tcomb-form-native):强大的表单处理控件,支持 JSON 模式,可插拔的外观和感觉。 * [BlankApp UI](https://github.com/blankapp/ui):React Native的高度可定制和主题组件。 * [Shoutem UI](https://github.com/shoutem/ui):一个完整React Native的UI工具包。 * [React Native Elements](https://github.com/dabit3/React-Native-Elements):React Native UI元素和组件的集合。 * [Panza](https://github.com/bmcmahen/panza):收集无状态,功能性,跨平台的ui组件,用于React Native。 ## 库 * [react-native-launch-image](https://github.com/reactnativecn/react-native-launch-image):用在React Native上手动关闭iOS启动界面(Launch Screen)的工具。[详细说明](http://reactnative.cn/post/2199) * [RNShareSDK](https://github.com/kengsir/RNShareSDK):一款基于原生平台ShareSDK的ReactNative插件,方便RN开发者集成各大社交平台的分享和授权功能。 * [react-native-social-kit](https://github.com/yoaicom/react-native-social-kit):对第三方社交账号SDK的封装,使开发者能在React Native App里使用授权、分享等功能。 ## 组件 ### UI * [React-Native-Elements](https://github.com/react-native-community/React-Native-Elements) 一组开发RN的UI工具包(强烈推荐) * [APSL/react-native-button](https://github.com/APSL/react-native-button) 支持多种点击事件的Button控件 * [mastermoo/react-native-action-button](https://github.com/mastermoo/react-native-action-button) 可自定义的多动作按钮组件 * [react-native-activity-view](https://github.com/naoufal/react-native-activity-view) iOS上的分享和action sheets组件 * [react-native-app-intro](https://github.com/FuYaoDe/react-native-app-intro) 引导页 * [react-native-blur](https://github.com/react-native-fellowship/react-native-blur) 添加模糊或者毛玻璃效果 * [react-native-calendar](https://github.com/christopherdro/react-native-calendar) 日历 * [react-native-collapsible](https://github.com/oblador/react-native-collapsible) 可折叠的component * [React Native Drawer](https://github.com/root-two/react-native-drawer) 抽屉效果,可 用来实现侧拉菜单 * [react-native-dropdown](https://github.com/alinz/react-native-dropdown)下拉菜单 * [ReactNativeEffectsView](https://github.com/voronianski/react-native-effects-view) 封装了iOS 8上的UIVisualEffectViews,在React Native中实现毛玻璃效果 * [react-native-gesture-password](https://github.com/spikef/react-native-gesture-password) 手势解锁,支持iOS和Android * [react-native-gifted-form](https://github.com/FaridSafi/react-native-gifted-form) 在React Native中方便的使用表格 * [react-native-gifted-messenger](https://github.com/FaridSafi/react-native-gifted-messenger) 方便的实现聊天UI * [react-native-grid-view](https://github.com/lucholaf/react-native-grid-view) 网格视图,类似iOS中的UICollectionView * [react-native-keyboard-spacer](https://github.com/Andr3wHur5t/react-native-keyboard-spacer) 适用于iOS的根据键盘自动调整输入框 * [react-native-keyboardevents](https://github.com/johanneslumpe/react-native-keyboardevents) 监听键盘显示/隐藏 * [react-native-keyboard-aware-scroll-view](https://github.com/APSL/react-native-keyboard-aware-scroll-view) 一个处理键盘外观的组件,自动滚动到焦点的TextInput * [react-native-mapbox-gl](https://github.com/mapbox/react-native-mapbox-gl) 地图 * [airbnb/react-native-maps](https://github.com/airbnb/react-native-maps) 针对iOS + Android的React Native Mapview组件 * [lelandrichardson/react-native-maps](https://github.com/lelandrichardson/react-native-maps) 地图 * [react-native-material-kit](https://github.com/xinthink/react-native-material-kit) 一组UI Components,为了介绍 [Material Design](http://www.google.com/design/spec/material-design/introduction.html) * [react-native-modalbox](https://github.com/maxs15/react-native-modalbox) 用于模态显示的Component * [react-native-orientation](https://github.com/yamill/react-native-orientation) 监听设备旋转 * [react-native-parallax](https://github.com/oblador/react-native-parallax) parallax效果 * [react-native-picker](https://github.com/beefe/react-native-picker) 选择器,可用于实现时间选择,区域选择 * [react-native-progress-hud](https://github.com/naoufal/react-native-progress-hud) ProgressHUD * [react-native-controllers](https://github.com/wix/react-native-controllers) 封装了 原生的iOS 导航栏,tabbar,抽屉效果等。 * [react-native-search-bar](https://github.com/umhan35/react-native-search-bar) 封装iOS原生UISearchBar * [react-native-spinkit](https://github.com/maxs15/react-native-spinkit) 一组Activity指示器 * [react-native-splashscreen](https://github.com/remobile/react-native-splashscreen) App载入视图,启动后自动隐藏 * [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) 3000+支持自定义的图标 * [react-native-invertible-scroll-view](https://github.com/exponentjs/react-native-invertible-scroll-view) 逆向的ScrollView,从底部开始布局,适用于聊天等向上滑动来加载更多的情况 * [react-native-loading-spinner-overlay](https://github.com/niftylettuce/react-native-loading-spinner-overlay) 加载中的提示spinner ,支持iOS/Android * [react-native-tabs](https://github.com/aksonov/react-native-tabs) 选项卡可用于底部标签栏以及分段视图 ### Navigation * [react-native-router-flux](https://github.com/aksonov/react-native-router-flux) 一款很火的导航组件。 * [react-native-router](https://github.com/t4t5/react-native-router) 路由导航组件。 * [react-native-navbar](https://github.com/react-native-community/react-native-navbar) 一款用于React Native上的可定制的导航条。 * [react-native-tab-navigator](https://github.com/exponentjs/react-native-tab-navigator) 一款兼容Android、iOS的TabBar组件。 * [react-native-drawer-layout](https://github.com/iodine/react-native-drawer-layout) 抽屉组件。 * [react-native-drawer](https://github.com/root-two/react-native-drawer) 另一款抽屉组件。 * [ex-navigator](https://github.com/exponentjs/ex-navigator) 封装Navigator,以Route为中心的Navigator ### ViewPager * [react-native-swiper](https://github.com/leecade/react-native-swiper) 一款轮番滑动的组件。 * [react-native-looped-carousel](https://github.com/appintheair/react-native-looped-carousel) 滚动轮播组件。 ### ListView&ScrollView * [react-native-refreshable-listview](https://github.com/jsdf/react-native-refreshable-listview) 下拉刷新组件。 * [react-native-refresherw](https://github.com/syrusakbary/react-native-refresherw) 下拉刷新组件。 * [react-native-drop-refresh](https://github.com/Obooman/RCTRefreshControl) 下拉刷新组件。 * [react-native-refresher](https://github.com/syrusakbary/react-native-refresher) 支持下拉刷新的listview * [react-native-gifted-listview](https://github.com/FaridSafi/react-native-gifted-listview) 下拉刷新和上拉加载的ListView * [react-native-smart-pull-to-refresh-listview](https://github.com/react-native-component/react-native-smart-pull-to-refresh-listview) 下拉刷新组件。 * [react-native-pull](https://github.com/greatbsky/react-native-pull) 下拉刷新组件。 * [react-native-swipe-list-view](https://github.com/jemise111/react-native-swipe-list-view) 滑动删除组件。 * [react-native-swipeout](https://github.com/dancormier/react-native-swipeout) iOS样式的划动删除组件。 * [react-native-sortable-listview](https://github.com/deanmcpherson/react-native-sortable-listview) 拖拽排序组件。 * [react-native-draggablelist](https://github.com/hzzcc/react-native-draggablelist) 拖排序组件。 * [react-native-SortableList](https://github.com/hayeah/react-native-SortableList) 拖拽排序组件。 * [react-native-tableview](https://github.com/aksonov/react-native-tableview) 桥接了原生的UITableView * [react-native-sglistview](https://github.com/sghiassy/react-native-sglistview) 为了解决React Native中ListView的内存问题 * [react-native-input-scroll-view](https://github.com/baijunjie/react-native-input-scroll-view) 完美的TextInput ScrollView ### Text&Rich Content * [react-native-htmlview](https://github.com/jsdf/react-native-htmlview):HTML显示组件,渲染HTML text 。 ### 弹框 * [react-native-easy-toast](https://github.com/crazycodeboy/react-native-easy-toast):一款用于React Native上消息提示弹框组件,使用方便,支持定义Toast,支持iOS,Android。 * [react-native-modal](https://github.com/brentvatne/react-native-modal):模态框,作者已经将该组件添加到React Native,所以开发者可以直接使用[Modal](https://facebook.github.io/react-native/releases/0.31/docs/modal.html); * [react-native-popover](https://github.com/jeanregisser/react-native-popover):一款类似Android popupwindow的弹出框组件。 ### 音视频相机 * [react-native-barcodescanner](https://github.com/ideacreation/react-native-barcodescanner) 二维码扫描组件 * [react-native-camera](https://github.com/lwansbrough/react-native-camera) 相机组件 * [react-native-image-picker](https://github.com/marcshilling/react-native-image-picker) 可以从相机或者相册选择图片 * [react-native-video](https://github.com/brentvatne/react-native-video) 视频组建 * [react-native-image-crop-picker](https://github.com/ivpusic/react-native-image-crop-picker) 图片选择器,支持对图片进行切割 ### 图形动画 * [react-native-button](https://github.com/ide/react-native-button) 按钮,因为react-native没有提供button * [react-native-scrollable-tab-view](https://github.com/skv-headless/react-native-scrollable-tab-view) 滑动的tab视图 * [react-native-animatable](https://github.com/oblador/react-native-animatable) 封装了很多动画,强烈推荐 * [react-native-lightbox](https://github.com/oblador/react-native-lightbox) 图片全屏预览 * [react-native-looped-carousel](https://github.com/appintheair/react-native-looped-carousel) 视图轮播 * [react-native-svgkit](https://github.com/brentvatne/react-native-svgkit) 显示SVG格式图片 * [react-native-chart](https://github.com/tomauty/react-native-chart) 绘图(折线图,柱状图,扇形图) * [react-native-circular-progress](https://github.com/bgryszko/react-native-circular-progress) 圆形的显示进度的视图 * [gl-react-native](https://github.com/ProjectSeptemberInc/gl-react-native) React Native中使用OPENGL来实现复杂的图片和components渲染 * [react-native-viewpager](https://github.com/race604/react-native-viewpager) 视图轮播,支持循环滚动,自定义视图。已做性能优化 * [react-native-gallery](https://github.com/ldn0x7dc/react-native-gallery) React Native图片组件库,支持常见手势。 * [lottie-react-native](https://github.com/airbnb/lottie-react-native) 基于Lactie封装的渲染After Effects动画 ### 数据存储 * [react-native-sqlite-storage](https://github.com/andpor/react-native-sqlite-storage) iOS/Android上的Sqlite3封装 * [react-native-store](https://github.com/thewei/react-native-store) 封装了react-native AsyncStorage * [realm-js](https://github.com/realm/realm-js) 用JS来调用Realm ### Web相关 * [react-native-safari-view](https://github.com/naoufal/react-native-safari-view) 封装iOS中的 [Safari View Controller](https://developer.apple.com/videos/wwdc/2015/?id=504) * [react-native-webview-android](https://github.com/lucasferreira/react-native-webview-android) 封装了Android中的Webview * [react-native-webrtc](https://github.com/oney/react-native-webrtc) A WebRTC module for React Native. ### 系统相关 * [react-native-device-info](https://github.com/rebeccahughes/react-native-device-info) 获取设备信息 * [react-native-barcodescanner](https://github.com/ideacreation/react-native-barcodescanner) 扫码 * [react-native-contacts](https://github.com/rt2zz/react-native-contacts) 访问通讯录 * [react-native-fs](https://github.com/johanneslumpe/react-native-fs) 访问本地文件系统 * [react-native-push-notification](https://github.com/zo0r/react-native-push-notification) 本地和远程通知 * [react-native-touch-id](https://github.com/naoufal/react-native-touch-id) 调用TouchID认证 ### Material Design * [mrn](https://github.com/binggg/mrn):Material Design组件库。 * [react-native-material-design](https://github.com/react-native-material-design/react-native-material-design):一款用于React Native上的材料设计UI组件库。 ### 工具包 - [react-native-mock](https://github.com/lelandrichardson/react-native-mock) 一个为ReactNative提供的测试框架 - [react-native-google-analytics](https://github.com/lwansbrough/react-native-google-analytics) google统计分析 - [react-native-fabric](https://github.com/corymsmith/react-native-fabric) 统计分析,崩溃分析等 - [react-native-wechat](https://github.com/weflex/react-native-wechat) 调用微信相关,比如分享,登录,支付 - [reactotron](https://github.com/skellock/reactotron) 在终端检测React Dom和Reactive App - [react-native-windows](https://github.com/ReactWindows/react-native-windows) Windows平台的RN工具 - [react-native-webpack-server](https://github.com/mjohnston/react-native-webpack-server) 用Webpack来编译React Native App ### TabLayout * [react-native-scrollable-tab-view](https://github.com/skv-headless/react-native-scrollable-tab-view) 一款用于React Native上TabLayout组件。 * [react-native-tab-navigator](https://github.com/exponentjs/react-native-tab-navigator) TabBar切换视图 * [Teaset](https://github.com/rilyu/teaset):一款React Native UI框架,提供20+纯JS组件,可与React Native已有组件无缝组合使用,专注于内容展示与操作控制。 ## 工具 ### IDE * [Nuclide](https://nuclide.io/):Nuclide 是 Facebook 推出的一套基于 Atom 的开发工具集。用于开发基于 Hack 的 Web 应用。提供自动完成和 JavaScript 类型检查,内建 React 开发支持,并支持 Facebook 最新的 React Native 库,支持 Facebook 的 Flow JavaScript 类型检查器。 * [WebStorm](https://www.jetbrains.com/webstorm/):JetBrains公司出品的用于前端开发的IDE,WebStorm有着JetBrains公司IDE的优良血统,是前端工程师的一个开发神器。另外,AndroidStudio也是基于JetBrains的IDE,这对于习惯了AndroidStudio的开发者来说,WebStorm无疑是一个最佳的选择。 ### 其他 * [CodePush](https://microsoft.github.io/code-push/):CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。 * [Redux](https://github.com/reactjs/redux/):用于JavaScript apps上的一款可预见的状态管理框架。 * [redux-react-native-i18n](https://github.com/derzunov/redux-react-native-i18n) 具有复数形式的i18n解决方案支持Redux上的React Native应用程序 * [React Sight](http://www.reactsight.com/) 用于React的可视化工具,支持Fiber,Router(v4)和Redux [Chrome Plug](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) [github](https://github.com/React-Sight) * [React Developer Tools](https://github.com/facebook/react-devtools) 一个扩展程序,允许检查Chrome和Firefox开发人员工具中的React组件层次结构。 [Chrome Plug](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) [github](https://github.com/facebook/react-devtools) ## 视频 * [React Native项目实战视频](http://coding.imooc.com/class/89.html) * [React Native免费自学视频](http://www.imooc.com/learn/808) * [React.js Conf 2016](https://www.youtube.com/playlist?list=PLb0IAmt7-GS0M8Q95RIc2lOM6nc77q1IY) ## 新闻&讨论 * [ReactJS 真的好吗?](https://www.zhihu.com/question/33631170) ## 一次学习,随处可写 * [react-native-macos](https://github.com/ptmt/react-native-macos):使用React Native和Cocoa组建macOS桌面应用。 * [react-native-web](https://github.com/necolas/react-native-web):使用React Native组建Web应用。 ## 一起踩坑 - [解决:next release empty section headers will be rendesred. In this release you can user ‘enableEmptySections’ flag to render empty section headers.](http://youthol.top/2016/08/20/%E8%A7%A3%E5%86%B3%EF%BC%9Anext-release-empty-section-headers-will-be-rendered-in-this-release-you-can-user-enableemptysections-flag-to-render-empty-section-headers/) - [error: no devices/emulators found](https://github.com/jaywcjlove/handbook/blob/master/Android/React-native%20Android%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md#1-error-no-devicesemulators-found) - [react-native run-android时出现Could not download imagepipeline.aar](https://github.com/jaywcjlove/handbook/blob/master/Android/React-native%20Android%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md#2-react-native-run-android时出现could-not-download-imagepipelineaar) - [Undefined symbols for architecture x86_64: “std::terminate()”](https://github.com/jaywcjlove/handbook/blob/master/Android/React-native%20Android%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md#3-undefined-symbols-for-architecture-x86_64-stdterminate) - [方法一:animated `useNativeDriver` is not supported because the native animated module is missing](http://blog.csdn.net/it_talk/article/details/53787033) - [方法二:animated `useNativeDriver` is not supported because the native animated module is missing](http://www.psd1403.com/usenativedriver-is-not-supported-because-the-native-animated-module-is-missing/) - 最终都需要将`libRCTAnimation.a` 文件导入 [react-native issues #11094](https://github.com/facebook/react-native/issues/11094) - [error: unable to find utility "instruments", not a developer tool or in PATH](https://github.com/jaywcjlove/handbook/blob/master/Android/React-native%20Android%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md#5-error-unable-to-find-utility-instruments-not-a-developer-tool-or-in-path) - [Property 'force' not found on object of type 'UITouch'](https://github.com/jaywcjlove/handbook/blob/master/Android/React-native%20Android%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA.md#6-property-force-not-found-on-object-of-type-uitouch) - 应用反应缓慢,出现卡顿: * 查看是否console日志打印过度造成 * React Native Debugger放到最前面,浏览器窗口不要放到选项卡里面 - [小米 - com.android.builder.testing.api.DeviceException: com.android.ddmlib.InstallException: Failed to establish session](http://stackoverflow.com/questions/32577761/com-android-ddmlib-installexception-failed-to-establish-session-react-native) - [*.h file-not-found](http://stackoverflow.com/questions/5198905/h-file-not-found) - [修改安卓app在手机上展示的名称](http://www.nowamagic.net/librarys/topics/detail/444) ``` Your_app_name_to_display ``` - [修改安卓打包时apk的名字:如 `wabg.apk`](https://segmentfault.com/a/1190000002910311) ``` android{ applicationVariants.all { variant -> variant.outputs.each { output -> def outputFile = output.outputFile if (outputFile != null && outputFile.name.endsWith('.apk')) { File outputDirectory = new File(outputFile.parent); def fileName  // 你的apk打包名称 if (variant.buildType.name == "release") {                    fileName = "app_v${defaultConfig.versionName}_${releaseTime()}_${variant.productFlavors[0].name}.apk" } else { fileName = "app_v${defaultConfig.versionName}_${packageTime()}_debug.apk" } output.outputFile = new File(outputDirectory, fileName) } } } } ``` ## 资源下载 * [(深入浅出ES6)ES6-in-depth](https://raw.githubusercontent.com/crazycodeboy/react-native-awesome/master/resource/download/(%E6%B7%B1%E5%85%A5%E6%B5%85%E5%87%BAES6)ES6-in-depth.pdf) * [JavaScript Promise迷你书(中文版)](https://raw.githubusercontent.com/crazycodeboy/react-native-awesome/master/resource/download/(JavaScript%20Promise%E8%BF%B7%E4%BD%A0%E4%B9%A6(%E4%B8%AD%E6%96%87%E7%89%88))javascript-promise-book.pdf) * [React Native API 电子书 for mac@UIExplorer](https://raw.githubusercontent.com/crazycodeboy/react-native-awesome/master/resource/download/UIExplorer.zip)