React native 反应本机视图快照捕获模糊屏幕快照

我正在使用react本机快照库共享我的屏幕。对于小内容，它工作得很好，但是对于细节视图，长滚动视图，它的模糊和文本不可读

<ViewShot ref="viewShot" options={{ format: 'jpg',
            quality: 0.8,height:100}}>
//content and images here from server
</ViewShot>

---

任何人都有建议，请分享…谢谢

解决这个问题非常困难，因为我没有得到任何解决方案，所以我用我的方式。我在这里分享所有相关代码：

这将捕获一个特定区域，并且它处于渲染状态

我导入以下所有库：

我添加了这个；在构造函数中，绑定iOS和Android的单独函数。

之后，在渲染中使用以下代码：

renderRowItem=（itemData）=>{
返回(
{this.screenshot[itemId]=shot；}}>
//在这里添加您的代码
)
}

这是我用来捕捉瞳孔区域的按钮：

{
Platform.OS==='ios'？
此.\u captureScreenIos（itemData.item.\u id）：
此.\u captureScreenAndroid（itemData.item.\u id）
}}>
分享新闻

我在为iOS和Android调用同一个函数时遇到了很多问题，所以我分别为这两个函数调用了不同的函数，如下面的示例：

Android:

\u captureScreenAndroid（itemId）{
this.changeLoaderStatus（）；
captureRef（this.screenshot[itemId]，{格式：'png'，质量：0.8}）。然后（res=>{
授予的常数=权限和ROID.request(
PERMISSIONS和roid.PERMISSIONS.WRITE\u外部存储，
{
标题：“存储权限”，
消息：“需要访问您的存储”+
“这样你就可以保存你的照片了”，
},
);
if（许可和ROID.结果授予）{
var promise=CameraRoll.saveToCameraRoll（res）；
var thisFun=这个；
承诺。然后（功能（结果）{
RNFetchBlob.fs.readFile（结果为'base64'）。然后（（base64data）=>{
log（“base64data”，base64data）
让base64Image=`data:image/jpeg；base64，${base64data}`；
让共享选项={
标题：“此处标题”，
信息：“在此处添加您的信息”，
url:base64Image，
主题：“此处主题”//用于电子邮件
};
公开（股票期权）；
thisFun.changeLoaderStatus（）；
})
}).catch（函数（错误）{
this.changeLoaderStatus（）；
});
}否则{
this.changeLoaderStatus（）；
}
})
}

iOS:

\u captureScreenIos（项目ID）{
this.changeLoaderStatus（）；
var thisFun=这个；
var viewShotRef=itemId；
captureRef（this.screenshot[itemId]，{格式：'jpg'，质量：0.8}）。然后（res=>{
RNFetchBlob.fs.readFile（res，'base64'）。然后（（base64data）=>{
让base64Image=`data:image/jpeg；base64，${base64data}`；
常量共享选项={
标题：“，
消息：“下载”+“\n”+，
url:“文件：/”+res，
主题：“
};
公开（股票期权）；
thisFun.changeLoaderStatus（）；
})
}).catch（错误=>{
log（错误，“这是错误”）；
this.changeLoaderStatus（）；
})
}

您是否有此实施的示例一分钟后让我在这里添加答案。如果有任何问题，请告诉我。

captureScreenIos = () => {
     console.log("Clicked for IOS");
     this.changeLoaderStatus();
     var thisFun = this;
      this.refs.viewShot.capture({width: 2048 / PixelRatio.get(), height: 2048 / PixelRatio.get()}).then(res => {
        RNFetchBlob.fs.readFile(res, 'base64').then((base64data) => {
          console.log("base64data",base64data)
          let base64Image = `data:image/jpeg;base64,${base64data}`;
          const shareOptions = {
            title: "My Beauty Squad",
            //message: "Download my beauty squad with below link."+ "\n" + "https://itunes.apple.com/uk/app/my-beauty-squad/id1454212046?mt=8" ,
            url: base64Image,
            subject: "Share news feed"
          };
          Share.open(shareOptions);
          thisFun.changeLoaderStatus();
        })
      }).catch(error => {
        console.log(error, 'this is error');
        this.changeLoaderStatus();
      })
     }

import ViewShot, { capture, captureScreen, captureRef} from "react-native-view-shot";
import RNFetchBlob from 'react-native-fetch-blob';
import Share, {ShareSheet} from 'react-native-share';

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>

_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();
    }
 })
}

_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();
   })
}