README.md · solocode/awesome-react-native

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)
```
<resources>
    <string name="app_name">Your_app_name_to_display</string>
</resources>
```
- [修改安卓打包时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)

solocode/awesome-react-native

简介

发行版

贡献者

近期动态

solocode/awesome-react-native .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

solocode/awesome-react-native