目前支流的挪动跨平台技术计划大体能够分为三类，一类是应用原生内置浏览器加载 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)
            }
        }
    }

}