React native-封装原生组件(iOS)

React native在项目实际开发过程，会发现React native封装了部分iOS 和 Android通用组件，如果有自定义的通用组件需要提供给React native 使用，需要自行解决.

自定义ScrollListView:

#import <UIKit/UIKit.h>
#import <React/RCTComponent.h>

@interface ScrollListView : UIView

@property (strong, nonatomic) UIButton *button;

@property (nonatomic, copy) RCTBubblingEventBlock onChange;

@end

- (instancetype)init {
    self = [super init];
    if (self) {
        [self setup];
    }
    return self;
}

- (void)setup {
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    button.frame = CGRectMake(50, 100, 200, 50);
    button.backgroundColor = [UIColor yellowColor];
    button.titleLabel.font = [UIFont systemFontOfSize:13];
    [button setTitle:@"UIButton 组件" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    self.button = button;
    [self addSubview:button];
}

自定义继承RCTViewManager的RCTScrollListManager:

#import <React/RCTViewManager.h>

@interface RCTScrollListManager : RCTViewManager

@end

#import "RCTScrollListManager.h"
#import "ScrollListView.h"

@interface RCTScrollListManager()

@property (strong, nonatomic) ScrollListView *scrollListView;

@end

@implementation RCTScrollListManager

RCT_EXPORT_MODULE()

RCT_EXPORT_VIEW_PROPERTY(pullState, NSInteger)

RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)

- (UIView *)view {
    if (!self.scrollListView) {
        self.scrollListView = [[ScrollListView alloc] init];
        [self.scrollListView.button addTarget:self action:@selector(callBackAction:) forControlEvents:UIControlEventTouchUpInside];
    }
    return self.scrollListView;
}

- (void)callBackAction:(UIButton *)button {
    self.scrollListView.onChange(@{@"name":@"FlyElephant"});
}

@end

view方法中自定义封装的类，RCT_EXPORT_VIEW_PROPERTY宏定义可以到处属性.

React native 引用封装的组件:

import React, {
    Component,
    PropTypes
} from 'react';


import { requireNativeComponent } from 'react-native';

let RCTScrollList = requireNativeComponent('RCTScrollList', TestView);

export default class TestView extends Component {

    constructor(...args) {
        super(...args);
    }

    componentDidMount() {
    }

    componentWillUnmount(){

    }

    _onChange = (event: Event) => {
        console.log("FlyElephant success");
    }

    render() {
        return <RCTScrollList {...this.props} onChange={this._onChange} />;
    }
}

FlyElephant.png