一.背景
今年GMTC直接改为大前端技术大会,里面就有多个主题跟RN有关,可见其畅销程度。虽然前段时间也有Airbnb 宣布放弃使用 React Native,回归使用原生技术,但在国内RN还是占据混合开发主流,伴随着人口红利,很有可能你正面临别人已经解过的问题,O(∩_∩)O哈哈~
附:
如此繁荣的移动webapp开发市场:总结当下的一些移动web开发套件
二.配置
环境及调试配置按照官网即可: 附:
启动指定设备:
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.拆包及热更新
58同城:基于拆分包的React Native在iOS端加载性能优化
React Native热更新部署/热更新-CodePush最新集成总结(新)
三.工程
下面介绍一下RN工程中的几个点:
3.1.Bundle
- bundle文件只有js代码,不包含图片等静态资源;
- debug模式:会为真机打bundle包,不会为模拟器打bundle包;release模式:必须用xcode编译才会打bundle包,此时无论是在模拟器还是在真机运行,都会打bundle包;
注: react-native-xcode.sh
脚本生成的bundle位置:
MyApp.app -> MyApp(显示包内容)
3.2.工程介绍
RN工程中JS与OC的实现过程: JSX(React) ----> 转化成javaScript ----> OC读取 ----> 利用JavaScriptCore执行 ----> javaScript代码返回一个数组(包含OC的对象,属性,方法)并执行;
附:
3.3.性能优化
四.学习
blog:(专题整理)
github:(star较多的学习资料)
本文主要是对React Native一些知识点总结,分享一些优秀资源,同时感谢?文中所引用链接作者的付出!!!!!