对于大于0.56.0版本的React Native,社交分享功能已经在库中实现,因此不再需要额外的库,例如react-native-share,这些库可能已经被遗弃。事实上,几个月前我使用react-native-share库来处理旧版的React Native,并将相应的代码迁移到导出Share类的React Native实现中,该类具有一个share方法,非常易于使用。
然后,您可以使用share方法共享数据,React Native会知道哪些应用程序已安装在手机上。在下面的图像中,您可以看到在安装WhatsApp应用程序的Android手机上共享屏幕的样子:
而这是在未安装任何应用程序的iOS模拟器中的外观:
您可以在此处找到代码示例:
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>
);
}
}
最后你有两种选项来发送包含图片和文本的消息:
- 你可以使用shareOptions的url字段,添加图片的远程URI,以便在WhatsApp消息中预览,并使用标题或主题字段添加文本。
- 你可以分享一个base64文件链接,像这样:url: 'data:image/png;base64,<base64_data>'
message
或url
,所以有必要使用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);
});
};
};
如果你想同时分享多张图片,可以使用react-native-multi-share :)
linking library
,你需要新的sharing library
,或者你可以使用以下包。 - Pritish Vaidya