Question

我正在使用react-native-snap-shot库共享屏幕。对于较小的内容，它工作正常，但对于详细视图，请长时间滚动查看，其模糊和文本不可读。

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

我调用共享图像的功能

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

任何人都有建议，然后分享...谢谢

Answer 1

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

这将捕获特定区域并且位于渲染中

我导入以下所有库：

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

我添加了此内容。在构造函数中，并绑定我用于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();
   })
}

对原生视图拍摄的模糊屏幕截图做出反应

1 个答案: