react-native-share

Introduction: 🌹React Native 【 第三方分享 】、【 第三方登录 】. 支持平台:QQ、QQ 空间、微信、朋友圈、新浪微博、FaceBook... 【 Android、 IOS 双平台 】
More: Author   ReportBugs   
Tags:

JavaScript Style Guide

[ 功能 ]

分享
(1) 图文分享
(2) 本地纯图分享
登录
支持平台:
【 QQ 】【 QQ 空间 】【 微信 】【 朋友圈 】【 微博 】【 FaceBook 】

【 注意事项 】

 如果第一次把微信的签名写错了,可能会在分享的时候总是一闪而过。改对之后, 还会一直闪。     
【 解决办法 】
 卸载微信 重新安装即可。具体原因应该是微信缓存的作用【 清理微信缓存无效 】

详细配置:http://blog.csdn.net/u013718120/article/details/75040805

【 Android 平台配置 】

1. app 目录下创建 libs 文件夹,添加依赖文件【直接复制源码中 libs 目录即可】
2. 包名目录下,引入所需交互代码【直接复制源码中 wxapi 、module 即可,注意 import 的路径是否正确】
【注意】如果 react-native 版本为 0.50 或以上,则需要将 module 文件夹中 ShareModule 类中的 createJSModule 方法删除即可。
3. 在 AndroidMainfest.xml 文件下添加权限【直接复制源码即可】
    <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.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" />
4. 在 AndroidMainfest.xml 文件下的 中添加分享平台【直接复制源码即可】,注意 QQ 配置中,scheme 的值:tencen 后面要改成自己的 qq app id .

      <!-- 微信 -->
     <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" />
             <!-- tencent + 自己的 qq app id  -->
             <data android:scheme="tencent110631169" />
         </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"
         android:screenOrientation="portrait" >
     </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>
    <meta-data  
        android:name="UMENG_APPKEY"  
        android:value="561cae6ae0f55abd990035bf" >   <= 改为自己申请的友盟 Key  
    </meta-data>
6. 使用【keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000】生成签名文件,并将签名文件放入 app 目录
7. 在 gradle.properties 文件下,添加签名信息【直接复制源码即可】
     MYAPP_RELEASE_STORE_FILE=my-release-key.keystore  
     MYAPP_RELEASE_KEY_ALIAS=my-key-alias  
     MYAPP_RELEASE_STORE_PASSWORD=123456(填写自己设置的密码)  
     MYAPP_RELEASE_KEY_PASSWORD=123456 (填写自己设置的密码)
8. 在 app / build.gradle 文件下的添加签名配置【直接复制源码即可】
     android {     
       ...     
       defaultConfig {     
         ...     
         manifestPlaceholders = [qqappid: "填写自己的 qq app id"]
       }     
       signingConfigs {     
         release {     
             storeFile file(MYAPP_RELEASE_STORE_FILE)     
             storePassword MYAPP_RELEASE_STORE_PASSWORD     
             keyAlias MYAPP_RELEASE_KEY_ALIAS     
             keyPassword MYAPP_RELEASE_KEY_PASSWORD     
         }     
       }     
       buildTypes {     
         release {     
           ...     
          signingConfig signingConfigs.release     
         }     
       }    
     }
9. 在 MainApplication 中初始化分享【直接复制源码即可】
    @Override  
    protected List<ReactPackage> getPackages() {  
      return Arrays.<ReactPackage>asList(  
          new MainReactPackage(),  
              new SharePackage() <= 添加引用  
      );  
    }  

    @Override  
    public void onCreate() {  
      super.onCreate();  
      SoLoader.init(this,false);  
      Config.shareType = "react native";  
      UMConfigure.init(this,"友盟 Key","umeng",UMConfigure.DEVICE_TYPE_PHONE,"");
    }  

    // 配置平台,将 AppKey 和 AppSecret 换成你申请的即可 
    // 【注意】QQ 和 QQ 空间是同一个设置(同一个 key、AppSecret)
    {  
      PlatformConfig.setWeixin("wx083bf496cbc48aec", "750e9075fa521c82274a9d548c399825");
      PlatformConfig.setQQZone("1106207359", "3JjbG8aXMuh5w0sV");  
      PlatformConfig.setSinaWeibo("2733400964", "fac50980a44e3e3afd4bc968ea572887", "www.baidu.com"); 
    }
