iOS中集成RN

2018-11-30  本文已影响0人  宇丝
  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,完成即可

  1. 修改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
  1. 运行
    通过终端命令,cd 到 React文件夹,执行:react-native start 。启动RN服务
    运行iOS工程

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

  1. 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"];

上一篇下一篇

猜你喜欢

热点阅读