D16D4151-7CE9-4FFC-861A-C94606D6E62D.png
RN與原生之間的通信有很多文章已經(jīng)講到了，包括react native 中文網(wǎng)锡足，之前我也是看了一些然后實現(xiàn)波丰，基本能看明白，但是在實現(xiàn)過程中最重要的坑沒有說到舶得，這導(dǎo)致我在實現(xiàn)的總是只能得到一個紅色的view.
假設(shè)我在xcode里已經(jīng)寫好的一個原生的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()
//需要導(dǎo)出的屬性或者方法寫在這，這在rn里傳過來九孩，一般是數(shù)據(jù)源和方法
RCT_EXPORT_VIEW_PROPERTY(onItemClicked, RCTBubblingEventBlock);
RCT_EXPORT_VIEW_PROPERTY(values,NSArray);
//在橋接類RNHorizontalPickerViewManager里實現(xiàn)- (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的實現(xiàn)已經(jīng)完成，現(xiàn)在到RN里導(dǎo)出該類躺彬，坑在這
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
注意：
在導(dǎo)出該類時煤墙，紅色框內(nèi)的一定是你寫的那個manager類的前半部分，即去掉manager后綴的部分宪拥，比如我上面寫的是RNHorizontalPickerManager仿野，那這里就是RNHorizontalPicker，而不是原生那個view的名字HorizontalPickerViews她君，不然你怎么寫得到的都是一個紅色的view脚作，即沒有橋接成功
這樣你就可以在RN里使用這個原生寫好的view了
<HorizontalPickerView style={{width:ScreenTools.ScreenWidth*0.8, height: size.designSize(50),backgroundColor:color.white}}
values={['新增企業(yè)', '登錄企業(yè)','發(fā)布企業(yè)', '總數(shù)企業(yè)']}
onItemClicked = {(e)=>this._pressTab(e.nativeEvent.value)}/>
_pressTab=(index)=>{}
