React Nativeスクリーンモジュールのコード例

React Nativeスクリーンコンポーネント：react-native-view-shotは、現在のスクリーンを切り取ったり、現在のページのコンポーネントに従ってスクリーンショットを選択したりできます。例えば、現在のページには写真コンポーネントがあり、Viewコンポーネントがあります。写真コンポーネントまたはViewコンポーネントを選択することができます。iOSとアンドロイドをサポートします。
取り付け方法

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

使用例
capture Screenスクリーンショットの方法
現在のスクリーンを切り取り、システムのスクリーンショットと一致して、現在のスクリーンに表示されているページの内容だけを切り取ります。ScrelViewであれば、表示されていない部分は切り取られません。

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

capturef(view、options)はコンポーネントreferenceの名前によって切り取ります。

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

切り取りが必要なコンポーネントのref名を指定し、指定されたコンポーネントのコンテンツを切り取るために、このref名をsnapshot方法に渡す。SrollViewを切り取るには、「full」をsnapshot方法に渡すだけでいいです。capturef方法とcaptureScreen方法は、オプティクスを設定できます。オプティクスの説明は、width/height：最後に画像を生成する幅と高さを指定できます。format：画像を生成するフォーマットpng or jpg or webmを指定します。標準はpngです。quality：ピクチャの品質0.0-1.0(default)です。最後に生成されるタイプは、tmpfile、base 64、data-uriであることができます。snapsphotContiner：Trueに設定すると、コンポーネントの高さを動的に計算します。ScrelViewのコンポーネントであれば、ScrllView全体の実際の高さを切り取ります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。