我目前正在为Android开发react-native照片共享应用程序。使用了本机共享方法,但它只共享消息和标题。没有共享图像的选项。在这里找了这么多问题后也找不到任何直截了当的办法。请提供帮助。这是我收到的消息,使用Khela #imageurl在whatsapp上分享真棒状态。下载#urltoplaystore
zaq34kh61#
要在React Native中共享任何映像,您需要使用react-native库本身的Share,您想知道映像需要什么,答案非常简单,您只需要使用Base64映像。
react-native
Share
看看它的工作小吃:snack.expo.io/@abrahamcalf/share-imagePackage 代码:
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, }, });
如果您想尝试一些其他的东西,可能很复杂,我建议您从React Native Community中查看react-native-share库。
react-native-share
vyswwuz22#
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> )} }
2条答案
按热度按时间zaq34kh61#
要在React Native中共享任何映像,您需要使用
react-native
库本身的Share
,您想知道映像需要什么,答案非常简单,您只需要使用Base64映像。看看它的工作小吃:snack.expo.io/@abrahamcalf/share-image
Package 代码:
如果您想尝试一些其他的东西,可能很复杂,我建议您从React Native Community中查看
react-native-share
库。vyswwuz22#