web-dev-qa-db-ja.com

React Native-whatsappで画像とテキストを共有できますか？

反応ネイティブを使用してwhatsappアプリに画像（および可能であればテキスト）を送信/共有する方法を見つけるのに何時間も費やしましたが、

この質問 （Androidの場合）および この質問 （リンクを使用）を読みました

androidでは、whatsappに画像とテキストを送信できますが、ネイティブに反応すると、それをアーカイブする方法がわかりません。

誰もがアイデアを持っていますか？

imagereact-nativewhatsapp
8
flix

0.56.0を超える反応ネイティブバージョンでは、ソーシャル共有機能がライブラリに既に実装されているため、 react-native-share のような追加のライブラリは不要になり、管理されない可能性があります。実際、以前のバージョンの反応ネイティブには react-native-share ライブラリを使用していましたが、対応するコードを-を持つShareクラスをエクスポートする反応ネイティブ実装に移行しました- share メソッドであり、非常に使いやすいです。

次に、 share メソッドを使用してデータを共有すると、react-nativeがどのアプリに電話がインストールされているかがわかります。次の画像では、Android WhatsAppアプリケーションがインストールされた携帯電話での共有画面の様子を見ることができます。 enter image description here

そして、これはアプリがインストールされていないiOSシミュレーターでの方法です： enter image description here

ここでコードの例を見つけることができます：

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

最後に、image + textメッセージを送信するオプションが必要です。-shareOptionsのurlフィールドを使用して、画像のリモートURIを追加できます。 WhatsAppメッセージでプレビューでき、タイトルまたは件名フィールドでテキストを追加できます。 -次のようなbase64ファイルのURLを共有できます：url: 'data:image/png;base64,<base64_data>'

6
Nacho Justicia Ramos

複数の画像を同時に共有したい場合は、react-native-multi-shareを使用できます:)

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

0
Alex Lévy

反応ネイティブ0.59バージョンを使用していましたが、デフォルトの反応ネイティブ共有はmessageまたはurlのいずれかを取得するため、whatsappで画像とテキスト（リンクを含む）を共有できませんでしたので、必要です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);
    });
};

};

0
Farhan