10. 在 MainActivity 中初始化分享回调【直接复制源码即可】
    @Override  
      protected void onCreate(Bundle savedInstanceState) {  
          super.onCreate(savedInstanceState);  
          ShareModule.initActivity(this);  
      }  

      @Override  
      public void onActivityResult(int requestCode, int resultCode, Intent data) {  
          super.onActivityResult(requestCode, resultCode, data);  
          UMShareAPI.get(this).onActivityResult(requestCode, resultCode, data);  
      }

【 iOS 平台配置 】

1. 将源码中 ios 目录下的 UMSocial 添加到工程,直接拖进即可
2. 选择 TARGET 下的项目,在 Build Setting 下找到 Other Linker Flags 加入-ObjC ,注意不要写为-Objc
3. 加入 U-Share SDK 依赖的系统库
依次添加如下依赖:

SystemConfiguration.framework CoreGraphics.framework CoreTelephony.framework ImageIO.framework libsqlite3.tbd libc++.tbd libz.tbd

4. 配置 SSO 白名单【直接复制即可】
    <key>LSApplicationQueriesSchemes</key>  
    <array>  
        <!-- 微信 URL Scheme 白名单-->  
        <string>wechat</string>  
        <string>weixin</string>  

        <!-- 新浪微博 URL Scheme 白名单-->  
        <string>sinaweibohd</string>  
        <string>sinaweibo</string>  
        <string>sinaweibosso</string>  
        <string>weibosdk</string>  
        <string>weibosdk2.5</string>  

        <!-- QQ、Qzone、TIM URL Scheme 白名单-->  
        <string>mqqapi</string>  
        <string>mqq</string>  
        <string>mqqOpensdkSSoLogin</string>  
        <string>mqqconnect</string>  
        <string>mqqopensdkdataline</string>  
        <string>mqqopensdkgrouptribeshare</string>  
        <string>mqqopensdkfriend</string>  
        <string>mqqopensdkapi</string>  
        <string>mqqopensdkapiV2</string>  
        <string>mqqopensdkapiV3</string>  
        <string>mqqopensdkapiV4</string>  
        <string>mqzoneopensdk</string>  
        <string>wtloginmqq</string>  
        <string>wtloginmqq2</string>  
        <string>mqqwpa</string>  
        <string>mqzone</string>  
        <string>mqzonev2</string>  
        <string>mqzoneshare</string>  
        <string>wtloginqzone</string>  
        <string>mqzonewx</string>  
        <string>mqzoneopensdkapiV2</string>  
        <string>mqzoneopensdkapi19</string>  
        <string>mqzoneopensdkapi</string>  
        <string>mqqbrowser</string>  
        <string>mttbrowser</string>  
        <string>tim</string>  
        <string>timapi</string>  
        <string>timopensdkfriend</string>  
        <string>timwpa</string>  
        <string>timgamebindinggroup</string>  
        <string>timapiwallet</string>  
        <string>timOpensdkSSoLogin</string>  
        <string>wtlogintim</string>  
        <string>timopensdkgrouptribeshare</string>  
        <string>timopensdkapiV4</string>  
        <string>timgamebindinggroup</string>  
        <string>timopensdkdataline</string>  
        <string>wtlogintimV1</string>  
        <string>timapiV1</string>  
        <!-- Facebook URL Scheme 白名单-->  
        <string>fbapi</string>  
        <string>fb-messenger-api</string>  
        <string>fbauth2</string>  
        <string>fbshareextension</string>  
    </array>
5. 配置 URL Scheme
微信 微信 appKey wxdc1e388c3822c80b
QQ/Qzone/TIM 需要添加两项 URL Scheme:
1、"tencent"+腾讯 QQ 互联应用 appID
2、“QQ”+腾讯 QQ 互联应用 appID 转换成十六进制(不足 8 位前面补 0) 如 appID:100424468 1、tencent100424468
3、QQ05fc5b14 QQ05fc5b14 为 100424468 转十六进制而来,因不足 8 位向前补 0,然后加"QQ"前缀
新浪微博 “wb”+新浪 appKey wb3921700954
Facebook “fb”+FacebookID fb506027402887373
6.在 AppDelegate.m 中初始化 U-Share 及第三方平台
(1)引入头文件: #import【直接复制即可】
(2)launchOptions 中设置友盟 Key【直接复制即可】
    /* 打开调试日志 */  
    [[UMSocialManager defaultManager] openLog:YES];  

    /* 设置友盟 appkey */  
    [[UMSocialManager defaultManager] setUmSocialAppkey:USHARE_DEMO_APPKEY];  

    [self configUSharePlatforms];  

    [self confitUShareSettings];
