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

Question

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

当我尝试使用以下代码拍摄快照时，我得到路径但不是该位置的图像，下面是代码和输出

路径:- 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文档。

导入从“react-native-view-shot”导入{captureRef}；

我已经解决了以下问题。

1. 将 snap 保存到语言环境存储和

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

   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} 创建 View 引用

按下按钮

    <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

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

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