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

在构造函数中编写状态，如下所示，您可以在状态
中向value添加高度宽度

  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})));
}

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

安装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无法在缓存中找到图像

1 个答案: