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

问题

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

回答1:

With the help of react-native-view-shot documentation.

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

I have solved the problem of

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

来源：https://stackoverflow.com/questions/58802180/not-able-to-find-image-in-cache-using-npm-react-native-view-shot