react native分享,友盟sdk社会化分享,微博,QQ,微信分享,分享sdk的集成方式对于前端开发者是怎么样的呢?接下来看看react native前端如何实现集成友盟分享sdk,请耐心看完绝对是干货。由于我在集成这个的时候碰到太多的坑,都是参照简书,CSDN等博客,却发现那些是给android开发者看的,☁️☁️☁️以下是以微信安卓为例
![react native分享SDK 微信分享 QQ分享 微博分享 友盟分享SDK](https://i-blog.csdnimg.cn/blog_migrate/46291d10cfb015c7df77f7b91c908179.png)
第一步 申请集成友盟分享所需的key
友盟appkey | 前往https://www.umeng.com注册账号,然后添加一个自己的移动应用产品 在统计类目下都行,主要是获取一个appkey |
微信开发者 appid secret | 前往https://open.weixin.qq.com/cgi-bin/index?t=home/index&lang=zh_CN创建一个自己的移动应用 |
第二步 下载所需要的sdk
前往https://developer.umeng.com/sdk/reactnative寻找reactnative的sdk,选择精简版的QQ分享微信分享微博分享SDK下载
第三步 将下载的文件放入相应文件夹
首先预览下载的文件夹
如果目录一致的话就可以继续了!⬇️⬇️⬇️⬇️⬇️⬇️
1.回到自己的项目目录 ~~~/android/app ;这个目录下如果没有libs文件夹的话自己建一个,然后将下载的文件夹中所有的.jar文件都放到这里!休息30秒.....
2.到下载的文件夹里面看看,找到所有的.java类文件,再休息10秒....
到react native 分享项目目录~~~/android/app/src/main/java/com/*包名*/ ;如果不存在invokenative文件夹的话,建一个。将那几个java类放到这里。
3.回到下载的文件夹中。找到所有的res目录中的文件,休息10秒...
回到项目中~~~/android/app/src/main ;如果不存在res目录,自己建一个。将下载的res目录中的文件与这个res合并,记得是合并
4.将 ShareUtil.js 放到项目react前端开发目录中,稍后会导入使用
至此U-share SDK文件都已经放好了,但是它不会正确的被加载
第四步 修改文件内容
1.将jar正确依赖进来
找到~~/android/app/build.gradle
dependencies{
compile fileTree(dir: 'libs', include: ['*.jar']) //添加
}
2.将各包类正确导入
找到invokenative文件夹下的几个java类将文件的第一行修改
package com.*包名*.invokenative;
3.初始化react native 分享
1⃣️找到 DplusReactPackage.java,注释不需要的两行
modules.add(new ShareModule(reactContext));//分享
//modules.add(new PushModule(reactContext));//推送
//modules.add(new AnalyticsModule(reactContext));//统计
2⃣️找到 MainActivity.java 追加
/**
*share 初始化
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ShareModule.initSocialSDK(this);
}
/**
*
*share 回调代码
*/
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
super.onActivityResult(requestCode, resultCode, data);
UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
}
3⃣️找到MainApplication.java
导入包
import com.包名.invokenative.DplusReactPackage;
import com.包名.invokenative.RNUMConfigure;
import com.umeng.socialize.PlatformConfig;
import com.umeng.commonsdk.UMConfigure;
修改:
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new DplusReactPackage(),//添加这行
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
RNUMConfigure.init(this, "友盟的appkey", "Umeng", UMConfigure.DEVICE_TYPE_PHONE, ""); //添加
最后添加react native 分享QQ 微信 微博 key:
//必须是真是有效的自己申请的
{
PlatformConfig.setWeixin("微信appid", "微信secret");
PlatformConfig.setSinaWeibo("同理", "同理", "http://sns.whalecloud.com");
PlatformConfig.setQQZone("同理", "同理");
}
4.添加react native 分享所需的权限
找到 AndroidManifest.xml
<!--share-->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<activity
android:name=".WBShareActivity"
android:configChanges="keyboardHidden|orientation"
android:screenOrientation="portrait" >
<intent-filter>
<action android:name="com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
<activity
android:name="com.sina.weibo.sdk.component.WeiboSdkBrowser"
android:configChanges="keyboardHidden|orientation"
android:windowSoftInputMode="adjustResize"
android:exported="false" >
</activity>
<service android:name="com.sina.weibo.sdk.net.DownloadService"
android:exported="false"></service>
<activity
android:name=".wxapi.WXEntryActivity"
android:configChanges="keyboardHidden|orientation|screenSize"
android:exported="true"
android:screenOrientation="portrait"
android:theme="@android:style/Theme.Translucent.NoTitleBar" />
<activity
android:name="com.tencent.tauth.AuthActivity"
android:launchMode="singleTask"
android:noHistory="true" >
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data android:scheme="tencent100424468" />
</intent-filter>
</activity>
<activity
android:name="com.tencent.connect.common.AssistActivity"
android:screenOrientation="portrait"
android:theme="@android:style/Theme.Translucent.NoTitleBar"
android:configChanges="orientation|keyboardHidden|screenSize"/>
<activity
android:name=".apshare.ShareEntryActivity"
android:configChanges="keyboardHidden|orientation|screenSize"
android:exported="true"
android:screenOrientation="portrait"
android:theme="@android:style/Theme.Translucent.NoTitleBar" />
<meta-data
android:name="UMENG_APPKEY"
android:value="友盟appkey" >
</meta-data>
第五步 在前端react native页面使用分享
例如需要在首页使用react native 分享:
index.js
import ShareUtil from '../../../config/libs/ShareUtil';//导入分享的模块
//调用方法
showShowSharePanel(){
ShareUtil.shareboard('','imgUrl','https://m.baidu.com/','百度一下,你就知道',[0,2,3],(code,message) =>{
Alert.alert('title', 'msg:' + message);
});
}