一、现象

1、需求:把某展示页面进行截取保存到相册、并可进行以海报的形式分享出去;

2、支持iOS和安卓

 

二、解决

1、安装: npm i --save react-native-view-shot

2、进行链接处理:react-native link react-native-view-shot

3、当为IOS时执行还需要执行一下命令(安卓不用):cd ios && pod install && cd ..

4、使用:

(1)、引用:

  import { captureRef } from "react-native-view-shot";

(2)、模板:

  <View ref="shareImageRef">这里为需要展示的内容</View>

(3)、方法:

// 获得截取后的图片链接

doDownLoadImage = () => {
  captureRef(this.refs.shareImageRef, {
    format: "jpg",
    quality: 0.8
  }).then(
    uri => {

      console.error("链接为:", uri)

    },
    error =>  {

      console.error("错误信息为:", error)

    } 
  );
}

// 进化方法,获得截取后的图片链接进行保存处理到相册处理

doDownLoadImage = () => {
  captureRef(this.refs.shareImageRef, {
    format: "jpg",
    quality: 0.8
  }).then(
    uri => {

      console.error("链接为:", uri) 

 

      let promise = CameraRoll.saveToCameraRoll(uri);
      promise
      .then((result) => {
        alert('保存成功!');
      })
      .catch((error) => {
        alert('保存失败!');
      });

    },
    error =>  {

      console.error("错误信息为:", error)

    } 
  );
}

注:保存引用了(自行安装): import CameraRoll from '@react-native-community/cameraroll';

 

// 把生成的链接转化为 base64,处理为可分享的链接 (老版本微信SDK做法,如果是新的没有UIWEBVIEW的SDK请看下一方法)

doShareImg = () => {
  captureRef(this.refs.shareImageRef, {
    format: "jpg",
    quality: 0.8
  }).then(
    uri => {

      console.error("链接为:", uri)   

      RNFS.readFile(uri, 'base64')
      .then((content) => {

        // 分享的海报图地址为:

        const link = 'data:image/png;base64,' + content

        console.log("分享的海报图地址为" + link)
      })
      .catch((err) => {
        console.log("reading error: " + err);
      });

    },
    error =>  {

      console.error("错误信息为:", error)

    } 
  );
}

注:图片转化为base64引用了:import RNFS from 'react-native-fs';

 

 

 

// 把生成的链接转化为 base64,处理为可分享的链接 (新版本微信SDK做法)

 

doShareImg = () => {
  captureRef(this.refs.shareImageRef, {
    format: "jpg",
    quality: 0.8
  }).then(
    uri => {

 

      console.error("链接为:", uri)

      let setUrl = uri

      // 因Ios截取的链接没有file://,而android却有,所以需要做一下判断处理
      if (uri.indexOf('file://') === -1) {
        setUrl = 'file://' + setUrl
      }

      console.log("分享的海报图地址为" + setUrl)

 

    },
    error =>  {

 

      console.error("错误信息为:", error)

 

    } 
  );
}

 

 

 

三、总结:

更多使用方法以及参数可按需去取 : https://www.npmjs.com/package/react-native-view-shot

 

TIPS:在安卓上可能你会碰到这样的问题,如图:

 

 

Trying to resolve view with tag 2573 which doesn't exist 或

Trying to resolve view with tag 2105 which doesn't exist

这两种现象都给我碰到了,解决处理是给需要截取的内容添加背景色

如在模块上添加:

<View ref="shareImageRef" style={{backgroundColor: 'white'}}>这里为需要展示的内容</View>

 

 

posted on 2021-08-25 11:17  小老虎网络  阅读(259)  评论(0编辑  收藏  举报