无法使用 npm react-native-view-shot 在缓存中找到图像

Question

我正在使用 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 !== "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})));

Answer 1

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

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

我已经解决了以下问题。

将 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,
        }
    }

使用 collapsable={false} ref={(ref) => this.ref = ref}

创建视图引用

按下按钮

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

调用以下方法

    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

安装npm @react-native-community/cameraroll

导入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 在缓存中找到图像

Not able to find Image in cache using npm react-native-view-shot

react-native-android

screenshot

screen-capture

react-native-view-shot