React Native - 我们可以在WhatsApp中分享图片和文本吗？

Question

我花了一个小时的时间在寻找一种使用React Native发送/分享图片（如果可能还包括文本）到WhatsApp应用的方法。

我阅读了这个问题（关于安卓）和这个问题（使用链接方式）。

在安卓系统上，可以将图片和文本发送到 WhatsApp，但是在 React Native 中，我没有找到任何实现的方法。

有人有想法吗？

- flix

---

你不需要使用 linking library，你需要新的 sharing library，或者你可以使用以下包。 - Pritish Vaidya

@PritishVaidya，你有没有关于如何将分享库与WhatsApp集成的参考代码？ - flix

我认为你应该检查一下这个react-native-share库。 - Ravi

你最终找到了iOS的解决方案吗？ - user-123

请查看这个答案。我希望它有所帮助。 - Shreyak Upadhyay

Answer 1

对于大于0.56.0版本的React Native，社交分享功能已经在库中实现，因此不再需要额外的库，例如react-native-share，这些库可能已经被遗弃。事实上，几个月前我使用react-native-share库来处理旧版的React Native，并将相应的代码迁移到导出Share类的React Native实现中，该类具有一个share方法，非常易于使用。

然后，您可以使用share方法共享数据，React Native会知道哪些应用程序已安装在手机上。在下面的图像中，您可以看到在安装WhatsApp应用程序的Android手机上共享屏幕的样子：

而这是在未安装任何应用程序的iOS模拟器中的外观：

您可以在此处找到代码示例：

import React, { Component } from 'react';
import {
  Share,
  Text,
  TouchableOpacity
} from 'react-native';

const shareOptions = {
  title: 'Title',
  message: 'Message to share', // Note that according to the documentation at least one of "message" or "url" fields is required
  url: 'www.example.com',
  subject: 'Subject'
};

export default class ShareExample extends React.Component {

  onSharePress = () => Share.share(shareOptions);

  render(){
    return(
      <TouchableOpacity onPress={this.onSharePress} >
        <Text>Share data</Text>
      </TouchableOpacity>
    );
  }
}

最后你有两种选项来发送包含图片和文本的消息： - 你可以使用shareOptions的url字段，添加图片的远程URI，以便在WhatsApp消息中预览，并使用标题或主题字段添加文本。 - 你可以分享一个base64文件链接，像这样：url: 'data:image/png;base64,<base64_data>'

- Nacho Justicia Ramos

---

请问图片分享功能在安卓设备上也能用吗？据文档所述，因为 url 属性只能在 iOS 上使用，所以我觉得好像不行。请再核对一下。 - demogar

你是对的，我认为你可以在“message”字段中添加图像URL，这样WhatsApp将尝试将相应的图像资源放入消息中。 - Nacho Justicia Ramos

可以通过使用“Platform”来确定是Android还是iOS（以使用消息或URL）来实现。 - demogar

@funjoker 当发送不同类型的文件时，URL会发生变化。

• 对于jpeg格式： url: "data:image/jpeg;base64,<base64_data>"
• 对于png格式： url: "data:image/png;base64,<base64_data>"
• 对于pdf或其他文件，您可以使用以下方式： url: "file://<file_path>"

- Nacho Justicia Ramos

@RedGiant 我有同样的需求。你找到任何解决方案了吗？我正在使用深度链接 const whatsappDeepLink = 'https://wa.me/phoneNumber?text=Message'; Linking.canOpenURL(whatsappDeepLink) - Rajendar Manda

Answer 2

我曾经使用React Native 0.59版本，但仍无法在WhatsApp上分享图像和文本（包括链接），因为默认的React Native Share只获取message或url，所以有必要使用react-native-share库https://github.com/react-native-community/react-native-share。我还使用了rn-fetch-blob库将图像URL转换为base64图像数据。

shareImage= () => {
RNFetchBlob.fetch('GET', `https://example.com/example.png`)
  .then(resp => {
    console.log('response : ', resp);
    console.log(resp.data);
    let base64image = resp.data;
    share('data:image/png;base64,' + base64image);
  })
  .catch(err => errorHandler(err));

share = base64image => {
  console.log('base64image : ', base64image);
  let shareOptions = {
    title: 'Title',
    url: base64image,
    message: 'https://somelink.com some message',
    subject: 'Subject'
  };

  Share.open(shareOptions)
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      err && console.log(err);
    });
};

};

- Farhan

---

这个能用于安卓应用上吗？因为根据文档，URL只在IOS上被允许。 - cauchy

是的，它适用于Android。默认的React Native共享库仅允许消息或URL，但是这个库https://github.com/react-native-community/react-native-share允许同时分享URL和消息（在文档中允许iOS和Android），我已经在Android上的WhatsApp上测试过了，它可以正常工作。 - Farhan

在Android上可以工作，但在iOS上无法工作。在iOS上只能发送图像或文本。 - red-devil

Answer 3

如果你想同时分享多张图片，可以使用react-native-multi-share :)

https://github.com/chuangbo/react-native-multi-share

- Alex Lévy