React Native 截屏组件

yacheng 发布于2019-08-21 17:55 / 2310人阅读

摘要：如果是，那么未显示的部分是不会被截取的。如果设置为的话，会动态计算组件的高度。如果是组件，就会截取整个的实际高度。

本文原创首发于公众号：ReactNative开发圈，转载需注明出处。

React Native 截屏组件：react-native-view-shot，可以截取当前屏幕或者按照当前页面的组件来选择截取，如当前页面有一个图片组件，一个View组件，可以选择截取图片组件或者View组件。支持iOS和安卓。

安装方法

npm install react-native-view-shot
react-native link react-native-view-shot

使用示例 captureScreen() 截屏方法

截取当前屏幕，跟系统自带的截图一致，只会截取当前屏幕显示的页面内容。如果是ScrollView，那么未显示的部分是不会被截取的。

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

captureScreen({
  format: "jpg",
  quality: 0.8
})
.then(
  uri => console.log("Image saved to", uri),
  error => console.error("Oops, snapshot failed", error)
);

captureRef(view, options) 根据组件reference名称来截取

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

render() {
     return (
     
          
           
    
);
}

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

指定需要截取的组件的ref名称，然后将该ref名称传递给snapshot方法来截取指定组件的内容。如需要截取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的实际高度。

支持的组件

示例源码

GitHub - forrest23/ReactNativeComponents: React Native组件大全

组件地址

GitHub - gre/react-native-view-shot: Snapshot a React Native view and save it to an image

举手之劳关注我的微信公众号：ReactNative开发圈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90206.html

加推Weex实践之路（上）

摘要：我们参考小程序的设计思路进行了优化升级，为每一个需要特有化配置的页面添加一个格式的配置文件，配置文件包括导航栏的配置页面级别的配置跳转的配置等，将配置工程化标准化。设置导航栏按钮包含按钮样式的数组通过完成按钮事件的回调。一、背景1.为什么是Weex在公司快速发展的大环境下，App的更新迭代高速、高频，技术团队平均两周便可诞生一款中型App，但App团队只有6个人（iOS 、Android各3...

shuibo 2019-05-22 19:43 评论0 收藏0
前端清单第 27 期：React Patent License 回复，Shopify WebVR 购

摘要：新闻热点国内国外，前端最新动态就开源许可证风波进行回复数周前，基金会决定禁止旗下项目使用，因为其在标准的许可证之外添加了专利声明此举引发了社区的广泛讨论，希望能够更新其开源许可证。 showImg(https://segmentfault.com/img/remote/1460000010777089); 前端每周清单第 27 期：React Patent License 回复，Sho...

jeffrey_up 2019-08-21 12:03 评论0 收藏0