react-native 集成 umeng 分享

第一步: AppKey 申请, SDK 下载

1.在 umeng 官网注册自己的app。拿到AppKey。

2.申请需要分享开放平台key。

微博
微信
QQ

3.下载sdk https://developer.umeng.com/#1。如图

react-native 集成 umeng 分享_第1张图片
2.jpg

a.需要下载android ios react-native 3个库;
b.选中社会化分享后,点击设置,设置你想要分享的平台。




第二部:ios配置

1.首先进入项目的ios目录,进入对应的工程名目录,新建两个文件夹:UMReactBridge和UMComponent。

2.把下载的 ios 和 react-native 里面的对应文件全部复制进来。

3. 将刚才创建的两个文件夹用Add Files to "xxx"的方式导入到项目中

react-native 集成 umeng 分享_第2张图片
3.png

4.Linked Frameworks and Libraries加入系统依赖库

libsqlite3.tbd
CoreGraphics.framework
SystemConfiguration.framework
CoreTelephony.framework
libc++.tbd
libz.tbd
react-native 集成 umeng 分享_第3张图片
5.jpeg

6.配置SSO白名单,右键info.plist选择source code打开 .请根据选择的平台对以下配置进行裁剪:

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

7.配置URL Scheme

react-native 集成 umeng 分享_第4张图片
6.jpg

8 在ios项目的AppDelegate.m设置友盟appkey。以及各个平台的appkey和secret

添加引用

#import "RNUMConfigure.h"
#import 
react-native 集成 umeng 分享_第5张图片
7.jpg

ios 配置完成





第三部: android配置

1.android/app目录下新建libs目录,将下载目录的Android中的所有jar包拷贝至libs。

注意检查 app下的build.gradle 是否有(一般都有)

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
}
react-native 集成 umeng 分享_第6张图片
8.jpg

@ 2. 将下载的ReactNative目录中所有跟android相关的java文件拷贝至项目android的包下,修改对应包名

react-native 集成 umeng 分享_第7张图片
9.jpg

3. 包名目录下创建weixin目录,新建WXEntryActivity文件.复制如下内容即可。其他友盟都帮我们写好了。

package 你的包名;

import com.umeng.socialize.weixin.view.WXCallbackActivity;

public class WXEntryActivity extends WXCallbackActivity {

}

4 。修改MainApplication.java

添加如些内容


react-native 集成 umeng 分享_第8张图片
10.jpg
 new DplusReactPackage()
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    RNUMConfigure.init(this, "5c2e3111111100025e", "Umeng", UMConfigure.DEVICE_TYPE_PHONE,""); 
    //RNUMConfture.init接口一共五个参数,其中第一个参数为Context,第二个参数为友盟Appkey,第三个参数为channel,第四个参数为应用类型(手机或平板),第五个参数为push的secret(如果没有使用push,可以为空
}
 // 各平台对应的key
{
    PlatformConfig.setWeixin("wxbf50e1111111b091a", "9821f6347711111111111278552124f");
    PlatformConfig.setSinaWeibo("1372622714", "966b74b9f8c768a363b9c84253c55969", "http://sns.whalecloud.com");
    PlatformConfig.setQQZone("1108090716", "HYazaX153N9FzXQL");
}

5. AndroidManifest.xml 配置权限

 
    
    
    
    
    
    
    
    

6. AndroidManifest.xml 配置微信activity


android 配置完成




第四步:RN

1 复制下载的react-native 里面 common下的js文件。分享的话只需要ShareUtil.js

import ShareUtil from './ShareUtil';

 // 打开分享面板
 openShare =() => {
    ShareUtil.shareboard(
      text, // 描述   位置对应上就行 名字随便取
      imageUrl,// 图片
      link,//链接
      title,//标题
      [2, 3], (code, message) => {
        console.log(code, message);
      }
    );
  }


可能遇到的问题

1.android 微信分享没有图片: 因为图片32K大小有限制。
2.点击release微信分享没有反应:
a.先检查微信官网的签名是debug还是release的。
b.修改后有几分钟延迟。
c.如果刚测试过debug,然后同一个手机测试release的话,因为微信缓存问题。会出现点击没反应。需要清空微信缓存,或者卸载微信重新下载。

你可能感兴趣的:(react-native 集成 umeng 分享)