【React Native 】系统的了解一下今年GMTC直接改为大前端技术大会，里面就有多个主题跟RN有关，可见其畅销程

一.背景

今年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 框架命令打包