脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Native 截屏

React Native 截屏组件的示例代码

 更新时间：2017年12月06日 17:08:51   作者：ReactNative开发圈  
本篇文章主要介绍了React Native 截屏组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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的实际高度。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • React实现多标签在有限空间内展示

    React实现多标签在有限空间内展示

    在业务中,需要在一个卡片组件中展示多个标签,标签组件高度相同,宽度和出现顺序不同,要求标签只能在有限的空间内展示,所以本文给大家介绍了React实现多标签在有限空间内展示,需要的朋友可以参考下
    2023-12-12
  • react-dnd API拖拽工具详细用法示例

    react-dnd API拖拽工具详细用法示例

    这篇文章主要为大家介绍了react-dnd API拖拽工具的详细用法示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • React中使用async validator进行表单验证的实例代码

    React中使用async validator进行表单验证的实例代码

    react上进行表单验证是很繁琐的，在这里使用async-validator处理起来就变的很方便了，接下来通过本文给大家介绍React中使用async validator进行表单验证的方法,需要的朋友可以参考下
    2018-08-08
  • react自适应布局px转rem实现示例详解

    react自适应布局px转rem实现示例详解

    这篇文章主要为大家介绍了react自适应布局px转rem实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • React Hook - 自定义Hook的基本使用和案例讲解

    React Hook - 自定义Hook的基本使用和案例讲解

    自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性，这篇文章主要介绍了React类组件和函数组件对比-Hooks的介绍及初体验,需要的朋友可以参考下
    2022-11-11
  • react项目中如何引入国际化

    react项目中如何引入国际化

    在React项目中引入国际化可以使用第三方库来实现，本文主要介绍了react项目中如何引入国际化，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • React复制到剪贴板的示例代码

    React复制到剪贴板的示例代码

    本篇文章主要介绍了React复制到剪贴板的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React利用lazy+Suspense实现路由懒加载

    React利用lazy+Suspense实现路由懒加载

    这篇文章主要为大家详细介绍了React如何利用lazy+Suspense实现路由懒加载，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起了解一下
    2023-06-06
  • React Native 真机断点调试+跨域资源加载出错问题的解决方法

    React Native 真机断点调试+跨域资源加载出错问题的解决方法

    下面小编就为大家分享一篇React Native 真机断点调试+跨域资源加载出错问题的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • React 中引入 CSS 高阶用法的方案详解

    React 中引入 CSS 高阶用法的方案详解

    这篇文章主要介绍了React中引入CSS高阶用法的方案详解,至于使用react用哪种方案引入css,并没有一个绝对的答案,可以根据各自情况选择合适的方案,需要的朋友可以参考下
    2024-02-02

最新评论