混合开发：原生调用RN页面或组件

前言

---

RN和iOS混合开发的几种场景。

• 原生项目中，调用部分RN页面。
• 原生页面中，调用部分RN组件。
• RN项目中，调用部分原生页面。
• RN页面中，调用部分原生View。
• RN项目中，调用部分原生模块。

场景一和场景二其实是一样的，因为在RN看来，页面和组件在广义上都是组件，对应于原生里的View。

场景三和场景四是一样的，因为无论RN要调用原生的页面还是View，我们最终都是把原生的View交给它调用。还是那句话，RN那边的组件对应原生里的View，而没法对应ViewController。

场景五和场景三、场景四的区别在于，RN调用原生页面或View是指调用原生视图层面的东西来做UI布局的，而RN调用原生模块是指调用原生功能层面的东西来实现某个功能（例如调用日历、通讯录等模块，调用分享、三方登录、支付等三方SDK，调用我们自己的某些功能代码块，等等）。

这一篇我们先讲解原生调用RN页面或组件（场景一和场景二）的详细开发步骤，下一篇讲解RN调用原生页面或View（场景三和场景四）的详细开发步骤，下下一篇讲解RN调用原生模块（场景五）的详细开发步骤。

示例：原生调用RN页面或组件（场景一和场景二）的详细开发步骤

---

该示例实现的是：原生的ViewController里直接调用RN的TextAndImageView组件，点击跳转后调用RN的Page1界面。

其实很简单的，无非就是RN那边写好界面和组件，原生这边创建相应的ViewController和RCTRootView来包裹一下RN那边的界面和组件，这样原生就可以成功调用RN那边的界面和组件了。当然这中间要用CocoaPods来为原生项目添加并管理一些RN的依赖库——这样原生项目和RN项目之间才能建立连接。

第一步：创建一个原生项目

我们这里创建一个原生项目，名字叫作HybridApp。

第二步：创建一个RN项目

我们这里创建一个RN项目，名字叫作 HybridApp_RN，用来编写HybridAppRN部分的代码。

创建好后，项目的目录结构如下。

但因为这个RN项目是用来辅助我们自己的HybridApp项目开发的，所以它里面不能是默认的那个android和ios项目，我们要删掉它俩，替换成我们自己的iOS项目和安卓项目（比如这里我们会把上一步创建的HybridApp拖进去，安卓项目也是同理）。

删除并替换后，项目的目录结构如下。

第三步：建立原生项目和RN项目之间的连接——通过CocoaPods来为原生项目添加并管理一些RN的依赖库

其实最终我们是把RN项目打成JS包，下载下来放到原生项目中使用的。而我们推荐的方式就是使用CocoaPods来完成RN项目代码的下载，并且还用它来为我们的原生项目添加并管理一些RN的依赖库（即使用RN的哪些组件）。

因此接下来，我们在原生项目中创建一个Podfile，为原生项目添加需要的RN依赖库。

我们在决定要进行混合开发的时候，其实已经知道了具体要使用RN的哪些组件。因此在创建Podfile文件的时候，也就知道了具体要为原生项目添加哪些RN依赖库。比如，一般来说你首先需要添加Core，这一依赖库包含了必须的AppRegistry、StyleSheet、View以及其他的一些RN的核心库；如果你想使用RN的Text库（即组件），那就需要添加RCTText依赖库；如果你想使用RN的Image库（即组件），那就需要添加RCTImage依赖库，等等。

我们可以按下面的格式及内容，根据自己的实际需求作调整后，复制到Podfile文件里。（注意如果出错的话，一般是路径问题，可以在RN项目的node_modules/react-native路径下查看官方是不是把库的路径给挪动了，做下调整就可以了）

platform :ios, '10.0'

# target的名字一般与你的项目名字相同
target 'HybridApp' do
    # 如果你正在使用Swift或想要使用动态框架，请取消注释下一行
    # use_frameworks!

    # 'node_modules'目录一般位于根目录中
    pod 'React', :path => '../node_modules/react-native/'
    pod 'React-Core', :path => '../node_modules/react-native/React'
    pod 'React-DevSupport', :path => '../node_modules/react-native/React'
    pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
    pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
    pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
    pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
    pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
    pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
    pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
    pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
    pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
    pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'
    
    pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
    pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
    pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
    pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
    pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
    
    pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
    pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
    pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

这样原生项目的Podfile就创建好了，接下来我们在终端里cd到原生项目的目录下，然后再执行pod install命令（这一步会很慢，建议翻墙）。

添加依赖库成功后，终端会有类似如下的输出。

同时我们的文件夹下会多出几个文件。

以后我们就通过箭头指的那个白色文件打开原生项目。

第四步：原生项目设置App Transport Security Settings

由于在开发阶段，我们的原生应用需要加载本地服务器上的RN项目JS包，它是通过http协议传输的，所以原生项目需要以下设置App Transport Security Settings来支持http协议的请求。

NSAppTransportSecurity
    
        NSAllowsArbitraryLoads
        
    

第五步：编写RN部分的代码

假设原生项目想调用RN的一个界面Page1和一个组件TextAndImageView。

// Page1.js

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
} from 'react-native';

export default class Page1 extends Component {
    render() {
        return (
            
                {'Page1'}
            
        );
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(234, 234, 234, 1)',

        justifyContent: 'center',
        alignItems: 'center',
    },
});

// TextAndImageView.js

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    Dimensions,
} from 'react-native';

const {width, height} = Dimensions.get('window');

