React-Native之截图组件view-shot的介绍与使用
一,需求分析
1,需要将分享页生成图片，并分享到微信好友与朋友圈。
二,react-native-view-shot介绍
1,可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图片组件或者View组件。支持iOS和安卓。
2,如需要截取ScrollView，只需要将”full”传递给snapshot方法即可。 captureRef方法和captureScreen方法都可以设置options，options的说明如下：
- width / height：可以指定最后生成图片的宽度和高度。
- format：指定生成图片的格式png or jpg or webm (Android). 默认是png。
- quality：图片的质量0.0 - 1.0 (default)。
- result：最后生成的类型，可以是tmpfile、base64、data-uri。
- snapshotContentContainer：如果设置为True的话，会动态计算组件的高度。如果是ScrollView组件，就会截取整个ScrollView的实际高度。
3,一些方法
children:点阵化的实际内容。options:与captureRef方法中的选项相同。- captureMode(string):
- 如果没有定义(默认)。捕获不是自动的，您需要自己使用ref和调用capture()。
- "mount"：在挂载时捕获视图一次。(理解图像加载不会等待是很重要的，在这种情况下，您希望在图像#onLoad之后的viewShotRef.capture()中使用“none”)。
- "continuous"：这将捕获大量的图像连续。非常具体的用例。
- "update"：这将捕获图像每次反应重绘(上做更新)。非常具体的用例。
- onCapture:在定义captureMode函数时，将使用捕获结果调用这个回调函数。
- onCaptureFailure:当定义了captureMode函数时，当捕获失败时将调用这个回调函数。
三,react-native-view-shot使用
3.1 安装方法
npm install react-native-view-shot
自动配置：react-native link react-native-view-shot
手动配置：
1,android配置（1),在android/settings.gradle文件中添加如下代码:
include ':react-native-view-shot'
project(':react-native-view-shot').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-shot/android')
(2),在android/app/build.gradle文件中的dependencies标签中添加模块依赖:
...
dependencies {
...
implementation project(':react-native-view-shot') // Add this line only.
}(3),在MainActivity.java文件中添加如下代码:
import fr.greweb.reactnativeviewshot.RNViewShotPackage;; // Add this line before public class MainActivity
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new RNViewShotPackage(), // Add this line
);
} 2,ios配置
(1),在Xcode中Libraries目录下添加RNViewShot.xcodeproj(项目文件名/node_modules/react-native-view-shot/ios/)
(2),将Libraries中RNViewShot.xcodeproj下的products目录下的libRNViewShot.a文件拖到General--Linked FrameworksLibraries下
(3),在Xcode中项目目录下Build Settings--Header Search Paths 添加：$(SRCROOT)/../node_modules/react-native-view-shot/ios
3.2 使用实例
引入
import ViewShot, { captureScreen, captureRef } from "react-native-view-shot";1，captureScreen() 截屏方法：截取当前屏幕，跟系统自带的截图一致，只会截取当前屏幕显示的页面内容。如果是ScrollView，那么未显示的部分是不会被截取的。
captureScreen({
format: "jpg",
quality: 0.8
}).then(
uri => {
let Imageuri = (uri.toLowerCase()).includes('file://')?uri:'file://'+uri//判断是否有file://，没有则添加
self.setState({ Imageuri: Imageuri })
},
error => console.log("Oops, snapshot failed==" + error)
);2,captureRef(view, options) 根据组件reference名称来截取,如需要截取ScrollView，只需要将”full”传递给snapshot方法即可。
render() {
return (
<ScrollView ref="full">
<View ref="form1”>
</View>
<View ref="form2”>
</View>
</ScrollView>
);
}
snapshot = refname => () =>
captureRef(refname, {
format: "jpg",
quality: 0.8,
result: "tmpfile",
snapshotContentContainer: true
})
.then(
uri => console.log("Image saved to", uri),
error => console.error("Oops, snapshot failed", error)
);