分享之前做过,但是使用的是第三方的封装,很简单.
但是很多第三方都不维护,造成包无法升级.
看了友盟的官网,是支持RN的 所以自己手动集成
下面说下步骤:
友盟分享的官网
https://www.umeng.com/social
大家自己注册账号 然后拿到KEY 这些都不用说太多了吧
开发者文档再这,可一直姐看看
https://developer.umeng.com/docs/66632/detail/67587#h3-u521Du59CBu5316
下载包的地址在这
https://developer.umeng.com/sdk/reactnative
这里的包可以挑选下载不一定要全部都下载.
下面开始集成
一 ios集成
ios相对简单一些
下载下来的包里是这样的
直接把这些文件导入进你的项目就可以了,
下面是我的目录结构
首先创建UMComponent 和 UMshake文件夹
按照目录顺序 到你下载的SDK 去找对应的文件导入到文件夹内
你看可以这样导入
上图这几个文件是RN 和ios的桥接文件必须要有
在Other Linker Flags加入-ObjC ，注意不要写为-Objc，注：-ObjC属于链接库必备参数，如果不加此项，会导致库文件无法被正确链接，SDK无法正常运行
大小写一定要注意
下一步添加包
libsqlite3.tbd
CoreGraphics.framework
SystemConfiguration.framework
CoreTelephony.framework
libc++.tbd
libz.tbd
下一步配置白名单
配置SSO白名单，右键info.plist选择source code打开(plist具体设置在Build Setting -> Packaging -> Info.plist File可获取plist路径)请根据选择的平台对以下配置进行裁剪：
LSApplicationQueriesSchemes
wechat
weixin
sinaweibohd
sinaweibo
sinaweibosso
weibosdk
weibosdk2.5
mqqapi
mqq
mqqOpensdkSSoLogin
mqqconnect
mqqopensdkdataline
mqqopensdkgrouptribeshare
mqqopensdkfriend
mqqopensdkapi
mqqopensdkapiV2
mqqopensdkapiV3
mqqopensdkapiV4
mqzoneopensdk
wtloginmqq
wtloginmqq2
mqqwpa
mqzone
mqzonev2
mqzoneshare
wtloginqzone
mqzonewx
mqzoneopensdkapiV2
mqzoneopensdkapi19
mqzoneopensdkapi
mqqbrowser
mttbrowser
tim
timapi
timopensdkfriend
timwpa
timgamebindinggroup
timapiwallet
timOpensdkSSoLogin
wtlogintim
timopensdkgrouptribeshare
timopensdkapiV4
timgamebindinggroup
timopensdkdataline
wtlogintimV1
timapiV1
alipay
alipayshare
dingtalk
dingtalk-open
linkedin
linkedin-sdk2
linkedin-sdk
laiwangsso
yixin
yixinopenapi
instagram
whatsapp
line
fbapi
fb-messenger-api
fbauth2
fbshareextension
kakaofa63a0b2356e923f3edd6512d531f546
kakaokompassauth
storykompassauth
kakaolink
kakaotalk-4.5.0
kakaostory-2.9.0
pinterestsdk.v1
tumblr
evernote
en
enx
evernotecid
evernotemsg
youdaonote
ynotedictfav
com.youdao.note.todayViewNote
ynotesharesdk
gplus
pocket
readitlater
pocket-oauth-v1
fb131450656879143
en-readitlater-5776
com.ideashower.ReadItLaterPro3
com.ideashower.ReadItLaterPro
com.ideashower.ReadItLaterProAlpha
com.ideashower.ReadItLaterProEnterprise
vk
vk-share
vkauthorize
twitter
twitterauth
下一步配置URL Scheme
URL Scheme是通过系统找到并跳转对应app的一类设置，通过向项目中的info.plist文件中加入URL types可使用第三方平台所注册的appkey信息向系统注册你的app，当跳转到第三方应用授权或分享后，可直接跳转回你的app。
添加URL Types可工程设置面板设置
初始化，AppDelegate.m设置友盟appkey以及各个平台的appkey和secret
#import "RNUMConfigure.h"
#import
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
/**********************************************************************************************************************/
/* 打开调试日志 */
[UMConfigure setLogEnabled:YES];
/* 设置友盟appkey */
[RNUMConfigure initWithAppkey:@"5asd23323222se0001cc" channel:@"App Store"];
/*
* 关闭强制验证https，可允许http图片分享，但需要在info.plist设置安全域名
*/
[UMSocialGlobal shareInstance].isUsingHttpsWhenShareContent = NO;
/*
设置微信的appKey和appSecret
*/
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wx179afsafasw23b54ae" appSecret:@"5a4142fsdsfswe9a40e93fc" redirectURL:nil];
/*
设置分享到QQ互联的appID
*/
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"110233248545"/*设置QQ平台的appID*/ appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];
/*
设置新浪的appKey和appSecret
*/
[[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"27239964" appSecret:@"fac50980a44sdsdsssdsc968ea572887" redirectURL:@"http://sns.whalecloud.com"];
/**********************************************************************************************************************/
return YES;
}
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation
{
BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
if (!result) {
// 其他如支付等SDK的回调
}
return result;
}
- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
{
BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
if (!result) {
// 其他如支付等SDK的回调
}
return result;
}
进入下载目录的ReactNative找到common下的js中的ShareUtil.js，拷贝到我们RN目录下，即可导入使用
使用方式，注：android与ios平台回调中的code值不一致，ios成功时code:200，android成功时code:0
import ShareUtile from '../../../components/UMShake/ShareUtil';
//分享面板
//这里注意list 是个数组 例如:[2,3] 2,3 就是对应的微信和朋友圈
//list对应的就是分享面板里的图标安卓你要自己手动添加
ShareUtile.shareboard(text,img,url,title,list,(code,message) =>{
this.setState({result:message});
});
text 为分享内容
img 为图片地址，可以为链接，本地地址以及res图片（如果使用res,请使用如下写法：res/icon.png）
url 为分享链接，可以为空
title 为分享链接的标题
list 为分享平台数组，如：var list = [0,1,2]
callback中code为错误码，当为0时，标记成功。message为错误信息
官网有明确说明对应的ID 自行查找
ios到此就结束了,如果 有什么问题 可以留言
二 安卓集成
android/app目录下新建libs目录，将下载目录的Android中的所有jar包拷贝至libs
依次添加 就可以了,这里我只截图大家看着名字添加
我只添加了这几个有需要的可以添加多个
没有libs 文件夹就创建文件件
app下的build.gradle添加
dependencies {
compile fileTree(include: ['*.jar'], dir: 'libs')
}
将下载文件的ReactNative目录中所有跟android相关的java文件拷贝至目标项目包下，修改对应包名
没有文件夹就创建文件夹
WXEntryActivity文件 是我自己创建的
//这里你只需要集成就好了,可以不写回调方法,但是写了也无所谓,你可以直接C大法
import android.content.Intent;
import com.umeng.socialize.UMShareAPI;
import com.umeng.socialize.weixin.view.WXCallbackActivity;
public class WXEntryActivity extends WXCallbackActivity{
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
}
}
初始化配置
需要在MainApplication.java下添加
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new SharePackage()
);
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, false);
RNUMConfigure.init(this, "5aea333aefsd", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,
"");
}
// 配置平台key、secret信息
//这里的appkey 都是错的 不能用,请自己申请
{
PlatformConfig.setWeixin("wx.....", "5a65gtyj.......");
PlatformConfig.setQQZone("1......", "66ryj6.....");
PlatformConfig.setSinaWeibo("5tgh777", "asdfa4rase222222", "www.baidu.com");
}
}
添加权限
添加图片
安卓的文件夹下都有这些图标,没有的就自己创建吧
最好全部放到自己工程,如果你不是安卓小白那就挑着选
其他的2个文件也要添加,下载的包里也都有,只看名字就可以自己找到了
到这里就结束了 你自己可以试试了.