How to use React Native screenshot component (detailed tutorial)

This article mainly introduces the sample code of the React Native screenshot component. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.

React Native screenshot component: react-native-view-shot, you can capture the current screen or choose to capture according to the components of the current page. For example, the current page has a picture component, a View component, you can choose to intercept the picture component or View component. Supports iOS and Android.

Installation method

npm install react-native-view-shot
react-native link react-native-view-shot

Usage example

captureScreen() Screen capture method

Capture the current screen, which is consistent with the screenshots provided by the system. Only the page content displayed on the current screen will be captured. If it is a ScrollView, the undisplayed part will not be intercepted.

import { captureScreen } from "react-native-view-shot";
captureScreen({
 format: "jpg",
 quality: 0.8
})
.then(
 uri => console.log("Image saved to", uri),
 error => console.error("Oops, snapshot failed", error)
);

captureRef(view, options) Capture according to the component reference name

import { captureRef } from "react-native-view-shot";
render() {
   return (
 <ScrollView ref="full">
  <View ref="form1”>
   </View>
         <View ref="form2”>
   </View>
 </ScrollView>
);
}
snapshot = refname => () =>
captureRef(refname, {
 format: "jpg",
 quality: 0.8,
 result: "tmpfile",
 snapshotContentContainer: true
})
.then(
 uri => console.log("Image saved to", uri),
 error => console.error("Oops, snapshot failed", error)
);

Specify the ref name of the component that needs to be intercepted, and then pass the ref name to the snapshot method to intercept the content of the specified component . If you need to intercept the ScrollView, you only need to pass "full" to the snapshot method. Both the captureRef method and the captureScreen method can set options. The options are described as follows: width / height: You can specify the width and height of the final generated image. format: Specify the format of the generated image png or jpg or webm (Android). The default is png. quality: The quality of the image 0.0 - 1.0 (default). result: the last generated type, which can be tmpfile, base64, or data-uri. snapshotContentContainer: If set to True, the height of the component will be dynamically calculated. If it is a ScrollView component, the actual height of the entire ScrollView will be intercepted.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to merge vue2.0 and animate.css together (detailed tutorial)

In C# How to convert a character into an integer

What are the commonly used UI libraries in vue2.0?

How to use the swiper component to realize image switching display in WeChat Mini Program

The above is the detailed content of How to use React Native screenshot component (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!