React Native 是大脸书出品的一个移动开发框架, 可以用前端的技术, 写出 Android iOS 原生的效果和性能, 地图, 传感器等相关的 API 也都经过封装, 可以用 JS 调用

RN 是用前端技术来写的, 所以 npm 中的百万 + 库都可以使用
不过 UI 方面的库不是很完善, 所以最好会 Android 或者 iOS 的原生开发, 而且很多第三方的服务, 比如分享, 第三方登录, 广告等等都需要用原生的技术封装暴露给 JS
所以现阶段用纯 RN 写跨平台项目还是很难实现的

Getting Started

由于 RN 发展和版本迭代的速度很快, 所以学习 RN 首要参考的就是官方文档

你需要 react-community/create-react-native-app, 和 Expo 的帮助, 它们俩能帮助你脱离 Android Studio 和 Xcode 进行编译, 打包, 发布应用

随着 Integration With Existing Apps 的指导就可以了, 需要你稍微了解一点 npm , 也就是 JS 版的 Cocoapods

接下来

前端这两年真的是一直在搞事情, ES 6, React, Vue, Node js ==, 简直是颠覆式的发展

下面是几个不错的资源, 帮助你了解 ES 6 等标准的发展

ES5, ES6, ES2016, ES.Next: JavaScript 的版本是怎么回事？「译」
ECMAScript-6-features
Babel : Learn ES2015
阮一峰 : ECMAScript 6 入门

建议先把官方文档的 The Basic 看完, 你就会大概对 RN 有个了解了

剩下的就是熟悉 Component 和强行写 React 的代码了

FlexBox 和 AutoLayout 的差别还是很多的, 有点像 Android LinearLayout 或者 StackView 的升级版, 不过学习成本很低
我在使用过程中, 除了发现, 偶尔需要多加一层不必要的 Container View 来调整布局之外, 没有什么明显的缺点

几篇 FlexBox 的教程, 学习难度很低

Layout with Flexbox
Understanding React Native flexbox layout
A Complete Guide to Flexbox

CodePush 是大微软出品的, 适用于 RN 的热更新解决方案, 是一个好用, 免费的热更新平台

Debug 时调试 CodePush 是否生效, 可以再 didLoadFinish 加入 RCTSetLogThreshold(.trace), 然后插线连接 Mac, 用 Console 过滤 Codepush 看日志

这个问题可以简单的分为两种,

由于 RN 的迭代速度很快, 所以首要参考的就是官方文档, 索性文档写的很棒棒哦...
Swift 和 OC 的都有相关的文档, 原生的 Swift UI 可以参考 pure-swift-views-react-native

Native Modules
Native UI Components

许多原生的 API 封装, 被分成 XXXiOS , XXXAndroid, 这些是平台的特殊实现, 我们也可以找一些第三方的, 跨平台的实现

我的个人项目的其中一个页面, 用 RN 试水, 效果不错, 就是文章开头的截图,
RN 是一个潜力很大的项目, 今后希望能更多的接触 RN,

比较 Trick 的实现是, 全都使用 Router, 比如点击 RN 的一个按钮, 触发 sixue://userDetail/666 这个 router, 含义是查看到用户 id 为 666 的详情界面
这样逼迫你把所有的 ViewContoller 写的更模块化更独立, 然后按钮触发的效果也可以在后台动态的修改, 所有 RN 端的事件处理都用 router 转到 Native 端接收并处理
这样大部分的 UI 界面都可以用 RN 跨屏台的书写完成, 提高了效率