npm 包 react-native-social-share 使用教程

在 React Native 中，分享是一个常用的功能。使用 react-native-social-share 这个 npm 包可以快速实现分享功能，能够分享到多个平台，例如微信、QQ、微博等。这篇文章将介绍如何使用 react-native-social-share 实现分享功能。

安装

在项目根目录下运行以下命令进行安装：

npm install react-native-social-share --save

如果你使用的是 yarn ，运行以下命令：

yarn add react-native-social-share

导入

在要使用分享功能的页面导入 react-native-social-share：

import SocialShare from 'react-native-social-share';

使用

下面是一个简单的分享示例代码：

import React, { Component } from 'react';
import { Text, TouchableWithoutFeedback, View } from 'react-native';
import SocialShare from 'react-native-social-share';

export default class ShareExample extends Component {
  onSharePress = () => {
    SocialShare.share({
      text: '这是一段分享的文本',
      image: 'http://example.com/example.png',
      title: '分享标题',
      url: 'http://example.com',
    });
  };

  render() {
    return (
      <View>
        <TouchableWithoutFeedback onPress={this.onSharePress}>
          <View>
            <Text>点击分享</Text>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
}

在 onSharePress 方法中调用 SocialShare.share 方法来实现分享功能。在传递参数时，可以根据需要选择性地传递 text、image、title、url，以满足分享的不同需求。

分享到微信

如果要分享到微信，需要配置微信的 appId，并导入微信的 SDK。在 Info.plist 中添加以下配置：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>wx[appid]</string>
    </array>
  </dict>
</array>

将上面的 [appid] 替换为你的微信 appId。

在 AndroidManifest.xml 中添加以下代码：

<activity
  android:name=".wxapi.WXEntryActivity"
  android:exported="true"
  android:label="@string/app_name"
  android:screenOrientation="portrait"
  android:theme="@android:style/Theme.Translucent.NoTitleBar" />

然后在你的应用程序启动时，调用 WeChat.registerApp 并传入微信 appId：

import WeChat from 'react-native-wechat-lib';

WeChat.registerApp('wx[appid]');

将上面的 [appid] 替换为你的微信 appId。

在调用 SocialShare.share 方法时，可以传递 appName 来指定分享到微信：

SocialShare.share({
  text: '这是一段分享的文本',
  image: 'http://example.com/example.png',
  title: '分享标题',
  url: 'http://example.com',
  appName: 'wechat',
});

分享到微博

如果要分享到微博，需要在微博开发平台中创建一个应用，并在应用中获取 appKey 和 redirectUrl。在 Info.plist 中添加以下配置：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>wb[appkey]</string>
    </array>
  </dict>
</array>

将上面的 [appkey] 替换为你的微博 appKey。

在调用 SocialShare.share 方法时，可以传递 appName 来指定分享到微博：

SocialShare.share({
  text: '这是一段分享的文本',
  image: 'http://example.com/example.png',
  title: '分享标题',
  url: 'http://example.com',
  appName: 'weibo',
});

总结

以上就是使用 react-native-social-share 实现分享功能的步骤。使用 SocialShare.share 方法传递参数即可实现分享，而且可以支持多个平台。如果你需要在 React Native 中实现分享功能，不妨尝试使用 react-native-social-share 这个 npm 包。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53dc0