iOS中集成RN

1. 准备好初始化完成的 RN项目(通过react-native可以运行起来的) 和 iOS项目

2. 修改iOS项目为pod工程
   通过终端命令 cd 到iOS根目录
   执行：pod init 初始化pod，会在根目录生成Podfile文件
   执行：pod install ，此时pod项目就完成创建好了。之后再打开项目的时候使用.xcworkspace文件即可

3. 在iOS项目下创建React文件夹
   将RN项目根目录下面的App.js、app.json、index.js、package.json拷贝到React文件夹下面
   修改app.json中的name和displayName为 iOS工程的名称
   修改package.json中的name 为 iOS工程的名称

4. 安装RN依赖包
   通过终端命令cd 到 React 目录
   执行：npm install
   完成后会在React目录中生成一个node_modules文件夹

5. 添加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，完成即可

6. 修改iOS代码
   代码：

    #import <React/RCTRootView.h>

    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

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

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

8. RN打包

使用 react-native bundle --help 来查看打包的具体参数（全是英文，看中文吧）
react-native bundle [参数] 构建 js 离线包
Options:
　　-h, --help 输出如何使用的信息
　　--entry-file <path> 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 <string> 打包后的文件输出目录, 例: /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"];