解决这个问题非常困难,因为我没有得到任何解决方案,所以我用了我的方式。我在这里分享所有相关代码:
这将捕获特定区域并且它处于渲染状态
我导入以下所有库:
import ViewShot, { capture, captureScreen, captureRef} from "react-native-view-shot";
import RNFetchBlob from 'react-native-fetch-blob';
import Share, {ShareSheet} from 'react-native-share';
我添加了 this.screenshot = {};在构造函数中并绑定 iOS 和 Android 的单独函数。
constructor(props) {
super(props);
this.screenshot = {};
this.state = {
newsListArray: [],
loading:false,
alertMsg:'',
errorMsg:'',
refreshing: false,
},
this._captureScreenIos = this._captureScreenIos.bind(this);
this._captureScreenAndroid = this._captureScreenAndroid.bind(this);
}
之后在渲染中我使用了以下代码:
renderRowItem = (itemData) => {
return (
<View collapsable={false} ref={(shot) => { this.screenshot[itemId] = shot; }} >
// Add you code here
</View>
)
}
这是我捕获特定区域的按钮:
<TouchableOpacity onPress={ () => {
Platform.OS === 'ios' ?
this._captureScreenIos(itemData.item._id) :
this._captureScreenAndroid(itemData.item._id)
}}>
<View style={{flexDirection:'row'}}>
<Icon name="share-alt" size={16} color="#ffb6cf" />
<Text style={{paddingLeft:6,fontSize:12,fontWeight:'500'}}>Share News</Text>
</View>
</TouchableOpacity>
我在为 iOS 和 Android 调用相同的函数时遇到了很多问题,所以我为两者调用单独的函数,如下例所示:
Android:
_captureScreenAndroid(itemId) {
this.changeLoaderStatus();
captureRef(this.screenshot[itemId],{format: 'png',quality: 0.8}).then(res => {
const granted = PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
{
title: '<Project Name> Storage Permission',
message: '<Project Name> needs access to your storage ' +
'so you can save your photos',
},
);
if (PermissionsAndroid.RESULTS.GRANTED) {
var promise = CameraRoll.saveToCameraRoll(res);
var thisFun = this;
promise.then(function(result) {
RNFetchBlob.fs.readFile(result, 'base64').then((base64data) => {
console.log("base64data",base64data)
let base64Image = `data:image/jpeg;base64,${base64data}`;
let shareOptions = {
title: "title here",
message: "add your message here" ,
url: base64Image,
subject: "subject here" // for email
};
Share.open(shareOptions);
thisFun.changeLoaderStatus();
})
}).catch(function(error) {
this.changeLoaderStatus();
});
}else{
this.changeLoaderStatus();
}
})
}
iOS:
_captureScreenIos(itemId) {
this.changeLoaderStatus();
var thisFun = this;
var viewShotRef = itemId;
captureRef(this.screenshot[itemId],{format: 'jpg',quality: 0.8}).then(res => {
RNFetchBlob.fs.readFile(res, 'base64').then((base64data) => {
let base64Image = `data:image/jpeg;base64,${base64data}`;
const shareOptions = {
title: "<Project-Name>",
message: "Download <Project-Name> "+ "\n" + <MY APP STORE URL> ,
url: "file://"+res,
subject: "<Project-Name>"
};
Share.open(shareOptions);
thisFun.changeLoaderStatus();
})
}).catch(error => {
console.log(error, 'this is error');
this.changeLoaderStatus();
})
}