Question

我正在尝试在react-native-share中分享一些东西。我从这里response url

的服务获取图片网址

然后这是我尝试的代码。

_shareTextWithTitle () {
const { title, shareImage } = this.props;
console.log(shareImage);
const shareOptions = {
        title: 'Ubud on Tap',
        message: `${title}  onTap. More http://www.example.com`,
        url:  shareImage,
        type: 'image/png',
        subject: 'hello world' //  for email
};
Share.open(shareOptions);
}

这里的问题是我可以在余下的应用程序中共享此内容和URL（包含图像），因为我可以分享图像和内容。

但是，当我尝试分享环聊和whatsapp时，它不会发送图片而是发送为图片网址和内容，如下所示

http://35.185.176.191:8001/images/medias/152180604.png sample. More http://www.example.com

我希望这会像剩下的那样发生。我想在所有社交应用程序中共享图像和内容。

根据我的研究，我认为imageurl应该转换为base64格式。但我不知道该怎么做

提前致谢

Answer 1

您可以使用react-native-fetch-blob下载图片并将其转换为base64。我已经为您编写了一份示例应用程序：

import React, { Component } from 'react';
import {
  Button,
  StyleSheet,
  View
} from 'react-native';

import RNFetchBlob from 'react-native-fetch-blob';
import Share from 'react-native-share';

export default class App extends Component {
  state = {
    loading: false
  }

  _downloadImageAndShare(title, message, url) {
    this.setState({ loading: true });

    var self = this;

    RNFetchBlob.config({ fileCache: false })
      .fetch('GET', url)
      .then(resp => {
        return resp.readFile('base64')
          .then(base64 => {
            return { resp, base64 };
          })
      })
      .then(obj => {
        var headers = obj.resp.respInfo.headers;
        var type = headers['Content-Type'];
        var dataUrl = 'data:' + type + ';base64,' + obj.base64;
        return { title, message, url: dataUrl };
      })
      .then(opts => {
        self.setState({ loading: false });
        return Share.open(opts);
      })
      .catch(err => {
        self.setState({ loading: false });
        console.log(err);
      })
  }

  constructor(props) {
    super(props);
    this._downloadImageAndShare = this._downloadImageAndShare.bind(this);
  }

  render() {
    return (
      <View style={ styles.container }>
        <Button
          disabled={ this.state.loading }
          onPress={ () => this._downloadImageAndShare('My image', 'Check out my image!', 'http://35.185.176.191:8001/images/medias/1521806024.png') }
          title={ this.state.loading ? 'Loading image...' : 'Share image' }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

将图片网址转换为base64格式以反应原生共享

1 个答案: