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

前言

---

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调用原生页面或View（场景三和场景四）的详细开发步骤

---

该示例实现的是：在RN页面里调用原生的MapView来展示和使用。

其实很简单的，无非就是为每个原生View都创建一个对应的、继承自RCTViewManager的子Manager来管理原生View，RN那边再创建相应的组件来接收一下这个导出的原生View就可以使用了。原生View和子Manager是一一对应的，我们会在子Manager里创建原生View、导出原生View、导出原生View的一些属性、导出原生View的一些事件来供RN调用这个原生View。

第一步：创建RN项目，打开对应的原生项目，直接编写原生部分的代码

既然是RN调用原生，这就表示RN项目是占主导地位的，因此我们就不需要额外地创建原生项目，再和RN项目建立连接供它调用了。而是直接打开RN项目对应的原生项目来编写原生部分的代码。

我们这里创建一个RN项目，名字叫作 HybridApp，然后打开它对应的iOS项目，直接编写原生部分的代码。

第二步：为MapView创建对应的子Manager来创建它、导出它、管理它

这里，我们为MapView创建一个对应的、继承自RCTViewManager的子Manager，名字叫作INEMapViewManager，来管理MapView。

// INEMapViewManager.h

#import 
#import 

@interface INEMapViewManager : RCTViewManager

@end


// INEMapViewManager.m

#import "INEMapViewManager.h"

@implementation INEMapViewManager

// 导出该原生View
RCT_EXPORT_MODULE(INEMapView)

// 创建并返回该原生View
- (UIView *)view
{
  MKMapView *mapView = [[MKMapView alloc] init];
  return mapView;
}

@end

上面有三个需要注意的地方：

• 我们的类名使用了INE前缀以避免与其它框架产生命名冲突。苹果自有框架使用了两个字符的前缀，而RN则使用RCT作为前缀。为避免命名冲突，我们建议您在自己的类中使用RNT以外的其它三字符前缀。
• 在使用RCT_EXPORT_MODULE()宏导出原生View的地方，名字取为类名除去Manager，比如这里的类名为INEMapViewManager，而导出的原生View则取名为INEMapView，到时候RN使用时会自动在后面添加Manager。
• 请不要在-view方法中给UIView实例设置frame或是backgroundColor属性，我们的选择是统一在RN项目里为组件添加这些布局属性。

第三步：在RN项目中调用该原生View

其实经过第二步，就这么简单，RN项目中已经可以调用该原生View了，我们来编写一些RN代码来看看效果。

// MapView.js

import {requireNativeComponent} from 'react-native';

// requireNativeComponent会自动把'INEMapView'解析为'INEMapViewManager'
export default requireNativeComponent('INEMapView');

// App.js

import React, {Component} from 'react';
import MapView from './js/MapView.js';

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

用Xcode运行一下项目，发现已经成功在RN项目里调用了原生的MapView，诸如捏放和其它的手势都已经完整支持。但是现在我们还不能真正得在RN项目控制它。

第四步：导出原生View的一些属性，供RN使用

举例来说，我们希望在RN项目中能够禁用地图的手指捏放操作。禁用捏放操作只需要一个布尔值类型的属性就行了，所以我们添加这么一行：

// INEMapViewManager.m

#pragma mark - 导出原生View的一些属性，供RN使用

RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)

导出的这些属性（如zoomEnabled）都是iOS里原生View的同名属性，乱改了可用不了的哦，类型也是同样的道理。

现在要想禁用捏放操作，我们只需要在RN项目设置对应的属性：

// App.js

但这样并不能很好的说明这个组件的用法——用户要想知道我们的组件有哪些属性可以用，以及可以取什么样的值，他不得不一路翻到OC的代码。要解决这个问题，我们可以创建改造一下MapView.js，让它通过PropTypes来说明这个组件都有哪些接口可用。

// MapView.js

import React, {Component} from 'react';
import {requireNativeComponent} from 'react-native';
import PropTypes from 'prop-types';

// 这里我们把requireNativeComponent的第二个参数从null变成了MapView，
// 就使得RN的底层框架可以检查该MapView的属性和原生View的是否一致，来减少出现问题的可能。
const INEMapView = requireNativeComponent('INEMapView', MapView);

export default class MapView extends Component {
    static propTypes = {
        /**
         * A Boolean value that determines whether the user may use pinch
         * gestures to zoom in and out of the map.
         */
        zoomEnabled: PropTypes.bool,
    };

    render() {
        return (
            
        );
    }
}

这样RN里的组件使用起来就更清晰了，现在用Xcode运行一下项目，就发现我们已经可以成功地禁用捏放操作了。

