react native开发Android篇——集成友盟qq分享、微信分享、新浪微博分享、facebook分享

react native开发Android篇——集成友盟qq分享、微信分享、新浪微博分享、facebook分享

环境

react-native版本：0.59.9
友盟sdk版本：6.9.3
github上的demo地址：https://github.com/LiYaMei94/umeng_share_react_native
友盟sdk6.9.3版本全部平台的SDK下载
提取码：4a18

创建应用

注册友盟账号并登录，然后点击创建应用，就可以出现以下界面，点击图片中红色标记的位置就可以添加你自己的应用，应用添加完成后就去下载SDK。

下载SDK

点击社会化分享SDK进入SDK下载页面，


下载完成后的文件目录结构如下所示：

集成友盟

在android/app下创建一个libs文件夹，执行以下操作

1. 将下载的文件夹的Android目录下所有.jar文件都copy到这个文件夹下，
2. 将下载的文件夹的ReactNative目录下的.java文件都copy到android/app/src/main/java/com/*包名*/umeng文件夹下，如果没有umeng文件夹的话创建一个即可
3. 找到下载的文件夹的Android目录下所有res文件夹，找到项目根目录android/app/src/main下的res文件夹，将下载文件中的所有res和这个res内容进行合并。
4. 如果有新浪分享则执行这一步，如果没有则跳过。找到下载文件夹Android/share/share_android_6.9.3/platforms/新浪完整版目录下的jniLibs文件夹，将内容也copy到项目android/app目录下的libs文件夹中

引入桥接文件

将下载文件夹ReactNative/common/common_reactnative_2.0.0/js目录下的ShareUtil.js文件放入到项目中，这个路径可自行选择，在做分享时引入即可。

修改copy到android/app/src/main/java/com/*包名*/umeng文件夹下的.java文件

1. 修改android/app/src/main/java/com/*包名*/umeng目录下的DplusReactPackage.java、RNUMConfigure.java、和ShareModule.java文件的第一句代码中的包名。

   package com.umeng_share_react_native.umeng;//将umeng_share_react_native修改为自己的包名
   

2. 修改android/app/src/main/java/com/*包名*/umeng目录下的DplusReactPackage.java文件，将推送和统计都删掉，只留分享。

   @Override
   public List<NativeModule> createNativeModules(
       ReactApplicationContext reactContext) {
       List<NativeModule> modules = new ArrayList<>();
       modules.add(new ShareModule(reactContext));
       //modules.add(new PushModule(reactContext));
       //modules.add(new AnalyticsModule(reactContext));
       return modules;
   }
   

3. 修改android/app/src/main/java/com/*包名*目录下的MainActivity.java文件

   ...其他代码
   //友盟引入开始
   import android.os.Bundle;
   import com.umeng.socialize.UMShareAPI;
   import com.umeng_share_react_native.umeng.ShareModule;//将umeng_share_react_native修改为你自己的包名
   import android.content.Intent;
   //友盟引入结束
   public class MainActivity extends ReactActivity {
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           ShareModule.initSocialSDK(this);//友盟初始化
       }
       //友盟分享回调
       @Override
           public void onActivityResult(int requestCode,int resultCode, Intent data) {
           super.onActivityResult(requestCode, resultCode, data);
           UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);
       }
       ...其他代码
   }
   
   

4. 修改android/app/src/main/java/com/*包名*目录下的MainApplication.java文件

   ...其他代码
   //友盟引入开始
   import com.umeng.commonsdk.UMConfigure;
   import com.umeng.socialize.PlatformConfig;
   import com.umeng_share_react_native.umeng.DplusReactPackage;//将umeng_share_react_native修改为你自己的包名
   import com.umeng_share_react_native.umeng.RNUMConfigure;//将umeng_share_react_native修改为你自己的包名
   //友盟引入结束
   public class MainApplication extends Application implements ReactApplication {
   
     private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
       ...其他代码
       @Override
       protected List<ReactPackage> getPackages() {
         return Arrays.<ReactPackage>asList(
             new MainReactPackage(),
               new DplusReactPackage()//友盟
         );
       }
   	...其他代码
     };
     @Override
     public void onCreate() {
       super.onCreate();
       SoLoader.init(this, /* native exopackage */ false);
       /**
   	* 友盟初始化common库
   	* 参数1:上下文，不能为空
   	* 参数2:【友盟+】 AppKey
   	* 参数3:【友盟+】 Channel
   	* 参数4:设备类型，UMConfigure.DEVICE_TYPE_PHONE为手机、UMConfigure.DEVICE_TYPE_BOX为盒子，默认为手机
   	* 参数5:Push推送业务的secret
   	*/
       RNUMConfigure.init(this, "5d5bb17a570df3aa260003e2", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,"");
   
     }
     // 设置使用的三方平台的appid和appkey：这些appkey和appid是友盟提供的，正式测试时修改为自己的
     {
       PlatformConfig.setWeixin("wxdc1e388c3822c80b", "3baf1193c85774b3fd9d18447d76cab0");
       //豆瓣RENREN平台目前只能在服务器端配置
       PlatformConfig.setSinaWeibo("3921700954", "04b48b094faeb16683c32669824ebdad","http://sns.whalecloud.com");
       //PlatformConfig.setYixin("yxc0614e80c9304c11b0391514d09f13bf");
       PlatformConfig.setQQZone("100424468", "c7394704798a158208a74ab60104f0ba");
       PlatformConfig.setTwitter("3aIN7fuF685MuZ7jtXkQxalyi", "MK6FEYG63eWcpDFgRYw4w9puJhzDl0tyuqWjZ3M7XJuuG7mMbO");
       //PlatformConfig.setAlipay("2015111700822536");
       //PlatformConfig.setLaiwang("laiwangd497e70d4", "d497e70d4c3e4efeab1381476bac4c5e");
       //PlatformConfig.setPinterest("1439206");
       //PlatformConfig.setKakao("e4f60e065048eb031e235c806b31c70f");
       //PlatformConfig.setDing("dingoalmlnohc0wggfedpk");
       //PlatformConfig.setVKontakte("5764965","5My6SNliAaLxEm3Lyd9J");
       //PlatformConfig.setDropbox("oz8v5apet3arcdy","h7p2pjbzkkxt02a");
       //PlatformConfig.setYnote("9c82bf470cba7bd2f1819b0ee26f86c6ce670e9b");
     }
   }
   
   

   注意：
   参数1:上下文，必须的参数，不能为空。

   参数2:【友盟+】 AppKey，非必须参数，如果Manifest文件中已配置AppKey，该参数可以传空，则使用Manifest中配置的AppKey，否则该参数必须传入。

   参数3:【友盟+】 Channel，非必须参数，如果Manifest文件中已配置Channel，该参数可以传空，则使用Manifest中配置的Channel，否则该参数必须传入，Channel命名请详见Channel渠道命名规范。

   参数4:设备类型，必须参数，传参数为UMConfigure.DEVICE_TYPE_PHONE则表示手机；传参数为UMConfigure.DEVICE_TYPE_BOX则表示盒子；默认为手机。

   参数5:Push推送业务的secret，需要集成Push功能时必须传入Push的secret，否则传空。

