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

目录
  • 一、现象
  • 二、解决
  • 三、总结：

一、现象

1、需求：把某展示页面进行截取保存到相册、并可进行以海报的形式分享出去；

2、支持iOS和安卓

二、解决

1、安装： npm i --save react-native-view-shot

2、进行链接处理：react-native link react-native-view-shot

3、当为IOS时执行还需要执行一下命令（安卓不用）：cd ios && pod install && cd ..

4、使用：

（1）、引用：

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

（2）、模板：

　<View ref="shareImageRef">这里为需要展示的内容</View>

（3）、方法：

// 获得截取后的图片链接

doDownLoadImage = () => {
　　captureRef(this.refs.shareImageRef, {
　　　　format: "jpg",
　　　　quality: 0.8
　　}).then(
　　　　uri => {

　　　　　　console.error("链接为：", uri)

　　　　},
　　　　error =>  {

　　　　　　console.error("错误信息为：", error)

　　　　}
　　);
}

// 进化方法，获得截取后的图片链接进行保存处理到相册处理

doDownLoadImage = () => {
　　captureRef(this.refs.shareImageRef, {
　　　　format: "jpg",
　　　　quality: 0.8
　　}).then(
　　　　uri => {

　　　　　　console.error("链接为：", uri)　

　　　　　　let promise = CameraRoll.saveToCameraRoll(uri);
　　　　　　promise
　　　　　　.then((result) => {
　　　　　　　　alert('保存成功!');
　　　　　　})
　　　　　　.catch((error) => {
　　　　　　　　alert('保存失败!');
　　　　　　});

　　　　},
　　　　error =>  {

　　　　　　console.error("错误信息为：", error)

　　　　}
　　);
}

注：保存引用了(自行安装): import CameraRoll from '@react-native-community/cameraroll';

// 把生成的链接转化为 base64,处理为可分享的链接

doShareImg = () => {
　　captureRef(this.refs.shareImageRef, {
　　　　format: "jpg",
　　　　quality: 0.8
　　}).then(
　　　　uri => {

　　　　　　console.error("链接为：", uri)　　　

　　　　　　RNFS.readFile(uri, 'base64')
　　　　　　.then((content) => {

　　　　　　　　// 分享的海报图地址为：

　　　　　　　　const link = 'data:image/png;base64,' + content

　　　　　　　　console.log("分享的海报图地址为" + link)
　　　　　　})
　　　　　　.catch((err) => {
　　　　　　　　console.log("reading error: " + err);
　　　　　　});

　　　　},
　　　　error =>  {

　　　　　　console.error("错误信息为：", error)

　　　　}
　　);
}

注：图片转化为base64引用了：import RNFS from 'react-native-fs';

三、总结：

更多使用方法以及参数可按需去取 : https://www.npmjs.com/package/react-native-view-shot

TIPS：在安卓上可能你会碰到这样的问题，如图：

Trying to resolve view with tag 2573 which doesn't exist 或

Trying to resolve view with tag 2105 which doesn't exist

这两种现象都给我碰到了，解决处理是给需要截取的内容添加背景色

如在模块上添加：

<View ref="shareImageRef" style={{backgroundColor: 'white'}}>这里为需要展示的内容</View>

