D16D4151-7CE9-4FFC-861A-C94606D6E62D.png
RN与原生之间的通信有很多文章已经讲到了，包括react native 中文网，之前我也是看了一些然后实现，基本能看明白，但是在实现过程中最重要的坑没有说到，这导致我在实现的总是只能得到一个红色的view.
假设我在xcode里已经写好的一个原生的view，起名HorizontalPickerViews（HorizontalPickerViews.h和HorizontalPickerViews.m），这个view就是我们要桥接到RN里的view,再写一个管理该view的类RNHorizontalPickerViewManager（最大的坑这里，这里的命名后面会用到）。
//
// RNHorizontalPickerManager.h
//
// Created by zun on 2017/11/2.
// Copyright © 2017年 Facebook. All rights reserved.
//
#import <React/RCTViewManager.h>
@interface RNHorizontalPickerViewManager : RCTViewManager
@end
//
// RNHorizontalPickerManager.m
//
// Created by zun on 2017/11/2.
// Copyright © 2017年 Facebook. All rights reserved.
//
#import "RNHorizontalPickerViewManager.h"
#import <React/UIView+React.h>
#import <React/RCTUIManager.h>
#import <React/RCTBridge.h>
#import <React/RCTEventDispatcher.h>
#import "HorizontalPickerViews.h"
#define kScreenWidth [UIScreen mainScreen].bounds.size.width
@interface RNHorizontalPickerViewManager()<HorizontalPickerViewDelegate>
@property (nonatomic, strong) HorizontalPickerViews *hpv;
@end
@implementation RNHorizontalPickerViewManager
RCT_EXPORT_MODULE()
//需要导出的属性或者方法写在这，这在rn里传过来，一般是数据源和方法
RCT_EXPORT_VIEW_PROPERTY(onItemClicked, RCTBubblingEventBlock);
RCT_EXPORT_VIEW_PROPERTY(values,NSArray);
//在桥接类RNHorizontalPickerViewManager里实现- (UIView *)view方法，在这个方法里获得你要的view然后return出来
- (UIView *)view
{
_hpv = [[HorizontalPickerViews alloc]initWithFrame:CGRectMake((kScreenWidth - kScreenWidth*0.8)/2, 0, kScreenWidth*0.8, 50) isLoop:NO];
_hpv.delegate = self;
return _hpv;
}
#pragma mark <Delegate>
- (void)didSelectItem:(NSInteger)index view:(HorizontalPickerViews*)view
{
if (!view.onItemClicked) {
return;
}
view.onItemClicked(@{@"value": [NSNumber numberWithInteger:index]});
}
@end
到这里OC的实现已经完成，现在到RN里导出该类，坑在这
import React, { Component, PropTypes } from 'react';
import { requireNativeComponent } from 'react-native';
var RNHorizontalPickerView = requireNativeComponent('RNHorizontalPickerView', HorizontalPickerView);
export default class HorizontalPickerView extends Component {
static propTypes = {
onItemClicked: PropTypes.func,
values:PropTypes.array,
};
render() {
return <RNHorizontalPickerView {...this.props} />;
}
}
D2FCAAF0-70C3-4217-96CF-D07A6703D2C0.png
注意：
在导出该类时，红色框内的一定是你写的那个manager类的前半部分，即去掉manager后缀的部分，比如我上面写的是RNHorizontalPickerManager，那这里就是RNHorizontalPicker，而不是原生那个view的名字HorizontalPickerViews，不然你怎么写得到的都是一个红色的view，即没有桥接成功
这样你就可以在RN里使用这个原生写好的view了
<HorizontalPickerView style={{width:ScreenTools.ScreenWidth*0.8, height: size.designSize(50),backgroundColor:color.white}}
values={['新增企业', '登录企业','发布企业', '总数企业']}
onItemClicked = {(e)=>this._pressTab(e.nativeEvent.value)}/>
_pressTab=(index)=>{}
