React Native 截屏组件

本文原创首发于公众号: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 (
     <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)
);

指定需要截取的组件的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的实际高度。

支持的组件

示例源码

https://github.com/forrest23/ReactNativeComponents

组件地址

https://github.com/gre/react-native-view-shot

原文发布于微信公众号 - ReactNative开发圈(ReactNative-Circle)

原文发表时间:2017-12-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

微信小程序入门(六)

1333
来自专栏计算机编程

【vue随手笔记】MuseUI 自定义 select 适配 mobile

通过 emit将result值发给外部实现字父组件的双向绑定,于是父组件获取result值即:

1172
来自专栏无原型不设计

【Mockplus教程】页面属性

每个页面都具有独自的属性,通过页面属性对话框可以设置 页面的背景、统一字号以及相应平台的页面尺寸等。 打开需要添加或者查看备注信息的页面,在页面节点上面鼠...

3286
来自专栏蓝天

常用vim设置

    \ if line("'\"")>0&&line("'\"")<=line("$") |

1054
来自专栏每日一篇技术文章

weex-10-组件a的使用

a标签使用起来比较简单,先留下一个问题,如果想要跳转到html页面怎么实现?我们后面会讲到!

1172
来自专栏Nian糕的私人厨房

jQuery 动态绑定

这是在项目过程中所遇到的一个问题,给 JS 动态生成的元素绑定事件失效,代码如下所示:

1783
来自专栏Android干货

Android项目实战(四十):在线生成按钮Shape的网站

29110
来自专栏快乐八哥

手动实现jQuery Tools里面tab功能

平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的。当然有时同事喜欢使用jQue...

2169
来自专栏前端小叙

input框取消光标颜色手机端不生效

<style> input{ color:transparent; } </style> <input value="我要隐藏光标"> //文字颜色可以...

4206
来自专栏james大数据架构

Android中include标签的使用

在Android的开发中,我们知道布局文件可以让我们很方便的对各个UI控件进行位置安排跟属性设置,而在程序中可以直接取得控件并赋予对应操作功能。但是,如果是一个...

2066

扫码关注云+社区