到此这篇关于React-Native之截图组件react-native-view-shot的介绍与使用的文章就介绍到这了,更多相关React Native截图组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解如何在项目中使用jest测试react native组件

    详解如何在项目中使用jest测试react native组件

    目前Javascript的测试工具很多,但是针对React的测试策略,Facebook推出的ReactJs标配测试工具是Jest.Jest的官网地址:https://facebook.github.io/jest/.我们可以看到Jest官网宣称的是:Painless JavaScript Testing.是Facebook用于测试服务和React应用程序的JavaScript单元测试框架. 所谓单元测试也就是对每个单元进行测试,通俗的将一般针对的是函数,类或单个组件,不涉及系统和集成.单元测试是

  • 详解React Native开源时间日期选择器组件(react-native-datetime)

    详解React Native开源时间日期选择器组件(react-native-datetime)

    项目介绍 该组件进行封装一个时间日期选择器,同时适配Android.iOS双平台,该组件基于@remobile/react-native-datetime-picker进行开发而来 配置安装 npm install react-native-datetime --save 1.1.iOS环境配置 上面步骤完成之后,直接前台写js代码即可 1.2.Android环境配置 在android/setting.gradle文件中如下配置 ... include ':react-native-dateti

  • react-native DatePicker日期选择组件的实现代码

    react-native DatePicker日期选择组件的实现代码

    本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenberg/react-native-custom-action-sheet(可以看看,也可以直接按我的步骤走) 1. 在terminal的该工程目录下运行: npm install react-native-custom-action-sheet --save 2. 然后运行: npm start 3.

  • React Native 通告消息竖向轮播组件的封装

    React Native 通告消息竖向轮播组件的封装

    本文实例为大家分享了React Native通告消息竖向轮播组件的封装代码,供大家参考,具体内容如下 import React, {Component} from 'react' import { Text, View, Animated, Easing, StyleSheet, } from 'react-native' export default class ScrollVertical extends Component { static defaultProps = { enableA

  • React Native中导航组件react-navigation跨tab路由处理详解

    前言 大家应该都有所体会,我们在一般应用都有跨tab跳转的需求, 这就需要特别处理下路由,所以 下面是使用react-navigation作为路由组件的一种方式. 具体情境是: app分三大模块Home主页, Bill账单和Me我的, 对应三个tab. 现在需求是 Home push HomeTwo, HomeTwo push BillTwo, BillTwo 返回到 Bill账单首页. 方法如下: 首先选择路由结构, 选择使用最外层是StackNavigator, 然后包含3个TabNavig

  • 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() 截屏方法 截取当前屏幕,跟系统自带的截图一致,只会截取当前屏幕

  • React Native悬浮按钮组件的示例代码

    React Native悬浮按钮组件的示例代码

    React Native悬浮按钮组件:react-native-action-button,纯JS组件,支持安卓和IOS双平台,支持设置子按钮,支持自定义位置和样式和图标. 效果图 安装方法 npm i react-native-action-button --save react-native link react-native-vector-icons 因为用到了react-native-vector-icons图标组件,需要做下link.如果你项目中已经使用了react-native-ve

  • react-native动态切换tab组件的方法

    在APP中免不了要使用tab组件,有的是tab切换,也有的是tab分类切换. 这些组件分成下面两种. 第一种非常简单,同时大多数第三方组件都能达到效果.这里重点讲述第二种,我们要让第二种组件不仅能左右滑动,同时还能够在点击的时候自动滑动,将点击的位置滑动到正中间. 准备 我们先来分析一波.一个滑动组件在APP上是一种什么状态. 这里可以看出,tab组件需要考虑到长度超过APP的屏幕,并且在超过之后能够滑动. 同时计算出当前位置需要滑动多少距离才能够将位置居中. 需要滑动的位置=点击位置的左边距-

  • react-native中ListView组件点击跳转的方法示例

    react-native中ListView组件点击跳转的方法示例

    前言 在 上一篇我们实现了NavigatorIOS与ListView结合使用的方法,那么这篇文章介绍一下ListView里点击跳转到新视图的方法,话不多说了,来一起看看详细的介绍吧. 先看效果 用法 NewsList.js _onPress(rowData) { this.props.navigator.push({ title: rowData, component: CNodeJSList, passProps: { name: rowData, } }) } 说明 使用 this.prop

  • React Hook 四种组件优化总结

    React Hook 四种组件优化总结

    目录 前言 组件抽取 memo 优化组件 React.memo 语法 useCallback 优化组件 useCallback 作用 useMemo 优化 useMemo 语法 useCallback 和 useMemo 区别 前言 React Hook 已成为当前最流行的开发范式,React 16.8 以后基于 Hook 开发极大简化开发者效率,同时不正确的使用 React Hook也带来了很多的性能问题,本文梳理基于 React Hook 开发组件的过程中如何提高性能. 组件抽取 优化前 每

  • React中使用antd组件的方法

    React中使用antd组件的方法

    目录 antd 使用antd antd antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品. 国内镜像为:https://ant-design.gitee.io/docs/react/introduce-cn速度很快 进入网页点击组件就可以看到网页需要的各种配件,如按钮.导航栏等等,并且配有各种使用方法的API,目前已经更新到4.22版本,原本是只支持react不过后来也支持vue了.3.几版本的文档说明会更加详细antd还可以更改主题颜色

  • React HOC高阶组件深入讲解

    目录 1. 概念 2. 属性代理 2.1 代理props 2.2 条件渲染 2.3 添加状态 3. 反向继承 3.1 拦截渲染 3.2 劫持生命周期 3.3 操作state 3.4 修改react树 3.5 记录渲染性能 4. 使用装饰器 4.1 安装和配置 4.2 使用 5.总结 1. 概念 高阶组件和高阶函数的类似,使用函数接收一个组件,并返回一个组件. function withList(WrapComponent) { return class extends Component { r

  • React Native自定义标题栏组件的实现方法

    大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

  • React Native 图片查看组件的方法

    React Native 图片查看组件的方法

    React Native 图片查看组件:react-native-image-viewer,纯JS组件,小巧快速的图标查看组件.支持图片放大缩小,支持图片加载失败设置替代图片,支持将图片保存到本地等功能. 效果图 安装方法 npm i react-native-image-zoom-viewer --save 使用示例 const images = [ { url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', },

  • React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析

    本文实例讲述了React Native中ScrollView组件轮播图与ListView渲染列表组件用法.分享给大家供大家参考,具体如下: 1.Scroll View ScrollView是React Native提供的滚动视图组件,渲染一组视图,用户可以进行滑动响应交互,其常用属性如下: 滚动的偏移量:通过event.nativeEvent.contentOffset.x可以得到水平偏移量. horizontal={bool},属性为true时,所有子视图在水平方向排列,否则在纵向排列.默认为

  • React Native日期时间选择组件的示例代码

    React Native日期时间选择组件的示例代码

    React Native日期时间选择组件:react-native-datepicker,支持安卓和IOS双平台,支持单独选择日期.单独选择时间和选择日期和时间,支持自定义日期格式. 效果图 安装方法 npm install react-native-datepicker --save 示例代码 <Text style={styles.instructions}>time: {this.state.time}</Text> <DatePicker style={{width:

  • 一个基于react的图片裁剪组件示例

    开始 写了一年多vue,感觉碰到了点瓶颈,学习下react找找感觉.刚好最近使用vue写了个基于cropperJS的图片裁剪的组件,便花费了几个晚上的功夫用react再写一遍.代码地址 项目是使用create-react-app来开发的,省去了很多webpack配置的功夫,支持eslint,自动刷新等功能,使用前npm install并npm start即可.推荐同样是新学习react的人也用用看. 项目写的比较简陋,自定义配置比较差,不过也是完成了裁剪图片的基本功能,希望可以帮助到初学reac

随机推荐