Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/crazycodeboy/react-native-awesome

React Native 学习资源精选仓库(汇聚知识,分享精华)汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。
https://github.com/crazycodeboy/react-native-awesome

List: react-native-awesome

react-native react-native-lesson react-native-resources react-native-study react-native-tutorial

Last synced: 3 days ago
JSON representation

React Native 学习资源精选仓库(汇聚知识,分享精华)汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。

Lists

README

        

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

[![](https://jaywcjlove.github.io/sb/ico/awesome.svg)](#目录) [![](https://jaywcjlove.github.io/sb/lang/chinese.svg)](https://github.com/crazycodeboy/react-native-awesome) [![](https://jaywcjlove.github.io/sb/lang/english.svg)](https://github.com/jondot/awesome-react-native)

React Native Awesome 汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。

>如果你是一名React Native爱好者,或者有一颗热爱钻研新技术的心,喜欢分享技术干货、项目经验、以及你在React Naive学习研究或实践中的一些经验心得等等,欢迎投稿[《React Native Awesome》](https://github.com/crazycodeboy/react-native-awesome)。
如果你是一名Android、iOS、或前端开发人员,有者一颗积极进取的心,欢迎关注[《React Native Awesome》](https://github.com/crazycodeboy/react-native-awesome)。本项目汇集了各类React Native学习资料、工具、组件、开源App、以及相关新闻等。

## 目录

* [资源网站](#资源网站)
* [React.js](#reactjs)
* [React Native](#react-native)
* [教程](#教程)
* [React.js](#reactjs-1)
* [React Native](#react-native-1)
* [文档手册](#文档手册)
* [布局相关](#布局相关)
* [开发调试](#开发调试)
* [发布部署](#发布部署)
* [ES6&ES7](#es6es7)
* [项目实践&教程](#项目实践教程)
* [系列教程](#系列教程)
* [开源APP](#开源app)
* [组件](#组件)
* [UI](#ui)
* [Navigation](#navigation)
* [ViewPager](#viewpager)
* [ListView&ScrollView](#listviewscrollview)
* [Text&Rich Content](#text-rich-content)
* [弹框](#弹框)
* [Material Design](#material-design)
* [TabLayout](#tablayout)
* [框架](#框架)
* [库](#库)
* [工具](#工具)
* [视频](#视频)
* [新闻&讨论](#新闻讨论)
* [一次学习,随处可写](#一次学习随处可写)
* [资源下载](#资源下载)

## 资源网站

### React.js

* [React官网](https://facebook.github.io/react/)
* [React-China社区](http://react-china.org/)

### 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+Redux打造高质量上线App](http://coding.imooc.com/class/304.html)![ hot](http://www.devio.org/img/ico/ico_hot.gif)
* [Redux开发实用教程](http://www.imooc.com/article/281446)![ new](http://www.devio.org/img/ico/ico_new.gif)
* [React Native+react-navigation+redux开发实用教程](http://www.imooc.com/article/283337)![ new](http://www.devio.org/img/ico/ico_new.gif)
* [React Native+Redux开发实用教程](http://www.imooc.com/article/283047)![ new](http://www.devio.org/img/ico/ico_new.gif)
* [React Native开发之必备React基础](http://www.imooc.com/article/279228)
* [『React Navigation 3x系列教程』createDrawerNavigator开发指南](http://www.imooc.com/article/273065)
* [『React Navigation 3x系列教程』createMaterialTopTabNavigator开发指南](http://www.imooc.com/article/271652)
* [『React Navigation 3x系列教程』之createBottomTabNavigator开发指南](http://www.imooc.com/article/269529)
* [『React Navigation 3x系列教程』之React Navigation 3x开发指南](http://www.imooc.com/article/267857)
* [『React Navigation 3x系列教程』之createStackNavigator开发指南](http://www.imooc.com/article/268381)
* [React Native 混合开发(Android篇)](http://www.devio.org/2018/08/26/React-Native-Hybrid-Android/)
* [React Native 混合开发(iOS篇)](http://www.devio.org/2018/08/26/React-Native-Hybrid-iOS/)
* [React Native年度报告(2017-2018)](http://www.devio.org/2018/02/26/React-Native-Annual-Report-2017-2018/)
* [React Native0.50+开发指导](http://www.devio.org/2017/12/12/React-Native0.50-Development-Guide-Chinese-update-instructions/)
* [React Native 开发适配心得](http://www.devio.org/2017/10/06/How-to-develop-a-React-Native-application-for-Android-and-iOS-dual-platforms/)
* [React Native 集成分享第三方登录功能分享第三方登录模块开发(iOS)](http://www.devio.org/2017/09/30/React-Native-integration-share-third-party-login-function-ios/)
* [React Native 集成分享第三方登录功能分享第三方登录模块开发(Android)](http://www.devio.org/2017/09/10/React-Native-integration-share-third-party-login-function/)
* [教你轻松在React Native中集成统计的功能)](http://www.devio.org/2017/09/03/React-Native-Integrated-analysis-function/)
* [React Native免费自学视频](http://www.imooc.com/learn/808)
* [快速创建React Native App](http://www.devio.org/2017/07/12/quickly-create-react-native-app/)
* [手把手教你构建运行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#)
* [Mac(OSX)平台搭建React Native开发环境](http://www.devio.org/2016/05/20/React-Native-development-environment-build-mac-platform/)
* [Windows平台搭建React Native开发环境](http://www.devio.org/2016/05/20/React-Native-development-environment-build-Windows-platform/)

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

#### 布局相关

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

#### 开发调试

* [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应用部署/热更新-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/)

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

### 系列教程

* [React Native项目实战视频教程](http://coding.imooc.com/class/304.html)![ hot](http://www.devio.org/img/ico/ico_hot.gif)
* [React Native免费自学视频](http://www.imooc.com/learn/808)
* [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)

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

## 组件

### UI

- [react-native-vector-icons ★2281](https://github.com/oblador/react-native-vector-icons):用于 React Native的可定制的图标资源库,支持 NavBar/TabBar, image source 以及样式。

### Navigation

* [react-native-router-flux](https://github.com/aksonov/react-native-router-flux):一款很火的导航组件。
* [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):另一款抽屉组件。

### 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-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):拖拽排序组件。

### 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的弹出框组件。

### 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组件库。

### TabLayout

* [react-native-scrollable-tab-view](https://github.com/skv-headless/react-native-scrollable-tab-view):一款用于React Native上TabLayout组件。

## 框架

* [NativeBase](https://github.com/GeekyAnts/NativeBase):一款融合了ES6用于在React Native上创建创建高质量的Android&iOS APP的框架。
* [tcomb-form-native](https://github.com/gcanti/tcomb-form-native):强大的表单处理控件,支持 JSON 模式,可插拔的外观和感觉。

## 库

* [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开发者集成各大社交平台的分享和授权功能。

## 工具

### 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) An i18n solution with plural forms support for React Native apps on Redux

## 视频

* [React Native+Redux实战视频](http://coding.imooc.com/class/304.html)
* [React Native项目实战视频](http://coding.imooc.com/class/304.html)
* [React Native免费自学视频](http://www.imooc.com/note/808?sort=last&page=1)
* [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应用。

## 资源下载

* [(深入浅出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)