3

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

1 回答 1

2

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

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

我已经解决了以下问题。

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

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

    你也可以参考

在下面写状态，您可以在状态constructor中添加height&widthvalue

  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))
于 2019-11-12T06:17:23.273 回答