React Native 试水

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

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

• 这个界面就是用 RN 实现的, 根本看不出来和其它原生页面的区别,
• 附近的老师 右侧的3个圆圈, 是 Swift 的原生 View, 然后暴露给 JS 使用
• 如果 React 很 6 的话, 实现起来确实很快快捷, 不过点击之后的各种操作处理可能会比较复杂, 后面我们来说巧妙的解决办法.

Getting Started

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

1. 安装 RN 有 2 种情况,
   1. 从 0 开始纯 RN 项目
   2. 已有的 OC Swift 项目 接入 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 布局

• 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 看日志

原生接口暴露给 JS

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

1. 原生的方法暴露给 JS 调用
2. 原生的 UIView 暴露给 JS 调用

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

Native Modules
Native UI Components

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

最后

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

关于原生和 JS 调用方法, 跳转界面

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