目前支流的挪动跨平台技术计划大体能够分为三类，一类是应用原生内置浏览器加载HTML5的Hybrid技术计划，采纳此种计划的次要有Cordova、Ionic和微信小程序；另一类是应用JavaScript语言进行开发，而后应用原生组件进行渲染，采纳此计划的次要有React Native、Weex和快利用；最初一类是应用自带的渲染引擎和自带的原生组件来实现跨平台，采纳此种计划的次要是Flutter。

对于其余的浏览器计划，根本能够摈弃了，当初咱们探讨挪动跨平台开发次要说的是React Native和Flutter，React Native和Flutter在利用开发上，效率差不多，不过要强调性能的话，还是Flutter为最佳抉择。因为当初大家都开始应用Flutter来开发利用，导致React Native的学习材料越来越少。

作为跨平台的忠诚粉丝，我在去年的下半年对《React Native挪动开发实战》进行了降级，出版了《React Native挪动开发实战》的第二版，书中对之前的常识做了从新的梳理，使之更加贴近我的项目实战，有须要的能够去京东，天猫反对下。

作为目前比拟风行的挪动跨平台开发计划之一，React Native依然还有很多的粉丝，特地是相熟前端React开发的技术人员，国内大厂都在应用哪些挪动跨平台框架列举了目前在应用跨平台技术进行利用开发的一些厂商。

React Native 学习资源精选

目录

<!-- TOC -->

  • 目录

  • 资源网站

    • ES6&ES7
    • React.js
    • React.js相干教程
    • React Native

  • 教程

    • 布局相干
    • 开发调试
    • 公布部署
    • 系列教程
    • 我的项目实际&教程
  • 开源APP
  • 框架
  • 库

  • 组件

    • UI
    • Navigation
    • ViewPager
    • ListView&ScrollView
    • Text&Rich Content
    • 弹框
    • 音视频相机
    • 图形动画
    • 数据存储
    • Web相干
    • 零碎相干
    • Material Design
    • 工具包
    • TabLayout

  • 工具

    • IDE
    • 其余
  • 视频
  • 新闻&探讨
  • 一次学习，随处可写
  • 一起踩坑
  • 资源下载

<!-- /TOC -->

资源网站

ES6&ES7

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

React.js

  • React官网
  • React中文网
  • React Router中文文档
  • React-China社区
  • 组件的具体阐明和生命周期（Component Specs and Lifecycle）

React.js相干教程

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

React Native

  • React Native 官网文档
  • React Native 中文版 - 极客学院
  • React Native 中文版 - reactnative.cn
  • React Native中文社区
  • React Native组件库网站
  • React Native组件库网站
  • Use 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与Iconfont
  • React Native Animation Book

我的项目实际&教程

  • 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
  • 优化 Redux 架构的 10 个技巧【译】

开源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图片上传实例
  • [movieapp] (https://github.com/junedoming... : Discover Movies and TV shows - React Native

框架

React-Native开发的库/ SDK类型。
  • NativeBase：一款交融了ES6用于在React Native上创立创立高质量的Android&iOS APP的框架。
  • tcomb-form-native：弱小的表单解决控件，反对 JSON 模式，可插拔的外观和感觉。
  • BlankApp UI：React Native的高度可定制和主题组件。
  • Shoutem UI：一个残缺React Native的UI工具包。
  • React Native Elements：React Native UI元素和组件的汇合。
  • Panza：收集无状态，功能性，跨平台的ui组件，用于React Native。

库

  • react-native-launch-image：用在React Native上手动敞开iOS启动界面（Launch Screen）的工具。具体阐明
  • RNShareSDK：一款基于原生平台ShareSDK的ReactNative插件,不便RN开发者集成各大社交平台的分享和受权性能。
  • react-native-social-kit：对第三方社交账号SDK的封装，使开发者能在React Native App里应用受权、分享等性能。
  • react-native-agora: 基于声网音视频SDK封装的React Native模块，不便RN开发者能够轻松集成WebRTC性能，实现电话会议，视频会议，直播等性能。

组件

UI

  • React-Native-Elements 一组开发RN的UI工具包（强烈推荐）
  • APSL/react-native-button 反对多种点击事件的Button控件
  • mastermoo/react-native-action-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-keyboard-aware-scroll-view 一个解决键盘外观的组件，主动滚动到焦点的TextInput
  • react-native-mapbox-gl 地图
  • airbnb/react-native-maps 针对iOS + Android的React Native Mapview组件
  • lelandrichardson/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-router 路由导航组件。
  • 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的内存问题
  • react-native-input-scroll-view 完满的TextInput ScrollView

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-gallery React Native图片组件库，反对常见手势。
  • lottie-react-native 基于Lactie封装的渲染After Effects动画

数据存储

  • 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-style-tachyons 为React Native提供更好的款式
  • react-native-css 应用css款式React-Native组件
  • 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已有组件无缝组合应用，专一于内容展现与操作控制。

工具

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上的一款可预感的状态治理框架。
  • MobX：与 Redux 相比，更轻便、自在的状态治理框架。
  • redux-react-native-i18n 具备复数模式的i18n解决方案反对Redux上的React Native应用程序
  • React Sight 用于React的可视化工具，反对Fiber，Router（v4）和Redux Chrome Plug github
  • React Developer Tools 一个扩大程序，容许查看Chrome和Firefox开发人员工具中的React组件层次结构。 Chrome Plug github
  • react-native-rename : Rename react-native app with just one command

视频

  • 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'

  • 利用反馈迟缓，呈现卡顿：

    1. 查看是否console日志打印适度造成
    2. 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>
  • 批改安卓打包时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)            }        }    }}