Introduction and usage summary of React-Native screenshot component react-native-view-shot

1. Phenomenon
2. Solution
3. Summary:

1. Phenomenon

1. Requirement: Capture a certain display page and save it to the album, and share it in the form of a poster;

2. Support iOS and Android

2. Solution

1. Installation: npm i --save react-native-view-shot

2. Link processing: react-native link react-native-view-shot

3. When running on iOS, you also need to execute the following command (not required for Android): cd ios && pod install && cd ..

4. Use:

(1) References:

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

(2) Template:

 <View ref="shareImageRef">Here is the content to be displayed</View>

(3) Methods:

// Get the intercepted image link doDownLoadImage = () => {
  captureRef(this.refs.shareImageRef, {
    format: "jpg",
    quality: 0.8
  }).then(
    uri => {

      console.error("Link is:", uri)

    },
    error => {

      console.error("Error message:", error)

    } 
  );
}

// Evolution method, get the intercepted image link and save it to the album doDownLoadImage = () => {
  captureRef(this.refs.shareImageRef, {
    format: "jpg",
    quality: 0.8
  }).then(
    uri => {

      console.error("Link is:", uri)　

      let promise = CameraRoll.saveToCameraRoll(uri);
      promise
      .then((result) => {
        alert('Save successfully!');
      })
      .catch((error) => {
        alert('Save failed!');
      });

    },
    error => {

      console.error("Error message:", error)

    } 
  );
}

Note: Save the reference (self-installation): import CameraRoll from '@react-native-community/cameraroll';

// Convert the generated link to base64 and process it into a shareable link doShareImg = () => {
  captureRef(this.refs.shareImageRef, {
    format: "jpg",
    quality: 0.8
  }).then(
    uri => {

      console.error("Link is:", uri)　

        RNFS.readFile(uri, 'base64')
      .then((content) => {

        // The shared poster image address is:

        const link = 'data:image/png;base64,' + content

        console.log("The shared poster image address is" + link)
      })
      .catch((err) => {
        console.log("reading error: " + err);
      });

    },
    error => {

      console.error("Error message:", error)

    } 
  );
}

Note: The image is converted to base64 and referenced: import RNFS from 'react-native-fs';

3. Summary:

More usage methods and parameters can be obtained as needed: https://www.npmjs.com/package/react-native-view-shot

TIPS: You may encounter such a problem on Android, as shown in the figure:

Trying to resolve view with tag 2573 which doesn't exist or

Trying to resolve view with tag 2105 which doesn't exist

I encountered both of these phenomena. The solution is to add a background color to the content that needs to be intercepted.

If you add to the module:

<View ref="shareImageRef" style={{backgroundColor: 'white'}}>Here is the content to be displayed</View>

This is the end of this article about the introduction and use of React-Native screenshot component react-native-view-shot. For more relevant React Native screenshot component content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: