React Native - 我们可以将图像和文本共享到whatsapp吗？

Question

我花了一个小时的时间来找到一种方法来发送/共享一个图像(如果可能的话,还有文本)到whatsapp应用程序中使用react native,

我已经读过这个问题(在android中)和这个问题(使用链接)

在Android上,有可能将图像和文本发送到whatsapp,但在本机上我没有看到任何方法来实现它,

有谁有想法？

Answer 1

对于大于0.56.0的react-native版本,社交共享功能已经在库中实现,因此不再需要像react-native-share这样的额外库,并且它们可以是未被分类的.事实上,几个月前我使用的是react-native-share库,用于旧版本的react-native,我将相应的代码迁移到react-native实现,该实现导出了一个具有共享方法的Share类,并且它非常易于使用.

然后,您可以使用共享方法来共享数据,并且本机将知道安装了手机的应用程序.在下图中,您可以看到安装了WhatsApp应用程序的Android手机中共享屏幕的样子:

这就是在没有安装app的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>'

Answer 2

我使用的是 React Native 0.59 版本，但我仍然无法在 Whatsapp 上共享图像和文本（包括链接），因为默认的 React Native 共享要么得到要么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);
    });
};

};