Comment utiliser le composant de capture d'écran React Native (tutoriel détaillé)

Cet article présente principalement l'exemple de code du composant de capture d'écran React Native. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil.

Composant de capture d'écran React Native : react-native-view-shot Vous pouvez capturer l'écran actuel ou choisir de capturer en fonction des composants de la page actuelle. la page actuelle a un composant image et un composant View, vous pouvez choisir d'intercepter le composant image ou le composant View. Prend en charge iOS et Android.

Méthode d'installation

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

Exemple d'utilisation

Méthode de capture d'écran captureScreen()

Capturez l'écran actuel, qui est cohérent avec les captures d'écran fournies par le système. Seul le contenu de la page affiché sur l'écran actuel sera capturé. S'il s'agit d'un ScrollView, la partie non affichée ne sera pas interceptée.

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) intercepte en fonction du nom de référence du composant

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

Spécifie le nom de référence du composant qui doit être intercepté, puis transmet le nom de référence à la méthode d'instantané à intercepter Spécifie le contenu du composant. Si vous devez intercepter ScrollView, il vous suffit de transmettre "full" à la méthode snapshot. La méthode captureRef et la méthode captureScreen peuvent définir des options. Les options sont décrites comme suit : width / height : vous pouvez spécifier la largeur et la hauteur de l'image finale générée. format : Spécifiez le format de l'image générée png ou jpg ou webm (Android). qualité : La qualité de l’image 0,0 - 1,0 (par défaut). résultat : le dernier type généré, qui peut être tmpfile, base64 ou data-uri. snapshotContentContainer : si défini sur True, la hauteur du composant sera calculée dynamiquement. S'il s'agit d'un composant ScrollView, la hauteur réelle de l'ensemble du ScrollView sera interceptée.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment fusionner vue2.0 et animate.css ensemble (tutoriel détaillé)

En C# Comment convertir un caractère en entier

Quelles sont les bibliothèques d'interface utilisateur couramment utilisées dans vue2.0 ?

Comment utiliser le composant swiper pour changer l'affichage des images dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!