在使用react native开发的过程中，有些需求或者用RN实现起来比较麻烦。在短时间内有没有想到实现办法，这时我们可以通过原生来实现，然后桥接到RN里使用。比如说这种横向选择的滑轮。使用RN来实现就比较麻烦，这时我想到了iOS原生使用UICollectionView来实现。 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)=>{}