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

《React
Native Awesome》这里fork过来的，汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等，只求精不求全。因后面无法 Pull requests 所以增加了居多资源，比如：一起踩坑、 音视频相机、图形动画...，比原项目内容更丰富 

。https://juejin.im/entry/59dd786cf265da431d3ba6e3

目录

资源网站
React.js
React Native

教程
React.js
React Native
文档手册
布局相关
开发调试
发布部署

ES6&ES7
项目实践&教程
系列教程

开源APP
组件
UI
Navigation
ViewPager
ListView&ScrollView
Text&Rich Content
弹框
音视频相机
图形动画
数据存储
Web相关
系统相关
Material Design
工具包
TabLayout

框架
库
工具
视频
新闻&讨论
一次学习，随处可写
一起踩坑
资源下载

资源网站

ES6&ES7

ES6的新特性，以及ES6与ES5的区别
深入浅出ES6（十三）：类
Class
ES6新特性：使用export和import实现模块化
ES6令人激动的特性
ES6
学习笔记
React
on ES6+
React/React
Native 的ES5 ES6写法对照表
深入浅出ES6
阮一峰ES6
文档

React.js

React官网
React中文网
React
Router中文文档
React-China社区
组件的详细说明和生命周期（Component
Specs and Lifecycle）

React
Native

React
Native 官方文档
React
Native 中文版 - 极客学院
React
Native 中文版 - reactnative.cn
React
Native中文社区
React
Native组件库网站
Use
React Native 资讯站

教程

React.js

React速学教程(上)
React速学教程(中)
React速学教程(下)
React入门教程
React入门实例教程-阮一峰
React组件间通信
React数据流管理架构之
Redux 介绍

React
Native

布局相关

React
Native布局详细指南
React
Native布局篇
Flex
布局语法教程
React
Native探索（二）：布局篇
构建
F8 App / React Native 开发指南

开发调试

React
Native调试技巧与心得
教你轻松修改React
Native端口(如何同时运行多个React Native、8081端口占用问题)

发布部署

React-native
Android环境搭建
React
Native应用部署/热更新-CodePush最新集成总结
React
Native发布APP之签名打包APK
ReactNative增量升级方案
React
Native: Android 的打包
ReactNative之原生模块开发并发布——iOS篇
ReactNative之原生模块开发并发布——android篇
React
Native for Android 入门老虎

系列教程

React
Native 学习笔记
React
Native高手进阶-专栏
React
Native高手进阶-专题
React
Native 每日一学(Learn a little every day)
React-Native-lesson
React
Native 学习笔记
React
Native 之 JSBridge
ReactNative
iOS源码解析（一）
ReactNative
iOS源码解析（二）
学习ReactNative，全平台所需要的知识点

项目实践&教程

React
Native项目实战视频教程


教你轻松在React
Native中集成统计的功能)


手把手教你构建运行React
Native官方Examples
ReactNative
For Android 项目实战总结
Moles：携程基于React
Native的跨平台开发框架
构建
Facebook F8 2016 App / React Native 开发指南
React
Native 从入门到原理
在react-native中使用redux
深入浅出
- Redux

开源APP

它山之石可以攻玉。

GitHubPopular：基于React
Native的查看、阅读、收藏GitHub上 最受欢迎的开源项目的APP，不仅如此，它还是一款GitHub Trending的客户端。
React
Native官方Demo：React Native官方Demo，汇集了各种组件，API的使用Examples。
Facebook
F8 App ：基于React Native 的2016 F8大会APP。
HackerNews-React-Native：Hacker
新闻客户端。
react-native-nw-react-calculator：基于React
Native的计算器，iOS/Android、Web、桌面多端。
react-native-dribbble-app：基于React
Native的Dribbble客户端。
noder-react-native：Noder-cnodejs客户端。
ZhiHuDaily-React-Native：知乎日报Android版。
react-native-gitfeed：一款基于React
Native的GitHub客户端。
FinanceReactNative：Finance
- 股票报价app。
React-Native-Gank：Gank.io客户端。
leanote-ios-rnLeanote：Leanote
for iOS(云笔记)。
shopping-react-native ：购物app-界面。
react-native-nba-app：This
is why we play。
react-native-gitosc：使用React
Native重写的OSChina的Git@OSC客户端。
reading：iReading
App。
toutiao：一款基于react-native
的ios android版 资讯头条 APP。
react-native-lagou：用react
native写的仿拉勾ios版本demo。
RN-ListViewLoadMore：ReactNative基础项目，包含Navigator、TabBar、以及ListView的Refresh和LoadMore
react-native-BabyHealth-：仿
“宝宝健康” app，实现Listview展示、收藏、跳到appstore、react-redux与redux-thunk的使用
react-native接入ios/android原生模块 :
react-native接入ios/android原生模块例子
react-native图片上传实例