(3)添加如下代码,配置第三方平台【直接复制即可,修改对应 key,secret】
    - (void)configUSharePlatforms  
    {  
        /*  
         设置微信的 appKey 和 appSecret 
         [微信平台从 U-Share 4/5 升级说明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_1 
         */  
        [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wxdc1e388c3822c80b" appSecret:@"3baf1193c85774b3fd9d18447d76cab0" redirectURL:nil];  
        /* 
         * 移除相应平台的分享,如微信收藏 
         */  
        //[[UMSocialManager defaultManager] removePlatformProviderWithPlatformTypes:@[@(UMSocialPlatformType_WechatFavorite)]];  

        /* 设置分享到 QQ 互联的 appID 
         * U-Share SDK 为了兼容大部分平台命名,统一用 appKey 和 appSecret 进行参数设置,而 QQ 平台仅需将 appID 作为 U-Share 的 appKey 参数传进即可。 
         100424468.no permission of union id 
         [QQ/QZone 平台集成说明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_3 
        */  
        [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"1105821097"/*设置 QQ 平台的 appID*/  appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];  

        /*  
         设置新浪的 appKey 和 appSecret 
         [新浪微博集成说明]http://dev.umeng.com/social/ios/%E8%BF%9B%E9%98%B6%E6%96%87%E6%A1%A3#1_2 
         */  
        [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"3921700954"  appSecret:@"04b48b094faeb16683c32669824ebdad" redirectURL:@"https://sns.whalecloud.com/sina2/callback"];  
        /* 设置 Facebook 的 appKey 和 UrlString */  
        [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Facebook appKey:@"506027402887373"  appSecret:nil redirectURL:nil];  
    }  
##### (4)设置回调【直接复制即可】
    - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation  
    {  
        //6.3 的新的 API 调用,是为了兼容国外平台(例如:新版 facebookSDK,VK 等)的调用[如果用 6.2 的 api 调用会没有回调],对国内平台没有影响  
        BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url sourceApplication:sourceApplication annotation:annotation];  
        if (!result) {  
             // 其他如支付等 SDK 的回调  
        }  
        return result;  
    }
(4)添加回调
- (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;
}
7. 将 ios 目录下【sharemodule.h】、【sharemodule.m】文件拖入你的项目即可

【 第三方分享 】

(1)图文分享

    import UShare from './share/share';  
    import SharePlatform from './share/SharePlatform';  

    /** 
       * 参数说明: 
       * 1. 标题 
       * 2. 内容 
       * 3. 跳转链接 
       * 4. 图片链接 
       * 5. 分享平台 
       * 6. 分享结果回调 
       */  
      UShare.share('标题','内容','http://baidu.com','http://dev.umeng.com/images/tab2_1.png', SharePlatform.QQ, (message) => {   
          // message:分享成功、分享失败、取消分享
          // ToastAndroid.show(message,ToastAndroid.SHORT);  
      });

(2)纯图片分享

    NativeModules.sharemodule.shareImg(image.path, SharePlatform.WECHAT, (result)=>{
    });

   image.path 即图片存储在手机上的位置,例如:file:///data/user/0/com.xxx/cache/react-native-image-crop-picker/eb62e869-b6d2-666.jpg

【 第三方登录 】

    import UShare from './share/share';  
    import SharePlatform from './share/SharePlatform';  

    /**
     * 第三方登录
     * 参数:登录平台、登录结果回调
     * 结果参数:
     *  'userId: ' 用户 id
        'accessToken: token
        'userName: ' 用户昵称
        'userGender: ' 用户性别
        'userAvatar: ' 用户头像
     */ 
     UShare.authLogin(SharePlatform.QQ, (result) => {
         // code: 0 成功、1 失败、2 取消
         if(result.code === 0) {
             console.log('授权登录成功:' + 
                 'userId: ' + result.uid + 
                 'accessToken: ' + result.accessToken +
                 'userName: ' + result.userName + 
                 'userGender: ' + result.userGender + 
                 'userAvatar: ' + result.userAvatar
             );
         } else {
             // TODO...
         }
     });
Support Me
Apps
About Me
Google+: Trinea trinea
GitHub: Trinea