当你的iOS老项目中某一个模块用到RN时:
- 先制作一个文件package.json,cd到你想导入的目录再npm intsall,就会生成node_modules的依赖包
{
"name": "xxx", // 项目名字
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": { // 第三方库
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-native-swiper": "^1.5.4",
"react-native-viewpager": "^0.2.13",
}
}
导入第三方库
npm i xxx --save
比如npm i react-timer-mixin --save
- 使用cocoapod导入,Podfile文件如下:
pod 'Yoga', :path => './node_modules/react-native/ReactCommon/yoga' // 注意路径
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
]
- 修改index.ios.js文件
import React, { Component } from 'react';
import {
AppRegistry,
} from 'react-native';
var ConsultFileRoot = require('./component/ConsultFiles/ConsultFileRoot'); // 路径是项目中使用RN的两个模块
var EstimationRoot = require('./component/EstimateHousePrice/EstimateHousePriceRoot');
console.disableYellowBox = true;
AppRegistry.registerComponent('ConsultFileRoot', () => ConsultFileRoot);
AppRegistry.registerComponent('EstimationRoot', () => EstimationRoot);
- 跳转到RN模块控制器FJGRNRootController
#import "FJGRNRootController.h"
@interface ZYRNRootController ()
@property (nonatomic, strong) NSString *moduleName;
@property (nonatomic, strong) RCTRootView *moduleView;
@property (nonatomic, strong) NSDictionary *params;
@property (nonatomic, strong) NSDictionary *properties;
@property (nonatomic, strong) RCTBridge *bridge;
@end
@implementation ZYRNRootController
- (id)initWithModuleName:(NSString *)moduleName params:(NSDictionary *)params{
self = [super init];
if (self) {
self.params = params;
self.moduleName = moduleName;
if (self.params[@"title"]) {
self.title = self.params[@"title"];
}
}
return self;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.view = self.moduleView;
}
- (RCTRootView *)moduleView {
if (_moduleView == nil) {
_moduleView = [[RCTRootView alloc] initWithBridge:self.bridge
moduleName:self.moduleName
initialProperties:self.properties];
}
return _moduleView;
}
- (NSURL*)getBundleUrl{
// 离线包
return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
// 线上包
//return [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
}
- (RCTBridge *)bridge{
if (_bridge == nil) {
_bridge = [[RCTBridge alloc]initWithBundleURL:[self getBundleUrl] moduleProvider:nil launchOptions:nil];
}
return _bridge;
}
- (NSDictionary *)properties {
if (_properties == nil) {
_properties = [NSMutableDictionary dictionary];
NSString *properties = self.params[@"properties"];
if (properties) {
_properties = [NSJSONSerialization JSONObjectWithData:[properties dataUsingEncoding:NSUTF8StringEncoding] options:0 error:nil];
}
}
return _properties;
}
@end
调用:
// ConsultFileRoot是你RN模块名字
FJGRNRootController *ctl = [[FJGRNRootController alloc] initWithModuleName:@"ConsultFileRoot" params:nil];
[self.navigationController pushViewController:ctl animated:YES];