react native截屏组件 react-native-view-shot总结

截屏组件react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取
兼容情况：

1、安装

yarn add react-native-view-shot

React Native 0.60.x之前的版本需要手动link，

react-native link react-native-view-shot

0.60.x之后会自动link，不过ios可能需要做些手动操作

cd ios && pod install && cd ..

2、使用高级API

现在官方推荐使用的高级API：
直接将组件导入当作标签使用：

import ViewShot from "react-native-view-shot";  // 这里的ViewShot就是要使用的标签的名字

下面的所包裹的就是需要截图的区域，里面所有的元素都会被截下来

  ...这里是截图区域，可以是任意显示元素... 

对应的取值方法
指定需要截取的组件的ref名称，然后调用capture()来截取指定组件的内容。如下，需要使用viewShot.capture()来进行截取：

this.refs.viewShot.capture().then(uri => {
  console.log("截图完成以后的操作 ", uri); // 这里的uri即为截取完成的图片，可以是本地文件、base64等等
});

补充options

标签上面使用到的options属性参数：

• format：指定生成图片的格式png 、 jpg 、 webm (Android)， 默认格式为png
• quality：截取的图片质量，取值0.0 - 1.0 ，默认为1.0
• result：最后生成的图片类型：tmpfile、base64、data-uri，
  1、tmpfile：临时文件（该文件仅在应用程序运行时才存在）。
  2、base64：编码为base64并返回原始字符串。仅适用于小图像。
  3、data-uri：与base64相同，还包含数据URI方案头。
• width ：指定最后生成的图片的宽度
• height：指定最后生成的图片的高度

需要截取的区域有动态加载的图片时

需要在图片加载完以后再去进行截取：

class waitingCaptureDemo extends Component {
  onImageLoad = () => {
    this.refs.viewShot.capture().then(uri => {
      console.log("图片加载完成以后进行的截取 ", uri);
    })
  };
  render() {
    return (
      
        ...截取区域..
        
      
    );
  }
}

截取区域为ScrollView时

class captureScrollViewContentDemo extends Component {
  onCapture = uri => {
    console.log("ScrollView的完整内容截图 ", uri);
  }
  render() {
    return (
      
        
          .这里是ScrollView的内容部分	
        
      
    );
  }
}

补充captureMode、onCapture、onCaptureFailure

captureMode
如果没有定义捕获模式，默认不是自动捕获的，需要使用ref并且调用capture()；
取值：

• mount：挂载后立即捕获视图
• continuous：连续捕获很多图像
• update：每次React重绘（更新时）时捕获图像

onCapture：当定义了captureMode时，使用这个回调获取捕获结果；
onCaptureFailure：当定义了captureMode时，如果捕获失败，则将调用此回调。

3、使用captureRef 低级API

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

captureRef(viewRef, {
  format: "png",
  quality: 1
}).then(
  uri => console.log("这是需要保存的图片", uri),
  error => console.error("截取图片失败", error)
);

未完待续~~~~~~~~