對(duì)于目前的移動(dòng)端原生開發(fā)來說若未，想要完成一個(gè)app的開發(fā)工作是比較容易的，因?yàn)樵a在網(wǎng)上所提供出來的各種開源的第三方組件已經(jīng)成千上萬了，足以支撐起你的業(yè)務(wù)需求羊初。但是如果我們想要在React Native上使用第三方組件怎么辦街立？
眾所周知舶衬，React Native自身框架也提供了一部分基礎(chǔ)組件，已經(jīng)可以基本滿足我們的開發(fā)需求赎离，但是逛犹，當(dāng)我們需要使用第三方接口的時(shí)候該如何？目前市面上基本所有的第三方組件接口都還不提供對(duì)React Native的支持梁剔，所以虽画，需要使用第三方的時(shí)候，還得我們自己來封裝處理荣病。
接下來码撰，我們一步一步來封裝友盟分享的組件绘证。
1瘩欺、首先導(dǎo)入友盟分享SDK，然后添加相關(guān)的底層依賴文件：
![]()
0_1473132391960_屏幕快照 2016-09-06 上午9.05.37.png
底層依賴庫的添加：項(xiàng)目 --> build phases --> link binary with libraries在link binary with libraries中點(diǎn)加號(hào)近上，添加上圖中的依賴文件砾省，如下圖所示鸡岗。
2、 添加好依賴文件之后编兄，我們接下來完成在原生中的那部分代碼轩性。(1) 在AppDelegate中的application:didFinishLaunchingWithOptions: 方法中設(shè)置友盟AppKey：
// 設(shè)置友盟AppKey[UMSocialData setAppKey:@"57355f3e67e58ed0a50030a1"];
(2) 寫一個(gè)分享按鈕類，繼承于UIButton狠鸳，然后在其中引入友盟分享頭文件UMSocial.h揣苏，接下來就可以寫按鈕觸發(fā)的分享事件了。
#import "MyShareBt.h"
#import "UMSocial.h"
@implementation MyShareBt
//分享按鈕初始化
- (instancetype) initWithFrame:(CGRect)frame{
if ((self = [super initWithFrame:frame])) {
[self addTarget:self action:@selector(share)
forControlEvents:UIControlEventTouchUpInside];
}
return self;
}
// 按鈕分享事件
- (void)share {
[UMSocialSnsService presentSnsIconSheetView:[UIApplication sharedApplication].keyWindow.rootViewController appKey:@”yourAppKey” shareText:@”test” shareImage:[UIImage imageNamed:@”yourImageName”] shareToSnsNames:[NSArray arrayWithObjects:UMShareToWechatSession,UMShareToWechatTimeline,UMShareToQzone,UMShareToSina,UMShareToTencent,nil] delegate:nil];
}
@end
(3)穿件分享組件Manager類件舵，該類繼承于RCTViewManager卸察。創(chuàng)建好之后，添加標(biāo)記宏RCT_EXPORT_MODULE()將改模塊導(dǎo)出作為一個(gè)組件铅祸。最后實(shí)現(xiàn)-(UIView *)view方法坑质。代碼如下：
#import "shareButtonManager.h"
#import "RCTViewManager.h"
#import "UMSocial.h"
#import "MyShareBt.h"
@interface shareBt : RCTViewManager
@property (nonatomic) MyShareBt *bt;
@end
@implementation shareBt
RCT_EXPORT_MODULE()
- (UIView *)view
{
_bt = [[MyShareBt alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
return _bt;
}
@end
至此合武，原生部分代碼最基本的展示部分完成了，接下來就需要在JS中進(jìn)行進(jìn)一步封裝涡扼，以提供給JS調(diào)用稼跳。
3、接下來實(shí)現(xiàn)JS中的組件封裝與簡單調(diào)用吃沪。
首先導(dǎo)入原生組件汤善，從導(dǎo)入中取得我們所創(chuàng)建的組件，將其作為默認(rèn)的組件導(dǎo)出票彪，以供其他JS調(diào)用红淡。這里，我們其實(shí)可以直接在其他JS中調(diào)用了降铸，但是為了進(jìn)行參數(shù)的封裝在旱，我們也需要將其封裝成一個(gè)單獨(dú)的組件。
import React, { Component, PropTypes } from 'react';
import { requireNativeComponent} from 'react-native';
var ShareBt = requireNativeComponent('shareBt', ZKShareBt);
export default class ZKShareBt extends Component {
render() {
return (
<ShareBt {...this.props} />
);
}
}
封裝組件的調(diào)用推掸。下圖所示是前面封裝組件的調(diào)用颈渊，這里我們已經(jīng)封裝了很多JS需要傳遞給原生的參數(shù)，接下來终佛，我們就來說說參數(shù)以及事件處理的封裝俊嗽。
<ZKShareBt style={styles.map}
appKey={'57355f3e67e58ed0a50030a1'}
shareText={'這是分享內(nèi)容'}
imageName={'logo'}
//myTitle = {this.state.btText}//設(shè)置分享按鈕標(biāo)題
//color={this.state.color}//設(shè)置分享按鈕標(biāo)題字體顏色
btImageName = {'share_icon'} //設(shè)置分享按鈕圖片
/>
4、參數(shù)的封裝
(1) 定義需要傳遞的參數(shù)
#import <UIKit/UIKit.h>
@interface MyShareBt : UIButton
@property (nonatomic, copy) NSString * appKey;//友盟appkey
@property (nonatomic, copy) NSString * shareText;//分享的文本
@property (nonatomic, copy) NSString * imageName;//分享的圖片
@property (nonatomic, copy) NSString * myTitle;//分享按鈕標(biāo)題
@property (nonatomic) UIColor * color;//按鈕標(biāo)題字體顏色
@property (nonatomic, copy) NSString * btImageName;//分享按鈕圖片
@end
(2)以上參數(shù)是我們需要從JS傳遞給原生的铃彰，所以我們首先在原生代碼中定義好所需要的參數(shù)绍豁。定義好之后，我們需要使用RCT_EXPORT_VIEW_PROPERTY宏將其導(dǎo)出給JS牙捉。
#import "shareButtonManager.h"
#import "RCTViewManager.h"
#import "UMSocial.h"
#import "MyShareBt.h"
@interface shareBt : RCTViewManager
@property (nonatomic) MyShareBt *bt;
@end
@implementation shareBt
RCT_EXPORT_MODULE()
- (UIView *)view
{
_bt = [[MyShareBt alloc] initWithFrame:CGRectMake(0, 0, 0, 0)];
return _bt;
}
//將所需參數(shù)導(dǎo)出給JS
RCT_EXPORT_VIEW_PROPERTY(appKey, NSString)
RCT_EXPORT_VIEW_PROPERTY(shareText, NSString)
RCT_EXPORT_VIEW_PROPERTY(imageName, NSString)
RCT_EXPORT_VIEW_PROPERTY(myTitle, NSString)
RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
RCT_EXPORT_VIEW_PROPERTY(btImageName, NSString)
@end
(3)重寫參數(shù)set方法竹揍，并給按鈕屬性賦值，設(shè)置UI邪铲。
#import "MyShareBt.h"
#import "UMSocial.h"
@implementation MyShareBt
- (instancetype) initWithFrame:(CGRect)frame{
if ((self = [super initWithFrame:frame])) {
[self addTarget:self action:@selector(share)
forControlEvents:UIControlEventTouchUpInside];
}
return self;
}
//重寫所傳遞參數(shù)的set方法芬位，并將傳遞過來的參數(shù)用于設(shè)置UI
- (void)setMyTitle:(NSString *)myTitle{
[self setTitle:myTitle forState:UIControlStateNormal];
}
- (void)setColor:(UIColor *)color{
[self setTitleColor:color forState:UIControlStateNormal];
}
- (void)setBtImageName:(NSString *)btImageName{
[self setBackgroundImage:[UIImage imageNamed:btImageName] forState:UIControlStateNormal];
}
- (void)share {
[UMSocialSnsService presentSnsIconSheetView:[UIApplication sharedApplication].keyWindow.rootViewController appKey:_appKey shareText:_shareText shareImage:[UIImage imageNamed:_imageName] shareToSnsNames:[NSArray arrayWithObjects:UMShareToWechatSession,UMShareToWechatTimeline,UMShareToQzone,UMShareToSina,UMShareToTencent,nil] delegate:nil];
}
@end
(4)在JS中將參數(shù)封裝起來。
import React, { Component, PropTypes } from 'react';
import { requireNativeComponent} from 'react-native';
var ShareBt = requireNativeComponent('shareBt', ZKShareBt);
export default class ZKShareBt extends Component {
static propTypes = {
/**
*
* 定義組件需要傳到原生端的屬性
* 使用React.PropTypes來進(jìn)行校驗(yàn)
*/
//使用第三方分享時(shí)設(shè)置的appKey
appKey:PropTypes.string,
//要分享的內(nèi)容
shareText:PropTypes.string,
//需要分享的圖片名字（需要事先放在xcode工程中带到，只需要名字昧碉，不需要路徑）
imageName:PropTypes.string,
//分享按鈕標(biāo)題
myTitle:PropTypes.string,
//分享按鈕標(biāo)題顏色
color:PropTypes.string,
//分享按鈕圖片
btImageName:PropTypes.string,
};
render() {
return (
<ShareBt {...this.props} />
);
}
}
封裝好之后，就可以直接調(diào)用了揽惹。
<ZKShareBt style={styles.map}
appKey={'57355f3e67e58ed0a50030a1'}
shareText={'分享內(nèi)容'}
imageName={'logo'}
//myTitle = {this.state.btText}//設(shè)置分享按鈕標(biāo)題
//color={this.state.color}//設(shè)置分享按鈕標(biāo)題字體顏色
btImageName = {'share_icon'} //設(shè)置分享按鈕圖片
/>
以上是涉及到UI以及相關(guān)參數(shù)傳遞的封裝工作撼泛，接下來，需要做的是事件的封裝澡谭。這里事件封裝用到的是RCTBubblingEventBlock宏。封裝事件是损俭，首先蛙奖，我們需要首先在原生中先定義好需要在JS調(diào)用的方法模塊。和之前參數(shù)定義一樣杆兵，放在原生UI模塊.h文件中
MyShareBt.h
/** button點(diǎn)擊事件*/
@property (nonatomic, copy) RCTBubblingEventBlock onButtonClicked;
和參數(shù)一樣雁仲，接下來需要導(dǎo)出：
shareButtonManager.m
RCT_EXPORT_VIEW_PROPERTY(onButtonClicked, RCTBubblingEventBlock)
導(dǎo)出之后，這里我就簡單的定義一個(gè)分享按鈕點(diǎn)擊時(shí)觸發(fā)的Delegate方法
MyShareBt.h
@protocol ShareButtonClickedDelegate <NSObject>
@optional
//代理方法
- (void)ButtonClicked;
@end
@property (nonatomic, strong) id <ShareButtonClickedDelegate> ClickDelagate;
該代理方法在按鈕點(diǎn)擊分享的時(shí)候執(zhí)行：
MyShareBt.m
- (void)share {
//調(diào)用代理方法
[self.ClickDelagate ButtonClicked];
//友盟分享
[UMSocialSnsService presentSnsIconSheetView:[UIApplication sharedApplication].keyWindow.rootViewController appKey:_appKey shareText:_shareText shareImage:[UIImage imageNamed:_imageName] shareToSnsNames:[NSArray arrayWithObjects:UMShareToWechatSession,UMShareToWechatTimeline,UMShareToQzone,UMShareToSina,UMShareToTencent,nil] delegate:nil];
}
接下來琐脏，是實(shí)現(xiàn)該代理方法（我在這里設(shè)了一個(gè)隨機(jī)數(shù)攒砖，傳到JS中，提供給JS使用日裙，后面JS就可以直接使用傳過去的這個(gè)隨機(jī)數(shù)）：
shareButtonManager.m
#pragma mark ShareButtonClickedDelegate
- (void)ButtonClicked {
NSInteger x = arc4random() % 100;
NSLog(@"原生事件%ld",x);
// 將onButtonClicked事件導(dǎo)出
_bt.onButtonClicked(@{@"randomValue": [NSNumber numberWithInteger:x]});
}
下面我們在js文件中處理：
同樣吹艇，在參數(shù)中添加上onButtonClicked。
ZKShareButton.js
//按鈕點(diǎn)擊事件onButtonClicked:PropTypes.func,
添加好之后昂拂，就可以調(diào)用了受神，調(diào)用如下：
onButtonClicked={(event) => { console.log('React事件' + event.nativeEvent.randomValue);}}
