一.背景
今年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 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
- bundle文件只有js代码，不包含图片等静态资源；
- 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较多的学习资料)
video：
点击进入
密码:dttp
本文主要是对React Native一些知识点总结，分享一些优秀资源，同时感谢🙏文中所引用链接作者的付出！！！！！