export default class TextAndImageView extends Component {
    render() {
        // 原生项目会给这个组件传递数据过来，接收一下
        const name = this.props.name;

        return (
            
                {'这是：' + name}
                
            
        );
    }
};

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'pink',

        width: width,
        height: 30 + 180,

        alignItems: 'center',
    },
    text: {
        height: 30,
    },
    image: {
        width: width,
        height: 180,
    },
});

然后我们需要在index.js文件里向RN注册这些界面和组件（其实广义来说都是组件了），以便将来原生项目调用。

// index.js

import {AppRegistry} from 'react-native';
import Page1 from './js/Page1';
import TextAndImageView from './js/TextAndImageView';

// 注册原生项目要使用的界面，第一个参数必须是字符串，将来原生项目要用的
AppRegistry.registerComponent('Page1', () => Page1);
// 注册原生项目要使用的组件
AppRegistry.registerComponent('TextAndImageView', () => TextAndImageView);

第六步：在原生项目里创建对应的ViewController和RCTRootView来包裹一下RN那边的界面和组件，就可以调用了

// ViewController.m

#import "ViewController.h"
#import "Page1ViewController.h"

#import 
#import 

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initRCTRootView];
}
    
// 读取RN的组件
- (void)initRCTRootView {
    NSURL *jsBundleURL = [self getJSBundleURL];
    
    // bundleURL：RN项目JS包的地址
    // moduleName：该界面想要盛放哪个RN界面，要和index.js里注册的名字一致
    // initialProperties：接受一个NSDictionary类型的参数，来作为RN初始化时传递给JS的初始化数据
    // launchOptions：主要在AppDelegate加载JS包时使用，这里传nil就行
    RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL:jsBundleURL moduleName:@"TextAndImageView" initialProperties:@{@"name": @"Angelababy"}
                                                    launchOptions: nil];
    rootView.frame = CGRectMake(0, 200, rootView.frame.size.width, rootView.frame.size.height);
    [self.view addSubview:rootView];
}
    
    // 读取RN项目JS包的两种方式
- (NSURL *)getJSBundleURL
    {
#if DEBUG
        // 开发环境下，RN项目的JS包是挂在本地服务器上的，要这样读取
        return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
        // 生产环境下，RN项目的JS包是打包在我们项目里，要这样读取
        return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
    }

- (IBAction)goToPage1:(id)sender {
    
    Page1ViewController *vc = [Page1ViewController new];
    [self.navigationController pushViewController:vc animated:YES];
}

@end

// Page1ViewController.m

#import "Page1ViewController.h"
#import 
#import 

@interface Page1ViewController ()

@end

@implementation Page1ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initRCTRootView];
}

- (void)initRCTRootView {
    NSURL *jsBundleURL = [self getJSBundleURL];
    
    RCTRootView *rootView =[[RCTRootView alloc] initWithBundleURL:jsBundleURL moduleName:@"Page1" initialProperties:nil
                                                    launchOptions: nil];
    self.view = rootView;
}

- (NSURL *)getJSBundleURL
{
#if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

第七步：开发阶段，启动RN项目的本地服务器，然后运行原生项目查看混合开发的效果、调试

因为我们这个项目不是纯RN项目，所以没办法在Xcode运行项目的时候就默认调起RN的本地服务器，需要我们手动打开。

于是我们打开终端，cd到RN项目下，调用npm start命令来启动RN项目的本地服务器。出现下图红框所示，就表示本地服务器已经调起来了，我们就可以去运行原生项目到模拟器或真机上看效果了。

可见已经可以在原生项目中成功调用RN的界面和组件了。

当然实际开发中我们RN部分的代码会更多更复杂，那就需要常常改动代码来调试。而调试这种混合开发的App和调试一个纯RN开发的App是一样的，但凡我们使用了RN界面或组件的控制器里你都可以Command + D打开RN开发者菜单，Command + R进行reload JS，其它的调试技巧也都是一样的，当然没有使用的控制器是不能这样调试的。

第八步：打包上线

经过上面的一些步骤，我们就完成了原生调用RN的混合开发，但是我们在打包上线的时候会发现，RN部分的代码并不在我们的Xcode里，所以就没法被打包进ipa包中，这就没法使用RN的代码了。

所以说，这里还需要把RN部分的代码，打包成一个JS包，拖进我们的原生项目中，再打ipa包才行。

但是打出来的JS包必须放在一个名为release_ios的文件夹下，所以我们得在执行打包命令之前先创建一个release_ios的文件夹。打开终端，cd到你的RN项目路径下，执行mkdir release_ios命令来创建。

release_ios文件夹创建完成后，执行react-native bundle --entry-file index.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/命令，对RN代码进行打包。

命令参数解释：

-entry-file index.js：代表js的入口文件为index.js
--platform ios：代表打包导出的平台为iOS
--dev false：代表关闭JS的开发者模式
--bundle-output：后面跟的是打包后将JS包导出到的位置
--assets-dest：后面跟的是打包后的一些资源文件导出到的位置

打包完成后，会在release_ios文件夹下生成main.jsbundle文件和assets文件夹（如果RN中用到了一些图片资源的话）。

我们把这两个东西拖到iOS项目中就可以了，这样原生项目就可以脱离本地服务器来加载RN部分的代码了，我们就可以打ipa包发布到AppStore了。

注意：打包完成后，加载包中的图片有可能加载不出来，可参看这篇文章。

当然最简单的办法，就是你在加载项目中图片时也直接使用uri而非require的方式就没问题，即：

替换成

且图片不填相对路径、不填后缀名，仅仅写个名字就ok了。