Share 分享API

API兼容性: 适用于独立客户端 QRN:v2.0.0

Share api是比较底层的分享api,如果要直接使用现成的分享组件,可以参看ShareView组件文档

1、引入

独立sdk化组件,需要单独从 @qnpm/qunar-react-native-sdk 库中引入。

import { Share } from '@qnpm/qunar-react-native-sdk';

2、支持的分享类型

Share.wechatTimeline, //朋友圈
Share.wechatFriends, //微信好友
Share.sinaWeibo, //新浪微博
Share.QQFriend, //QQ好友
Share.sms, //短信
Share.email, //分享到邮件
Share.copyLink, //copy链接
Share.systemShare, // 系统分享

3、分享内容Ready的监听函数

在分享到微信时,分享内容中设置的图片会在分享之前下载到本地,然后以Base64 形式在传给微信。所以为了保证在任何网络情况下都体验良好,特将下载完成的事件封装出来,供界面开发时显示/隐藏loading用。

addShareReadyListener(handler : Function)

接收广播

参数:handler : Function

返回值 listener:EmitterSubscription

removeShareReadyListener(listener:EmitterSubscription)

移除广播

参数listener:EmitterSubscription

4、分享API

(1) 分享到微信好友

Share.onWechatFriends({
    title: '分享到微信好友',
    desc: '分享自: Quanr',
    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
    '0.jpg',
    link: 'http://www.baidu.com'},
function (data) {
    // 成功
}, function (data) {
    // 失败
})

(2) 分享到微信朋友圈

Share.onWechatTimeline({
    title: '分享到微信朋友圈',
    desc: '分享自: quanr',
    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
    '0.jpg',
    link: 'http://www.qunar.com'},
function (data) {
    // 成功
}, function (data) {
    // 失败
})

(3) 分享到qq好友

Share.onQQFriends({
    title: '分享到QQ好友',
    desc: '分享自:Qunar',
    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
    '0.jpg',
    link: 'http://www.qunar.com'},
function (data) {
    // 成功
}, function (data) {
    // 失败
})

(4) 分享到新浪微博

Share.onSinaWeibo({
    title: '新浪微博',
    desc: '分享自:Qunar',
    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
    '0.jpg',
    link: 'http://www.qunar.com'},
function (data) {
    // 成功
}, function (data) {
    // 失败
})

(5) 分享到短信

Share.onSMS({
    title: '短信分享: http://www.qunar.com/',
}, function (data) {
    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
},function (data) {
    // 成功
}, function (data) {
    // 失败
})

(6) 分享到邮件

Share.onEmail({
    title: 'email分享: http://www.qunar.com/, 来自:xxx',
}, function (data) {
    // 成功
}, function (data) {
    // 失败
})

(7) 复制链接

Share.onCopyLink({
    link: 'http://www.qunar.com'
},
function (data) {
    // 成功
}, function (data) {
    // 失败
})

(8) 系统分享

Share.onSystemShare({
    title: '系统分享',
    desc: '分享自:Qunar',
    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
    '0.jpg',
    link: 'http://www.qunar.com'},
function (data) {
    // 成功
}, function (data) {
    // 失败
})

使用说明

'use strict';

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

import  { Toast } from 'qunar-react-native';

import { ShareView, Share } from '@qnpm/qunar-react-native-sdk';

const toastDuration = Toast.LONG;
const toastOffSet = Toast.MIDDLE;

class SingleShareExample extends Component {
    constructor() {
        super();
        this._handlePress = this._handlePress.bind(this);
    }

    render() {

        var a = {
            wechatTimeline: '分享到朋友圈', //朋友圈
            wechatFriends: '分享到微信好友', //微信好友
            QQFriend: '分享到qq好友', //QQ好友
            sinaWeibo: '分享到新浪微博', //新浪微博
            sms: '分享到短信', //短信
            email: '分享到邮件', //邮件
            copyLink: '复制链接', // 复制链接
            systemShare: '系统分享', //系统分享
        };

        var shareItems = [];
        for(var key in a){
            shareItems.push(
                <TouchableOpacity style={{marginTop: 20}} onPress={this._handlePress.bind(this, key)}>
                    <Text style={{fontSize: 16}}>
                        {a[key]}
                    </Text>
                </TouchableOpacity>
            );
        }
        return(
            <View>
                {shareItems}
            </View>
        );
    }

    _handlePress(type) {
        switch (type) {
            case Share.wechatFriends:
                Share.onWechatFriends({   title: '分享到微信好友',
                    desc: '分享自: Qunar',
                    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
                    '0.jpg',
                    link: 'http://www.qunar.com'},
                function (data) {
                    //显示
                    Toast.show(data.userInfo.desc, 2000, toastOffSet);
                }, function (data) {
                    Toast.show(data.userInfo.desc, 2000, toastOffSet);
                })
                break;
            case Share.wechatTimeline:
                Share.onWechatTimeline({   title: '分享到微信朋友圈',
                    desc: '分享自: quanr',
                    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
                    '0.jpg',
                    link: 'http://www.qunar.com'}, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                }, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                })
                break;

            case Share.QQFriend:
                Share.onQQFriends({
                    title: '分享到QQ好友',
                    desc: '分享自:Qunar',
                    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
                    '0.jpg',
                    link: 'http://www.qunar.com'}, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                }, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                })
                break;

            case Share.sinaWeibo:
                Share.onSinaWeibo({
                    title: '新浪微博',
                    desc: '分享自:Qunar',
                    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
                    '0.jpg',
                    link: 'http://www.qunar.com'}, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                }, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                })
                break;

            case Share.sms:
                Share.onSMS({
                    title: '短信测55试链接',
                }, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                }, function (data) {
                    console.log(data.userInfo.desc);
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                })
                break;

            case Share.email:
                Share.onEmail({
                    title: 'email分享',
                    desc:'分享自:Qunar',
                }, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                }, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                })
                break;
            case Share.copyLink:
                Share.onCopyLink({
                        link: 'http://www.qunar.com'
                    },
                    function (data) {
                        Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                    }, function (data) {
                        Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                    })
                break;

            case Share.systemShare:
                Share.onSystemShare({
                    title: '系统分享',
                    desc: '分享自:Qunar',
                    imgUrl: 'http://d7.yihaodianimg.com/V00/M0A/DD/11/CgQDsFSx9CuAcW3rAATkZcw6XN415300_380x38' +
                    '0.jpg',
                    link: 'http://www.qunar.com'}, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                }, function (data) {
                    Toast.show(JSON.stringify(data), toastDuration, toastOffSet);
                })
                break;
            default:
                break;
        }
    }
}