RN笔记-原生应用跳转JS页面之坑

在react-native的道路上继续挖坑、填坑。

1、打离线包的终端命令行

react-native bundle --entry-file index.ios.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false

2、工程中导入离线包

离线包打好之后，要导入iOS工程，要勾选：Create folder references 如下图所示：

离线包导入ios工程.png

然后导入头文件：

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

3、调用rn插件的方法

首先原始的调用方法是:

    NSURL *jsCodeLocation;
    
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

这里要根据插件在本地还是在服务端，对应替换为：

    NSURL *jsCodeLocation;
    
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"]; //  本地
    
    jsCodeLocation = [NSURL URLWithString:@"http://192.168.2.13:8081/index.ios.bunfsfsfdle?ffsf=ios&dev=fsfs"];  // URL
    
    RCTRootView* rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"HelloWorld"
                                                 initialProperties:nil
                                                     launchOptions:nil];

    self.view = rootView;

4、_OBJC_CLASS_RCTRootView 报错

然后编译工程时，我遇到的问题是

编译报错.png

报错的原因是：Apple Mach-O Linker Error路径错误，找不到RCTRootView文件。

解决方案

导入RCTRootView.m和libReact.a

Project -> Build Phases -> Link Binary With Libraries -> add other -> RCTRootView.m

Project -> Build Phases -> Link Binary With Libraries -> libReact.a

RCTRootView路径.png

5、package.json之坑

如果编译程序依然报错，那么要检查package.json中的配置信息。当执行npm install时，系统会根据package.json中的配置信息安装node_modules依赖库。由于react-native的版本更新很快，我们需要配置最新版本的执行码，当前用的是0.40.0版本

{
  "name": "Dangxy_iOS",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "easier-react-native": "^1.0.4",
    "react": "~15.4.0-rc.4",
    "react-native": "0.40.0"
  },
  "devDependencies": {
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "jest": "18.1.0",
    "react-test-renderer": "~15.4.0-rc.4"
  },
  "jest": {
    "preset": "react-native"
  }
}

至此，iOS原生应用成功跳转JS页面，欢迎纠错补充..