React-native 社会化分享

一. 基于友盟封装的React-native的社会化分享
传送门: github
js调用方法:

SFUM

• static share(text, img, url, title, platform, callback) //分享方法
• static shareBoard(txt, img, url, title, platArr,callBack) //带界面的分享方法(UM自带但没有分享链接)
• static isInstall(plat,callback) //检测平台是否存在设备中

SFUmShareUI

• <SFUmShareUI
  ref={(ref) => this.share = ref}
  onShare={(i, isLast) => this.clickItem(i, isLast)}
  platArray={['QQ', 'WechatSession', 'WechatTimeLine', 'WechatFavorite', 'Qzone', 'Facebook']}/> //带分享链接的界面

// React native工程中 APP.JS中的分享示例
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
import {SFUmShareUI,SFUM} from 'react-native-sf-umshare'

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome} onPress={() => {
                    this.share.setVisiable(true)
                }}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>
                <SFUmShareUI
                    ref={(ref) => this.share = ref}
                    onShare={(i, isLast) => this.clickItem(i, isLast)}
                    platArray={['QQ', 'WechatSession', 'WechatTimeLine', 'WechatFavorite', 'Qzone', 'Facebook']}/>
            </View>
        );
    }

    clickItem = (i, isLast) => {
        if (isLast)
            alert('copy')
        else {
            var dic = {
                index: i,
                img: 'http://kplan.oss-cn-shanghai.aliyuncs.com/header/2017-11-27_1511778896586',
                text: 'text',
                url: 'http://kplan.oss-cn-shanghai.aliyuncs.com/header/2017-11-27_1511778896586',
                title: 'title',
            }
            this.share.setParams(dic, (data) => {
                this.share.setVisiable(false)
            })
        }
    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

//IOS 需要的配置    
/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>


#import <UMShare/UMShare.h>
#import "RNUMConfigure.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"RNShare"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  
  [RNUMConfigure initWithAppkey:@"5ac479118f4a9d4acf0000f5" channel:@"App Store"];
  [self configUSharePlatforms];
  
  return YES;
}


- (void)configUSharePlatforms
{
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_WechatSession appKey:@"wx852d43a16b2af151" appSecret:@"423f56cbcdd97217a44352805cb1f410" redirectURL:@"http://mobile.umeng.com/social"];
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_QQ appKey:@"1104484470"/*设置QQ平台的appID*/  appSecret:nil redirectURL:@"http://mobile.umeng.com/social"];
  [[UMSocialManager defaultManager] setPlaform:UMSocialPlatformType_Sina appKey:@"1601664396"  appSecret:nil redirectURL:@"https://sns.whalecloud.com/sina2/callback"];
}


- (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;
}

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options
{
  //6.3的新的API调用，是为了兼容国外平台(例如:新版facebookSDK,VK等)的调用[如果用6.2的api调用会没有回调],对国内平台没有影响
  BOOL result = [[UMSocialManager defaultManager]  handleOpenURL:url options:options];
  if (!result) {
    // 其他如支付等SDK的回调
  }
  return result;
}

- (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
{
  BOOL result = [[UMSocialManager defaultManager] handleOpenURL:url];
  if (!result) {
    // 其他如支付等SDK的回调
  }
  return result;
}


@end

其他平台需要导入的库和设置白名单 请见友盟
传送门: github