iOS中集成RN iOS中集成RN

【iOS中集成RN】准备好初始化完成的 RN项目(通过react-native可以运行起来的) 和 iOS项目
修改iOS项目为pod工程
通过终端命令 cd 到iOS根目录
执行：pod init 初始化pod，会在根目录生成Podfile文件
执行：pod install ，此时pod项目就完成创建好了。之后再打开项目的时候使用.xcworkspace文件即可
在iOS项目下创建React文件夹
将RN项目根目录下面的App.js、app.json、index.js、package.json拷贝到React文件夹下面
修改app.json中的name和displayName为 iOS工程的名称
修改package.json中的name 为 iOS工程的名称
安装RN依赖包
通过终端命令cd 到 React 目录
执行：npm install
完成后会在React目录中生成一个node_modules文件夹
添加React Native框架
打开podfile文件进行修改
最低适配版本使用，platform :ios, "9.0"
添加pod依赖，如下：

# 'node_modules'目录一般位于根目录中 # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path` pod'React', :path => './React/node_modules/react-native', :subspecs => [ 'Core', 'CxxBridge', 'DevSupport', 'RCTText', 'RCTNetwork', 'RCTWebSocket', ] # 如果你的RN版本 >= 0.42.0，则加入下面这行。 pod"yoga", :path => "./React/node_modules/react-native/ReactCommon/yoga" # 这里注意：如果是0.49以下的RN，则使用下面这条： # pod "Yoga", :path => "./React/node_modules/react-native/ReactCommon/yoga"# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖 pod'DoubleConversion', :podspec => './React/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' pod'glog', :podspec => './React/node_modules/react-native/third-party-podspecs/glog.podspec' pod'Folly', :podspec => './React/node_modules/react-native/third-party-podspecs/Folly.podspec'

cd 到iOS项目根目录，执行pod install，完成即可

修改iOS代码
代码：

#import NSURL* jsCodeLocation; NSString * strUrl = @"http://localhost:8081/index.bundle?platform=ios&dev=true"; jsCodeLocation = [NSURLURLWithString:strUrl]; NSDictionary *params = @{@"componentName":@"MeApp1", @"args":@{@"params":@"这是原生传递的参数"}}; RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"YSQrCode" initialProperties:params launchOptions:nil]; self.view = rootView;

注意项目要允许使用http请求，配置如下图：

文章图片
image

运行
通过终端命令，cd 到 React文件夹，执行：react-native start 。启动RN服务
运行iOS工程

至此就可以看到RN的界面了

RN打包

使用 react-native bundle --help 来查看打包的具体参数（全是英文，看中文吧） react-native bundle [参数] 构建 js 离线包 Options: -h, --help 输出如何使用的信息 --entry-file RN入口文件的路径, 绝对路径或相对路径 --platform [string] ios 或 andorid --transformer [string] Specify a custom transformer to be used --dev [boolean] 如果为false, 警告会不显示并且打出的包的大小会变小 --prepack 当通过时, 打包输出将使用Prepack格式化 --bridge-config [string] 使用Prepack的一个json格式的文件__fbBatchedBridgeConfig 例如: ./bridgeconfig.json --bundle-output打包后的文件输出目录, 例: /tmp/groups.bundle --bundle-encoding [string] 打离线包的格式可参考链接[https://nodejs.org/api/buffer.html#buffer_buffer.](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] 命令行的配置文件路径

打包流程（ios,安卓好像不需要打离线包）：
1.cd到RN工程目录
2.终端输入打包命令
react-native bundle --entry-file index.js --bundle-output ./ios/index.jsbundle --platform ios --assets-dest ./ios/bundle --dev false
3.将生产的jsbundle文件导入iOS项目中，修改
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"jsbundle"];