React Native-我们可以将图像和文本共享到whatsapp中吗? [英] React Native - can we share an image and text into whatsapp?

问题描述

我花了一个小时来寻找一种使用本机反应将图像(如果可能的话，文本)发送/共享到whatsapp应用的方法，

I've spent an hours to find a way to send/share an image (and text if possible) into whatsapp app using react native,

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

I've read this question (in android) and this question (using linking)

在android上，可以将图像和文本发送到whatsapp，但是在本机上我看不到任何存档方式，

on android, it is possible to send image and text to whatsapp, but on react native i don't see any way to archieve it,

有人有主意吗?

推荐答案

对于本机版本大于0.56.0的社会共享功能，该库中已经实现了社交共享功能，因此，诸如 react-native-share 库对于较旧版本的react-native，我将相应的代码迁移到react-native实现，该实现导出具有

For react-native versions greater than 0.56.0 the social share functionality is already implemented in the library, so extra libraries like react-native-share are no longer needed and they could be unmantained. In fact, I was using react-native-share library some months ago for older versions of react-native and I migrated the corresponding code to the react-native implementation that exports a Share class that has a share method and it's very easy to use.

然后，您可以使用 share 方法共享数据并做出反应-native会知道已安装手机的应用程序.在下图中，您可以看到共享屏幕在安装了WhatsApp应用程序的Android手机中的样子:

Then, you can use share method to share data and react-native will know what apps have the phone installed. In the following image you can see how the sharing screen looks like in an Android phone with WhatsApp application installed:

这是在未安装任何应用的iOS模拟器中的样子:

And this is how it would like in an iOS simulator with no app installed:

在这里您可以找到代码示例:

Here you can find an example of code:

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消息中进行预览，并可以使用title或subject字段来添加文本. -您可以共享base64文件网址，如下所示: url: 'data:image/png;base64,<base64_data>'

Finally you have to options to send the image + text message: - You can use the url field of the shareOptions adding the remote URI of the image so it can be previewed in the WhatsApp message, and the title or subject fields to add the text. - You can share a base64 file url like this: url: 'data:image/png;base64,<base64_data>'

这篇关于React Native-我们可以将图像和文本共享到whatsapp中吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！