组件

UI

React-Native-Elements 一组开发RN的UI工具包（强烈推荐）
react-native-action-button 支持多种点击事件的Button控件
react-native-activity-view iOS上的分享和action
sheets组件
react-native-app-intro 引导页
react-native-blur 添加模糊或者毛玻璃效果
react-native-calendar 日历
react-native-collapsible 可折叠的component
React
Native Drawer 抽屉效果，可 用来实现侧拉菜单
react-native-dropdown下拉菜单
ReactNativeEffectsView 封装了iOS
8上的UIVisualEffectViews，在React Native中实现毛玻璃效果
react-native-gesture-password 手势解锁，支持iOS和Android
react-native-gifted-form 在React
Native中方便的使用表格
react-native-gifted-messenger 方便的实现聊天UI
react-native-grid-view 网格视图，类似iOS中的UICollectionView
react-native-keyboard-spacer 适用于iOS的根据键盘自动调整输入框
react-native-keyboardevents 监听键盘显示/隐藏
react-native-mapbox-gl 地图
react-native-maps 地图
react-native-material-kit 一组UI
Components，为了介绍 Material
Design
react-native-modalbox 用于模态显示的Component
react-native-orientation 监听设备旋转
react-native-parallax parallax效果
react-native-picker 选择器，可用于实现时间选择，区域选择
react-native-progress-hud ProgressHUD
react-native-controllers 封装了
原生的iOS 导航栏，tabbar，抽屉效果等。
react-native-search-bar 封装iOS原生UISearchBar
react-native-spinkit 一组Activity指示器
react-native-splashscreen App载入视图，启动后自动隐藏
react-native-vector-icons 3000+支持自定义的图标
react-native-invertible-scroll-view 逆向的ScrollView，从底部开始布局，适用于聊天等向上滑动来加载更多的情况
react-native-loading-spinner-overlay 加载中的提示spinner
,支持iOS/Android
react-native-tabs 选项卡可用于底部标签栏以及分段视图

Navigation

react-native-router-flux 一款很火的导航组件。
react-native-navbar 一款用于React
Native上的可定制的导航条。
react-native-tab-navigator 一款兼容Android、iOS的TabBar组件。
react-native-drawer-layout 抽屉组件。
react-native-drawer 另一款抽屉组件。
ex-navigator 封装Navigator,以Route为中心的Navigator

ViewPager

react-native-swiper 一款轮番滑动的组件。
react-native-looped-carousel 滚动轮播组件。

ListView&ScrollView

react-native-refreshable-listview 下拉刷新组件。
react-native-refresherw 下拉刷新组件。
react-native-drop-refresh 下拉刷新组件。
react-native-refresher 支持下拉刷新的listview
react-native-gifted-listview 下拉刷新和上拉加载的ListView
react-native-smart-pull-to-refresh-listview 下拉刷新组件。
react-native-pull 下拉刷新组件。
react-native-swipe-list-view 滑动删除组件。
react-native-swipeout iOS样式的划动删除组件。
react-native-sortable-listview 拖拽排序组件。
react-native-draggablelist 拖排序组件。
react-native-SortableList 拖拽排序组件。
react-native-tableview 桥接了原生的UITableView
react-native-sglistview 为了解决React
Native中ListView的内存问题

Text&Rich
Content

react-native-htmlview：HTML显示组件，渲染HTML
text 。

弹框

react-native-easy-toast：一款用于React
Native上消息提示弹框组件，使用方便，支持定义Toast，支持iOS,Android。
react-native-modal：模态框，作者已经将该组件添加到React
Native，所以开发者可以直接使用Modal;
react-native-popover：一款类似Android
popupwindow的弹出框组件。

音视频相机

react-native-barcodescanner 二维码扫描组件
react-native-camera 相机组件
react-native-image-picker 可以从相机或者相册选择图片
react-native-video 视频组建
react-native-image-crop-picker 图片选择器，支持对图片进行切割

图形动画

