封装IOS原生组件的步骤

1、首先创建自定义的IOS原生组件类（如果是IOS已有组件则无需创建），然后再创建一个RCTViewManager的子类（RN组件桥接类）。

2、添加RCT_EXPORT_MODULE()宏标记。

3、实现-(UIView *)view方法，返回IOS原生组件的实例对象。

1、创建自定义的IOS原生组件类，再创建RN组件桥接类

（1）自定义的IOS原生组件类，继承UIView。

TestReactNativeView.h

//
//  TestReactNativeView.h
//  NativeCommunicationDemo
//
//  Created by chenlw on 2019/4/10.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface TestReactNativeView : UIView

@end

NS_ASSUME_NONNULL_END

TestReactNativeView.m

//
//  TestReactNativeView.m
//  NativeCommunicationDemo
//
//  Created by chenlw on 2019/4/10.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import "TestReactNativeView.h"

//ReactNative封装IOS原生组件，这里编写一个测试用的组件类
@implementation TestReactNativeView

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
}
*/

- (instancetype)init
{
    //初始化组件
    self = [super init];
    if (self) {
        self.backgroundColor = [UIColor redColor];
    }
    
    //创建一个文本组件
    UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(20,20,200,40)];
    //设置文字
    textView.text = @"IOS原生组件";
    //设置字体大小
    [textView setFont:[UIFont systemFontOfSize:20]];
    //添加文件组件
    [self addSubview:textView];
    
    return self;
}

@end

（2）创建RCTViewManager的子类（RN组件桥接类）

TestReactNativeViewManager.h

//
//  TestReactNativeViewManager.h
//  NativeCommunicationDemo
//
//  Created by chenlw on 2019/4/10.
//  Copyright © 2019 Facebook. All rights reserved.
//

//#import <React/RCTBridgeModule.h>
#import "React/RCTViewManager.h"

NS_ASSUME_NONNULL_BEGIN

@interface TestReactNativeViewManager : RCTViewManager<RCTBridgeModule>

@end

NS_ASSUME_NONNULL_END

TestReactNativeViewManager.m

//
//  TestReactNativeViewManager.m
//  NativeCommunicationDemo
//
//  Created by chenlw on 2019/4/10.
//  Copyright © 2019 Facebook. All rights reserved.
//

#import "TestReactNativeViewManager.h"
#import "TestReactNativeView.h"

@implementation TestReactNativeViewManager


//导出桥接宏标记
RCT_EXPORT_MODULE()

- (UIView *)view
{
    //创建组件实例
    TestReactNativeView * viewInstance =[[TestReactNativeView alloc] init];
    return viewInstance;
}

@end

2、添加RCT_EXPORT_MODULE()宏标记

在TestReactNativeViewManager桥接类当中，导出了RCT_EXPORT_MODULE()宏标记。

3、实现-(UIView *)view方法，返回IOS原生组件的实例对象

在TestReactNativeViewManager桥接类当中的- (UIView *)view方法里面，返回IOS原生组件的实例对象。

4、React-Native端使用IOS原生组件

对IOS原生组件再次封装

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

const TestReactNativeView = requireNativeComponent('TestReactNativeView', TestReactNativeViewComponent
    , {nativeOnly: {}});

//对封装的组件进行二次封装
class TestReactNativeViewComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <TestReactNativeView{...this.props}/>
        );
    }
}

TestReactNativeViewComponent.propTypes = {
    ...View.propTypes,
};

//导出二次封装的组件
module.exports = TestReactNativeViewComponent;

RN测试页面代码

import React, {Component} from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import TestReactNativeView from './TestReactNativeView';

const screenWidth = Dimensions.get('window').width;

/**
 * IOS原生组件封装，注意RN端设置组件的宽度和高度，这样组件才能显示。
 */
export default class TestReactNativeViewExample extends Component {

    static navigationOptions = {
        headerTitle: 'IOS原生组件封装example',
    };

    constructor(props, context) {
        super(props, context);
    }


    render() {

        return (
            <View style={styles.container}>
                <TestReactNativeView
                    style={{
                        flex: 1,
                        width: screenWidth,
                    }}
                />
            </View>
        )
    }


}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
});

5、运行效果图

以上，就是简单地封装IOS原生组件给RN使用的过程，组件的属性和事件后续还会继续说明。