【React Native 】系统的了解一下

一.背景

今年GMTC直接改为大前端技术大会，里面就有多个主题跟RN有关，可见其畅销程度。虽然前段时间也有Airbnb 宣布放弃使用 React Native，回归使用原生技术，但在国内RN还是占据混合开发主流，伴随着人口红利，很有可能你正面临别人已经解过的问题，O(∩_∩)O哈哈~

附:

移动端跨平台开发的深度解析

如此繁荣的移动webapp开发市场：总结当下的一些移动web开发套件

二.配置

环境及调试配置按照官网即可: 附:

React Native 中文网

启动指定设备:

react-native run-ios --simulator "iPhone 8”
复制代码

查看具体可用设备名称:

xcrun simctl list devices
复制代码

2.1.导入RN到现有工程

按照官网可以初始化一个已配置好的RN工程, 这里介绍一下导入到现有工程:

2.1.1.手动导入

iOS-在现有项目中添加React Native（手动RNDemo）

2.1.2.cocoapods导入

iOS 和 React Native 混合编程（在现有的项目基础上导入React Native） 注：

RN每次编译的时候运行的react-native-xcode.sh脚本路径是相对于工程.xcodeproj而言的, 如果工程文件层级变动需要更改下图该路径;xcode的文件路径../代表一级, ../../代表两级,与js文件路径不同需要注意一下;

2.2.打包相关

2.2.1.离线包

React Native之打包

附:

react-native bundle [参数] 
构建js离线包 
选项: 
-h, --help 输出如何使用的信息 
--entry-file <path> RN入口文件的路径, 绝对路径或相对路径 
--platform [string] iOS或Andorid 
--transformer [string] 指定一个transformer被使用 
--dev [boolean] 如果为false, 警告会不显示并且打出的包的大小会变小 
--prepack 当通过时, 打包输出将使用Prepack格式化 
--bridge-config [string] 使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeConfig.json 
--bundle-output <string> 打包后的文件输出目录, 例: /tmp/groups.bundle 
--bundle-encoding [string] 打离线包的格式 可参考链接(https://nodejs.org/api/buffer.html#buffer_buffer). 
--sourcemap-output [string] 生成Source Map，但0.14之后不再自动生成source map，需要手动指定这个参数。例: /tmp/groups.map --assets-dest [string] 打包时图片资源的存储路径 
--verbose 显示打包过程 
--reset-cache 移除缓存文件 
--config [string] 命令行的配置文件路径

eg:
react-native bundle --entry-file index.ios.js --bundle-output ./ios/main.jsbundle --platform ios --assets-dest ./bundle --dev false
复制代码

ReactNative - 打离线包 (一) 原生RN命令打包

ReactNative - 打离线包 (二) 携程 Moles-Packer 框架命令打包

2.2.2.拆包及热更新

react-native热更新全方位讲解

58同城:基于拆分包的React Native在iOS端加载性能优化

React Native热更新部署/热更新-CodePush最新集成总结(新)

ReactNative增量升级方案

三.工程

下面介绍一下RN工程中的几个点:

3.1.Bundle

1. bundle文件只有js代码，不包含图片等静态资源；
2. debug模式：会为真机打bundle包，不会为模拟器打bundle包；release模式：必须用xcode编译才会打bundle包，此时无论是在模拟器还是在真机运行，都会打bundle包；

react-native bundle 解释与拆解

React Native打包代码解析与拆分Bundle做法

---

注： react-native-xcode.sh脚本生成的bundle位置:

MyApp.app -> MyApp(显示包内容)

---

3.2.工程介绍

RN工程中JS与OC的实现过程: JSX(React) ----> 转化成javaScript ----> OC读取 ----> 利用JavaScriptCore执行 ----> javaScript代码返回一个数组(包含OC的对象，属性，方法)并执行;

附：

【React Native】从源码一步一步解析它的实现原理

3.3.性能优化

附：

React Native性能优化总结

四.学习

blog：(专题整理)

React Native学习资料

github：(star较多的学习资料)

• awesome-react-native
• RNStudyNotes
• react-naive-book
• react-native-guide
• react-native-lesson

本文主要是对React Native一些知识点总结，分享一些优秀资源，同时感谢?文中所引用链接作者的付出！！！！！