React Native 是大脸书出品的一个移动开发框架, 可以用前端的技术, 写出 Android iOS 原生的效果和性能, 地图, 传感器等相关的 API 也都经过封装, 可以用 JS 调用
- RN 是用前端技术来写的, 所以 npm 中的 百万 + 库都可以使用
- 不过 UI 方面的库不是很完善, 所以最好会 Android 或者 iOS 的原生开发, 而且很多第三方的服务, 比如分享, 第三方登录, 广告 等等都需要用原生的技术封装暴露给 JS
- 所以现阶段用纯 RN 写跨平台项目还是很难实现的
- 这个界面就是用 RN 实现的, 根本看不出来和其它原生页面的区别,
-
附近的老师右侧的3个圆圈, 是 Swift 的原生 View, 然后暴露给 JS 使用 - 如果 React 很 6 的话, 实现起来确实很快快捷, 不过点击之后的各种操作处理可能会比较复杂, 后面我们来说巧妙的解决办法.
Getting Started
由于 RN 发展和 版本迭代的速度很快, 所以学习 RN 首要参考的就是官方文档
- 安装 RN 有 2 种情况,
- 从 0 开始纯 RN 项目
- 已有的 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
这个问题可以简单的分为两种,
- 原生的方法暴露给 JS 调用
- 原生的 UIView 暴露给 JS 调用
由于 RN 的迭代速度很快, 所以首要参考的就是 官方文档, 索性文档写的很棒棒哦...
Swift 和 OC 的都有相关的文档, 原生的 Swift UI 可以参考 pure-swift-views-react-native
许多原生的 API 封装, 被分成 XXXiOS , XXXAndroid, 这些是平台的特殊实现, 我们也可以找一些第三方的, 跨平台的实现
最后
我的个人项目的其中一个页面, 用 RN 试水, 效果不错, 就是文章开头的截图,
RN 是一个潜力很大的项目, 今后希望能更多的接触 RN,
关于原生和 JS 调用方法, 跳转界面
- 比较 Trick 的实现是, 全都使用 Router, 比如 点击 RN 的一个按钮, 触发
sixue://userDetail/666这个 router, 含义是查看到用户 id 为666的详情界面 - 这样逼迫你把所有的 ViewContoller 写的更模块化更独立, 然后按钮触发的效果也可以在后台动态的修改, 所有 RN 端的事件处理都用 router 转到 Native 端接收并处理
- 这样大部分的 UI 界面都可以用 RN 跨屏台的书写完成, 提高了效率
