封装IOS原生组件——导出到RN端使用

小灰灰 2022-02-21 14:17 335阅读 0赞

# 封装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、运行效果图![Image 1][] ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70][]

以上，就是简单地封装IOS原生组件给RN使用的过程。

以下链接是说明如何导出组件的属性和事件到RN端。

导出IOS组件的属性到RN：[封装IOS原生组件——导出组件属性到RN端使用][IOS_RN]

导出IOS组件的事件到RN：[封装IOS原生组件——导出组件事件到RN端使用][IOS_RN 1]

[Image 1]: 
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzIxMzgy_size_16_color_FFFFFF_t_70]: /images/20220221/e895827973ef41948b8672b4e6e0407c.png
[IOS_RN]: https://blog.csdn.net/qq_33721382/article/details/89206364
[IOS_RN 1]: https://blog.csdn.net/qq_33721382/article/details/89208433