Impossible de trouver l'image dans le cache en utilisant npm react-native-view-shot

Question

J'utilise npm react-native-view-shot pour capturer la vue dans l'image et l'enregistrer localement sur l'appareil.

Quand j'essaie de prendre snap-shot en utilisant le code suivant, j'obtiens path mais pas d'image à l'emplacement, ci-dessous le code et la sortie

Chemin:- 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

Según react-native-view-shot documentation.

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

J'ai résolu les problèmes suivants.

1. Sauver le snap pour le stockage local et

2. L'image en vue était floue au moment de la capture.

   vous pouvez également vous référer à

L'état d'écriture dans le constructor comme suit, vous pouvez ajouter height & width a value en état

  constructor(props) {
    super(props)
    this.ref = React.createRef();
    this.state = {
        previewSource: null,
        error: null,
        res: null,
        value: {
            format: "jpg",
            quality: 0.9,
        }
    }

Créer une vue réf en utilisant collapsable={false} ref={(ref) => this.ref = ref}

Sur pression du bouton

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

Appeler la méthode suivante

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

Sauvegarder l'image dans le stockage local en utilisant le code suivant

• Installer npm @react-native-community/cameraroll

• Importation import CameraRoll from "@react-native-community/cameraroll";

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