React-Native之截图组件view-shot的介绍与使用

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

三,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文件中添加如下代码:

1 include ':react-native-view-shot'
2 project(':react-native-view-shot').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-view-shot/android')

    (2),在android/app/build.gradle文件中的dependencies标签中添加模块依赖:

1  ...
2    
3  dependencies {
4   
5     ...
6   
7        implementation project(':react-native-view-shot')    // Add this line only.
8   
9  }

    (3),在MainActivity.java文件中添加如下代码:    

 1 import fr.greweb.reactnativeviewshot.RNViewShotPackage;; // Add this line before public class MainActivity
 2  
 3     ...
 4  
 5  @Override
 6   protected List<ReactPackage> getPackages() {
 7       return Arrays.<ReactPackage>asList(
 8           new MainReactPackage(),
 9           new RNViewShotPackage(),       // Add this line
10      );
11  }

     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 使用实例

   引入

1 import ViewShot, { captureScreen, captureRef } from "react-native-view-shot";

     1,captureScreen() 截屏方法:截取当前屏幕,跟系统自带的截图一致,只会截取当前屏幕显示的页面内容。如果是ScrollView,那么未显示的部分是不会被截取的。

 1  captureScreen({
 2                 format: "jpg",
 3                 quality: 0.8
 4             }).then(
 5                 uri => {
 6                     let Imageuri = (uri.toLowerCase()).includes('file://')?uri:'file://'+uri//判断是否有file://,没有则添加
 7                     self.setState({ Imageuri: Imageuri })
 8                 },
 9                 error => console.log("Oops, snapshot failed==" + error)
10         );

     2,captureRef(view, options) 根据组件reference名称来截取,如需要截取ScrollView,只需要将”full”传递给snapshot方法即可。

 1 render() {
 2      return (
 3      <ScrollView ref="full">
 4           <View ref="form1”>
 5            </View>
 6                   <View ref="form2”>
 7            </View>
 8     </ScrollView>
 9 );
10 }
11 
12 snapshot = refname => () =>
13 captureRef(refname, {
14   format: "jpg",
15   quality: 0.8,
16   result: "tmpfile",
17   snapshotContentContainer: true
18 })
19 .then(
20   uri => console.log("Image saved to", uri),
21   error => console.error("Oops, snapshot failed", error)
22 );

 

posted @ 2018-08-30 20:09  jackson影琪  阅读(6521)  评论(0编辑  收藏