RN与iOS 项目混用

当你的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];