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)=>{}