5. 微信分享需要在android/app/src/main/java/com/*包名*目录下创建wxapi文件夹，并创建WXEntryActivity.java文件，内容如下

   package com.umeng_share_react_native.wxapi;//将umeng_share_react_native修改为你的包名
   import com.umeng.socialize.weixin.view.WXCallbackActivity;
   public class WXEntryActivity extends WXCallbackActivity {
   }
   

6. 修改android/app/src/main目录下的AndroidManifest.xml

   <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     package="com.umeng_share_react_native">
   
       <uses-permission android:name="android.permission.INTERNET" />
       <!-- 友盟权限申请开始 -->
       <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.CALL_PHONE" />
       <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
       <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
   
       <!-- QQ、QQ空间所需权限 -->
       <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
       <uses-permission android:name="android.permission.GET_ACCOUNTS" />
       <uses-permission android:name="android.permission.USE_CREDENTIALS" />
       <!-- QQ纯图分享或避免其它平台纯图分享的时候图片不被压缩 -->
       <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>   
       <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
       <!-- 友盟权限申请结束 -->
       <application
         android:name=".MainApplication"
         android:label="@string/app_name"
         android:icon="@mipmap/ic_launcher"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:allowBackup="false"
         android:theme="@style/AppTheme"
         
         >
         <activity
           android:name=".MainActivity"
           android:label="@string/app_name"
           android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
           android:windowSoftInputMode="adjustResize">
           <intent-filter>
               <action android:name="android.intent.action.MAIN" />
               <category android:name="android.intent.category.LAUNCHER" />
           </intent-filter>
         </activity>
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
   
         <!-- 友盟开始 -->
         <!-- 微信 -->
         <activity 
           android:name=".wxapi.WXEntryActivity" 
           android:configChanges="keyboardHidden|orientation|screenSize" 
           android:exported="true" 
           android:theme="@android:style/Theme.Translucent.NoTitleBar" />
         
         <!-- qq -->
           <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="tencent+你在qq开放平台获取的appid" />
             </intent-filter>
           </activity>
           <activity
           android:name="com.tencent.connect.common.AssistActivity"
           android:theme="@android:style/Theme.Translucent.NoTitleBar"
           android:configChanges="orientation|keyboardHidden|screenSize"/>
           
           <!-- 新浪 -->
           <activity
             android:name="com.umeng.socialize.media.WBShareCallBackActivity"
             android:configChanges="keyboardHidden|orientation"
             android:theme="@android:style/Theme.Translucent.NoTitleBar"
             android:exported="false"
             >
           </activity>
           <activity 
             android:name="com.sina.weibo.sdk.web.WeiboSdkWebActivity"
             android:configChanges="keyboardHidden|orientation"
             android:exported="false"
             android:windowSoftInputMode="adjustResize"
           >
           </activity>
           <activity
             android:theme="@android:style/Theme.Translucent.NoTitleBar.Fullscreen"
             android:launchMode="singleTask"
             android:name="com.sina.weibo.sdk.share.WbShareTransActivity">
             <intent-filter>
                 <action android:name="com.sina.weibo.sdk.action.ACTION_SDK_REQ_ACTIVITY" />
                 <category android:name="android.intent.category.DEFAULT" />
             </intent-filter>
           </activity>
           
           <!-- facebook -->
           <activity
             android:name="com.umeng.facebook.FacebookActivity"
             android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"  
             android:label="@string/app_name"  
             android:theme="@android:style/Theme.Translucent.NoTitleBar" />
             <meta-data
               android:name="com.facebook.sdk.ApplicationId"
               android:value="@string/facebook_app_id" />
               <!-- 其中 @string/facebook_app_id 是facebook的appid
               这里需要注意，appid一定要存在string文件中，并以facebook_app_id名字进行保存。 -->
               
           <!-- Twitter -->
           <activity
             android:name="com.umeng.socialize.handler.TwitterWebActivity"
             android:configChanges=
             "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
             android:theme="@android:style/Theme.Translucent.NoTitleBar"
             android:label="@string/app_name" />
             
           <!-- 分享编辑页(只有豆瓣，人人，腾讯微博，领英，twitter需要) -->
           <activity
             android:name="com.umeng.socialize.editorpage.ShareActivity"
             android:theme="@android:style/Theme.NoTitleBar"
             android:excludeFromRecents="true"
             />
           <meta-data android:value="你在友盟后台申请的应用Appkey" android:name="UMENG_APPKEY"/>
           <!-- 友盟结束 -->
       </application>
   
   </manifest>
   
   

7. 修改android/app/src/main/res/values/strings.xml文件

   <resources>
       <!-- 新增facebook_app_id 测试的话可以使用2094171727560943-->
       <string name="facebook_app_id">你的facebookappid</string>
   </resources>
   
   

8. 修改android/app/build.gradle文件

   android {
       ...其他代码
       //友盟，有新浪微博分享的时候才有，其他则跳过
       sourceSets {
           main {
               jniLibs.srcDirs = ['libs']
           }
       }
   	...其他代码
   }
   
   dependencies {
       implementation project(':react-native-fbsdk')
       implementation fileTree(include: ['*.jar'], dir: 'libs')//确保有这句
       implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
       implementation 'com.facebook.react:react-native:+'
       
   }
   

使用友盟分享和登录

每个平台的index值在android/app/src/main/java/com/包名/umeng目录下的ShareModule.java文件中的getShareMedia函数可以找到。

import React, {Component} from 'react';
import {TouchableHighlight, Text,StyleSheet, Button, View} from 'react-native';
import ShareUtil from './libs/ShareUtil';//这里是你自己的路径
export default class App extends Component{
  boardShare(){
    var list = [0,1,2,3,4,7];//0:qq,1:新浪, 2:微信, 3:微信朋友圈,4:qq空间, 7:Facebook
    ShareUtil.shareboard('sssss','http://dev.umeng.com/images/tab2_1.png','http://www.umeng.com/','title',list,(code,message) =>{
        console.warn(message)
    });
  }
  sinaweiboShare(){
    ShareUtil.share('sssss','http://dev.umeng.com/images/tab2_1.png','http://www.umeng.com/','title',1,(code,message) =>{
      console.warn(message)
    });
  }
  qqShare(){
    ShareUtil.share('sssss','http://dev.umeng.com/images/tab2_1.png','http://www.umeng.com/','title',0,(code,message) =>{
      console.warn(message)
    });
  }
  wxShare(){
    ShareUtil.share('sssss','http://dev.umeng.com/images/tab2_1.png','http://www.umeng.com/','title',2,(code,message) =>{
      console.warn(message)
    });
  }
  qqAuth(){
    ShareUtil.auth(0,(code,result,message) =>{
      if (code == 200){
        console.warn(result)
      }
  });
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight
          underlayColor='transparent' 
          onPress={this.boardShare.bind(this)}
          style={styles.button_item}>
          <Text>友盟面板分享</Text>
        </TouchableHighlight>
        <TouchableHighlight 
          underlayColor='transparent' 
          onPress={this.sinaweiboShare.bind(this)}
          style={styles.button_item}>
          <Text>新浪微博分享</Text>
        </TouchableHighlight>
        <TouchableHighlight 
          underlayColor='transparent' 
          onPress={this.qqShare.bind(this)}
          style={styles.button_item}>
          <Text>qq分享</Text>
        </TouchableHighlight>
        <TouchableHighlight 
          underlayColor='transparent' 
          onPress={this.wxShare.bind(this)}
          style={styles.button_item}>
          <Text>微信分享</Text>
        </TouchableHighlight>
        <TouchableHighlight 
          underlayColor='transparent' 
          onPress={this.qqAuth.bind(this)}
          style={styles.button_item}>
          <Text>qq授权登录</Text>
        </TouchableHighlight>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button_item:{
    marginBottom:15,
    justifyContent: 'center',
    alignItems: 'center',
    width:150,
    height:50,
    backgroundColor:'skyblue'
  }
});

好了，到这里友盟的分享和登录集成就算完了，详细使用请看友盟Android集成分享文档。有疑问的童鞋可以参照我在github上的demo 。