RN笔记-原生应用跳转JS页面之坑
2017-03-03 本文已影响1090人
金丝楠
在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
如下图所示:
然后导入头文件:
#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页面,欢迎纠错补充..