Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/wabg/awesome-react-native

React Native 学习资源精选仓库(汇聚知识，分享精华)
https://github.com/wabg/awesome-react-native
List: awesome-react-native
android ios ios-android react react-native react-native-app reactjs
Last synced: 23 days ago
JSON representation
React Native 学习资源精选仓库(汇聚知识，分享精华)
Host: GitHub
URL: https://github.com/wabg/awesome-react-native
Owner: wabg
License: mit
Created: 2017-10-16T01:57:25.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2024-03-05T07:10:30.000Z (8 months ago)
Last Synced: 2024-05-22T16:14:24.449Z (6 months ago)
Topics: android, ios, ios-android, react, react-native, react-native-app, reactjs
Homepage: https://wabg.github.io/awesome-react-native/
Size: 3.75 MB
Stars: 265
Watchers: 9
Forks: 63
Open Issues: 1
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project

ultimate-awesome - awesome-react-native - React Native 学习资源精选仓库(汇聚知识，分享精华). (Other Lists / PowerShell Lists)
README

        React Native 学习资源精选仓库(汇聚知识，分享精华)

===

[![](https://jaywcjlove.github.io/sb/ico/awesome.svg)](#目录)

[![](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 ，因此我们在此基础上进一步扩充了资源，包括但不限于一同解决问题、音视频相机、图形动画等领域，使项目内容更为丰富🔥。无论你是初学者还是有经验的开发者，我们相信这里能够满足你对React Native 学习的各种需求。一起探索 React Native 的奇妙世界吧！

## 目录

- [目录](#目录)

- [资源网站](#资源网站)

  - [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)

* [JS 函数式编程指南](https://www.gitbook.com/book/llh911001/mostly-adequate-guide-chinese/details)

### 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)

* [React Native组件库网站](https://www.native.directory)

* [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 Animation Book](http://browniefed.com/react-native-animation-book/)

### 项目实践&教程

* [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)

* [优化 Redux 架构的 10 个技巧【译】](https://blog.yongyuan.us/articles/2016-09-04-redux-10-tips/)

## 开源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)  

* [movieapp](https://github.com/junedomingo/movieapp) : Discover Movies and TV shows - React Native

* [C-Shopping-RN APP](https://github.com/huanghanzhilian/c-shopping-rn) : 一个精美的电商购物应用

## 框架

> 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里使用授权、分享等功能。

* [react-native-agora](https://github.com/syanbo/react-native-agora): 基于声网音视频SDK封装的React Native模块，方便RN开发者可以轻松集成WebRTC功能，实现电话会议，视频会议，直播等功能。

## 组件  

### 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-style-tachyons](https://github.com/tachyons-css/react-native-style-tachyons) 为React Native提供更好的样式

- [react-native-css](https://github.com/sabeurthabti/react-native-css) 使用css样式React-Native组件

- [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上的一款可预见的状态管理框架。

* [MobX](https://github.com/mobxjs/mobx)：与 Redux 相比，更轻便、自由的状态管理框架。

* [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-rename](https://github.com/junedomingo/react-native-rename) : Rename react-native app with just one command

## 视频   

* [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)

- 应用反应缓慢，出现卡顿： 

  1. 查看是否console日志打印过度造成

  2. 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)