react-native-button 按钮，因为react-native没有提供button
react-native-scrollable-tab-view 滑动的tab视图
react-native-animatable 封装了很多动画，强烈推荐
react-native-lightbox 图片全屏预览
react-native-looped-carousel 视图轮播
react-native-svgkit 显示SVG格式图片
react-native-chart 绘图（折线图，柱状图，扇形图）
react-native-circular-progress 圆形的显示进度的视图
gl-react-native React
Native中使用OPENGL来实现复杂的图片和components渲染
react-native-viewpager 视图轮播，支持循环滚动，自定义视图。已做性能优化

数据存储

react-native-sqlite-storage iOS／Android上的Sqlite3封装
react-native-store 封装了react-native
AsyncStorage
realm-js 用JS来调用Realm

Web相关

react-native-safari-view 封装iOS中的 Safari
View Controller
react-native-webview-android 封装了Android中的Webview
react-native-webrtc A
WebRTC module for React Native.

系统相关

react-native-device-info 获取设备信息
react-native-barcodescanner 扫码
react-native-contacts 访问通讯录
react-native-fs 访问本地文件系统
react-native-push-notification 本地和远程通知
react-native-touch-id 调用TouchID认证

Material
Design

mrn：Material
Design组件库。
react-native-material-design：一款用于React
Native上的材料设计UI组件库。

工具包

react-native-mock 一个为ReactNative提供的测试框架
react-native-google-analytics google统计分析
react-native-fabric 统计分析，崩溃分析等
react-native-wechat 调用微信相关，比如分享，登录，支付
reactotron 在终端检测React
Dom和Reactive App
react-native-windows Windows平台的RN工具
react-native-webpack-server 用Webpack来编译React
Native App

TabLayout

react-native-scrollable-tab-view 一款用于React
Native上TabLayout组件。
react-native-tab-navigator TabBar切换视图
Teaset：一款React
Native UI框架，提供20+纯JS组件，可与React Native已有组件无缝组合使用，专注于内容展示与操作控制。

框架

NativeBase：一款融合了ES6用于在React
Native上创建创建高质量的Android&iOS APP的框架。
tcomb-form-native：强大的表单处理控件，支持
JSON 模式，可插拔的外观和感觉。

库

react-native-launch-image：用在React
Native上手动关闭iOS启动界面（Launch Screen）的工具。详细说明
RNShareSDK：一款基于原生平台ShareSDK的ReactNative插件,方便RN开发者集成各大社交平台的分享和授权功能。

工具

IDE

Nuclide：Nuclide
是 Facebook 推出的一套基于 Atom 的开发工具集。用于开发基于 Hack 的 Web 应用。提供自动完成和 JavaScript 类型检查，内建 React 开发支持，并支持 Facebook 最新的 React Native 库，支持 Facebook 的 Flow JavaScript 类型检查器。
WebStorm：JetBrains公司出品的用于前端开发的IDE，WebStorm有着JetBrains公司IDE的优良血统，是前端工程师的一个开发神器。另外，AndroidStudio也是基于JetBrains的IDE，这对于习惯了AndroidStudio的开发者来说，WebStorm无疑是一个最佳的选择。

其他

CodePush：CodePush
是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务。
Redux：用于JavaScript
apps上的一款可预见的状态管理框架。
redux-react-native-i18n An
i18n solution with plural forms support for React Native apps on Redux

视频

React
Native项目实战视频
React
Native免费自学视频
React.js
Conf 2016

新闻&讨论

ReactJS
真的好吗？

一次学习，随处可写

react-native-macos：使用React
Native和Cocoa组建macOS桌面应用。
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.
error:
no devices/emulators found
react-native
run-android时出现Could not download imagepipeline.aar
Undefined
symbols for architecture x86_64: “std::terminate()”
方法一：animated 

useNativeDriver

 is
not supported because the native animated module is missing
方法二：animated 

useNativeDriver

 is
not supported because the native animated module is missing
最终都需要将

libRCTAnimation.a

 文件导入 react-native
issues #11094
error:
unable to find utility "instruments", not a developer tool or in PATH
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
*.h
file-not-found
修改安卓app在手机上展示的名称

<resources>
<string name="app_name">Your_app_name_to_display</string>
</resources>

[/code]
修改安卓打包时apk的名字：如 

wabg.apk

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

}

[/code]

资源下载

(深入浅出ES6)ES6-in-depth
JavaScript
Promise迷你书(中文版)
React
Native API 电子书 for mac@UIExplorer