it-swarm.com.de

React Native - Können wir ein Bild und einen Text in WhatsApp teilen?

Ich habe eine Stunde damit verbracht, eine Möglichkeit zu finden, ein Bild (und, falls möglich, einen Text) in die WhatsApp-App zu senden/freizugeben, indem ich "native reagieren" verwende.

Ich habe diese Frage (in Android) und diese Frage (über Verlinkung) gelesen

unter Android ist es möglich, Bilder und Texte an WhatsApp zu senden.

hat jemand eine Idee?

3
flix

Bei reaktionsnativen Versionen größer als 0.56.0 ist die Social-Share-Funktionalität bereits in der Bibliothek implementiert, sodass zusätzliche Bibliotheken wie react-native-share nicht mehr benötigt werden und möglicherweise nicht mehr verwaltet werden. Tatsächlich habe ich vor einigen Monaten die Bibliothek react-native-share für ältere Versionen von react-native verwendet und den entsprechenden Code auf die Implementierung react-native migriert, die eine Share-Klasse exportiert, die eine share Methode und es ist sehr einfach zu bedienen.

Anschließend können Sie die Methode share verwenden, um Daten freizugeben, und reaktionsnativ wird ermittelt, auf welchen Apps das Telefon installiert ist. In der folgenden Abbildung sehen Sie, wie der Freigabebildschirm auf einem Android-Telefon mit installierter WhatsApp-Anwendung aussieht: enter image description here

Und so würde es in einem iOS-Simulator ohne installierte App aussehen: enter image description here

Hier finden Sie ein Codebeispiel:

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>
    );
  }
}

Schließlich müssen Sie Optionen zum Senden der Bild + Text Nachricht: - Sie können das URL-Feld von shareOptions verwenden, um den Remote-URI des Bildes hinzuzufügen, damit eine Vorschau in der WhatsApp-Nachricht und dem Titel oder angezeigt werden kann Betreff-Felder, um den Text hinzuzufügen. - Sie können eine Base64-Datei-URL wie folgt freigeben: url: 'data:image/png;base64,<base64_data>'

Sie können react-native-multi-share verwenden, wenn Sie mehrere Bilder gleichzeitig teilen möchten :)

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

0
Alex Lévy

Ich habe die native Reaction-Version 0.59 verwendet, aber ich konnte dennoch kein Bild und keinen Text (einschließlich eines Links) auf WhatsApp teilen, da die native Reaction-Standardfreigabe entweder message oder url lautet, sodass dies erforderlich ist um die react-native-share Bibliothek zu benutzen https://github.com/react-native-community/react-native-share . Ich habe auch rn-fetch-blob Bibliothek, um Bild-URL in Base64-Bilddaten zu konvertieren.

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);
    });
};

};

0
Farhan