无法使用 npm react-native-view-shot 在缓存中找到图像 [英] Not able to find Image in cache using npm react-native-view-shot

问题描述

我正在使用 npm react-native-view-shot捕获图像中的视图并保存在设备本地.

当我尝试使用以下代码拍摄 snap-shot 时，我得到 path 但在该位置没有图像，下面是代码和输出

路径:- file:///data/user/0/com.caryn/cache/ReactNative-snapshot-image5936120548912611616.jpg

captureRef(this.ref, this.state.value).then(res =>this.state.value.result !== "文件"?资源:新承诺((成功，失败)=>//只是为了确保可以在 Image.getSize 中使用 res 的测试图像.getSize(资源，(宽度，高度)=>(console.log(res, width, height), success(res)),失败))).then(res => {this.setState({错误:空，资源，预览来源:{uri:res}})控制台日志(res)}).catch(error => (console.warn(error), this.setState({error, res: null, previewSource: null})));

解决方案

根据 react-native-view-shot 文档.

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

我已经解决了以下问题.

1. 将 snap 保存到区域设置存储和

2. 捕捉快照时视图中的图像变得模糊

   你也可以参考

<块引用>

在constructor中写入状态如下你可以添加height &width 到 value 状态

 构造函数(道具){超级(道具)this.ref = React.createRef();this.state = {预览源:空，错误:空，资源:空，价值: {格式:"jpg",质量:0.9，}}

使用 collapsable={false} ref={(ref) => 创建视图引用this.ref = ref}

按下按钮

 this.snapshot()}/>

调用以下方法

 快照(){captureRef(this.ref, this.state.value).then(res =>this.state.value.result !== "文件"?资源:新承诺((成功，失败)=>//只是为了确保可以在 Image.getSize 中使用 res 的测试图像.getSize(资源，(宽度，高度)=>(console.log(res, width, height), success(res)),失败))).then(res => {this.setState({错误:空，资源，预览来源:{uri:res}})CameraRoll.saveToCameraRoll(res).then(Alert.alert('成功', '照片添加到相机胶卷！')).catch(err => console.log('err:', err))}).catch(error => (console.warn(error), this.setState({error, res: null, previewSource: null})));}

<块引用>

使用以下代码将图像保存到区域设置存储

• 安装 npm @react-native-community/cameraroll

• 导入从@react-native-community/cameraroll"导入CameraRoll；

  CameraRoll.saveToCameraRoll(uri).then((resp) => Alert.alert(resp)).catch(err => console.log('err:', err))

I am using npm react-native-view-shot to capture the view in the image and save locally on the device.

When I try to take snap-shot using the following code I get path but not image at the location, below is code and output

Path:- file:///data/user/0/com.caryn/cache/ReactNative-snapshot-image5936120548912611616.jpg

captureRef(this.ref, this.state.value)
        .then(res =>
            this.state.value.result !== "file"
                ? res
                : new Promise((success, failure) =>
                    // just a test to ensure res can be used in Image.getSize
                    Image.getSize(
                        res,
                        (width, height) => (console.log(res, width, height), success(res)),
                        failure)))
        .then(res => {
            this.setState({
                error: null,
                res,
                previewSource: {uri: res}
            })
            console.log(res)
        })
        .catch(error => (console.warn(error), this.setState({error, res: null, previewSource: null})));

解决方案

According to react-native-view-shot documentation.

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

I have solved the following problems.

1. Saving the snap to locale storage and

2. The image in view was getting blur on capture snap

   you can also refer

Write state in the constructor as following you can add height & width to value in state

  constructor(props) {
    super(props)
    this.ref = React.createRef();
    this.state = {
        previewSource: null,
        error: null,
        res: null,
        value: {
            format: "jpg",
            quality: 0.9,
        }
    }

Create view ref using collapsable={false} ref={(ref) => this.ref = ref}

On button press

    <Button title={'press me'} onPress={() => this.snapshot()}/>

Call Following method

    snapshot() {
       captureRef(this.ref, this.state.value)
        .then(res =>
            this.state.value.result !== "file"
                ? res
                : new Promise((success, failure) =>
                // just a test to ensure res can be used in Image.getSize
                Image.getSize(
                    res,
                    (width, height) => (console.log(res, width, height), success(res)),
                    failure)))
        .then(res => {
            this.setState({
                error: null,
                res,
                previewSource: {uri: res}
            })

            CameraRoll.saveToCameraRoll(res)
                .then(Alert.alert('Success', 'Photo added to camera roll!'))
                .catch(err => console.log('err:', err))
        }).catch(error => (console.warn(error), this.setState({error, res: null, previewSource: null})));
}

Save Image to locale storage using the following code

• Install npm @react-native-community/cameraroll

• Import import CameraRoll from "@react-native-community/cameraroll";

  CameraRoll.saveToCameraRoll(uri)
      .then((resp) => Alert.alert(resp))
      .catch(err => console.log('err:', err))
  

这篇关于无法使用 npm react-native-view-shot 在缓存中找到图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！