第五步：导出原生View的一些事件，供RN使用

现在在RN项目里，我们已经有了一个MapView，而且可以通过属性来控制它，不过我们怎么才能想iOS里那样来监听并处理用户对地图一些操作的事件呢，譬如拖动地图操作？

我们知道iOS里针对这些事件，都是有相关的代理方法来供我们监听并做处理的，而且上面我们已经成功地导出了原生View的属性，那我们就想到是不是可以为原生View添加一些block作为属性导出出去，并在这些代理方法里调用它们，这样RN那边就可以使用这些block作为回调监听我们对MapView的事件操作了。

没问题，这个思路很稳，可以实践。但是眼下有一个问题，我们导出的是系统的MKMapView啊，我们没法直接为它添加属性的，那我们就考虑使用Category或者继承来为系统的类添加属性了，这里我们就采用继承吧。于是我们自定义了一个继承自MKMapView的类，名字叫作INEMapView。

// INEMapView.h

#import 
#import 

@interface INEMapView : MKMapView

// 添加一个block，用来作为事件监听的回调
@property (nonatomic, copy) RCTBubblingEventBlock onRegionChange;

@end


// INEMapView.m

#import "INEMapView.h"

@implementation INEMapView

@end

然后修改修改INEMapViewManager。

// INEMapViewManager.h

#import 
#import 

@interface INEMapViewManager : RCTViewManager 

@end


// INEMapViewManager.m

#import "INEMapViewManager.h"
#import "INEMapView.h"

@implementation INEMapViewManager

// 导出该原生View
RCT_EXPORT_MODULE(INEMapView)

// 创建并返回该原生View
- (UIView *)view
{
    INEMapView *mapView = [INEMapView new];
    mapView.delegate = self;
    return mapView;
}


#pragma mark - 导出原生View的一些属性，供RN使用

RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)
RCT_EXPORT_VIEW_PROPERTY(onRegionChange, RCTBubblingEventBlock)


#pragma mark - MKMapViewDelegate

- (void)mapView:(INEMapView *)mapView regionDidChangeAnimated:(BOOL)animated
{
  if (mapView.onRegionChange) {
    
    MKCoordinateRegion region = mapView.region;
    mapView.onRegionChange(@{
                             @"region": @{
                                 @"latitude": @(region.center.latitude),
                                 @"longitude": @(region.center.longitude),
                                 @"latitudeDelta": @(region.span.latitudeDelta),
                                 @"longitudeDelta": @(region.span.longitudeDelta),
                                 }
                             });
  }
}

@end

但是在原生端看起来我们是给onRegionChange这个block传递了一个region对象，但实际传递过去的是一个事件对象event，而真正的region对象被包裹在event.nativeEvent对象里，所以为了在RN端使用起onRegionChange方法来更清晰，我们会在MapView对这个参数做做处理：

// MapView.js

import React, {Component} from 'react';
import {requireNativeComponent} from 'react-native';
import PropTypes from 'prop-types';

// 这里我们把requireNativeComponent的第二个参数从null变成了MapView，
// 就使得RN的底层框架可以检查该MapView的属性和原生View的是否一致，来减少出现问题的可能。
const INEMapView = requireNativeComponent('INEMapView', MapView);

export default class MapView extends Component {
    static propTypes = {
        /**
         * A Boolean value that determines whether the user may use pinch
         * gestures to zoom in and out of the map.
         */
        zoomEnabled: PropTypes.bool,

        /**
         * Callback that is called continuously when the user is dragging the map.
         */
        onRegionChange: PropTypes.func,
    };

    render() {
        return (
             {
                    if (this.props.onRegionChange) {
                        // 传递出去nativeEvent，这样外界在使用onRegionChange方法时就可以直接点出他们在原生部分传过来的参数了
                        this.props.onRegionChange(event.nativeEvent);
                    }
                }}
            />
        );
    }
}

// App.js

import React, {Component} from 'react';
import MapView from './js/MapView.js';

export default class App extends Component {
    render() {
        return (
             {
                    console.log(nativeEvent.region);
                }}
            />
        );
    }
}

好，经过这一堆操作就可以成功地导出原生View的一些事件，供RN使用了，快去运行试试吧。

第六步：导出原生界面

经过以上步骤，我们就成功地实现了RN调用原生组件，但其实RN调用原生页面和这个是一模一样的操作，只不过我们不能直接导出ViewController，而是导出ViewController.view供RN使用，也就是说RN只能使用原生页面上页面的部分，需要自己添加导航栏啊、TabBar啊什么的，如此而已。

- (UIView *)view
{
  ViewController *vc = [ViewController new];
  return vc.view;
}