从反应本机 android 应用程序在 whatsapp 上分享图像

Question

I am currently working on react-native photo sharing app for Android. Used native share method but it only share message and title. No options to share an image.

Looking after so many questions here couldn't find any straight forward way.

Please provide help.

This is the message I am getting Share awesome status on whatsapp using Khela #imageurl. Download #urltoplaystore

Answer 1

To share any image in React Native you are right you need to use the Share from react-native library itself, and you were wondering what is needed for an image, the answer it's really simple, you just need to use a Base64 image.

Check it out a working snack: snack.expo.io/@abranhe/share-image

Wrap the code:

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Image,
  Share,
  TouchableOpacity,
} from 'react-native';

export default class App extends React.Component {
  state = {
      cat: 'data:image/jpeg;base64,some-encoded-stuff;
  };

  handleSharePress = () => {
    Share.share({
      title: 'Share',
      message: 'My amazing cat 😻',
      url: this.state.cat,
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <Image source={{ uri: this.state.cat }} style={styles.img} />
        <TouchableOpacity onPress={this.handleSharePress}>
          <Text>Share Image</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  img: {
    width: 200,
    height: 300,
  },
});

If you want to try something else, probably complex, I recommend to check out the react-native-share library from the React Native Community.

Answer 2

import Icon from 'react-native-vector-icons/Feather';
import Share from 'react-native-share';
import RNFetchBlob from 'rn-fetch-blob';
import React, {Component} from 'react';

const fs = RNFetchBlob.fs;
class ProductDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

shareTheProductDetails(imagesPath) {
    let {productDetails} = this.state;
    let imagePath = null;
    RNFetchBlob.config({
      fileCache: true,
    })
      .fetch('GET', imagesPath.image)
      // the image is now dowloaded to device's storage
      .then((resp) => {
        // the image path you can use it directly with Image component
        imagePath = resp.path();
        return resp.readFile('base64');
      })
      .then((base64Data) => {
        // here's base64 encoded image
        var imageUrl = 'data:image/png;base64,' + base64Data;
        let shareImage = {
          title: productDetails.product_name, //string
          message:
            'Description ' +
            productDetails.product_description +
            ' http://beparr.com/', //string
          url: imageUrl,
          // urls: [imageUrl, imageUrl], // eg.'http://img.gemejo.com/product/8c/099/cf53b3a6008136ef0882197d5f5.jpg',
        };
        Share.open(shareImage)
          .then((res) => {
            console.log(res);
          })
          .catch((err) => {
            err && console.log(err);
          });
        // remove the file from storage
        return fs.unlink(imagePath);
      });
  }

render() {
return (
<TouchableOpacity
style={{
  borderWidth: 0,
  left:(5),
  top:(2),
}}
onPress={() =>
  this.shareTheProductDetails(images)
}>
<Icon
   style={{
     left: moderateScale(10),
   }}
  name="share-2"
  color={colors.colorBlack}
  size={(20)}
/>
</TouchableOpacity>
)}
}