React Native スクリーンショット コンポーネントの使用方法 (詳細なチュートリアル)

この記事では、React Native のスクリーンショット コンポーネントのサンプル コードを中心に紹介します。編集者が非常に良いと思ったので、参考として共有します。エディターに従って見てみましょう

React Native スクリーンショット コンポーネント:react-native-view-shot、現在の画面をキャプチャすることも、現在のページのコンポーネントに応じてキャプチャすることを選択することもできます。たとえば、現在のページには画像コンポーネントと表示コンポーネントでは、スクリーンショット コンポーネントまたは表示コンポーネントを選択できます。 iOSとAndroidをサポートします。

インストール方法

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

使用例

captureScreen() スクリーンショット方法

現在の画面に表示されているページコンテンツのみをキャプチャします。捕らえられるだろう。 ScrollViewの場合、非表示部分はインターセプトされません。

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) コンポーネント参照名に基づいてキャプチャします

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

キャプチャする必要があるコンポーネントの参照名を指定し、その参照名をスナップショット メソッドに渡して、指定されたコンポーネントのコンテンツをキャプチャします。 ScrollView をインターセプトする必要がある場合は、スナップショット メソッドに「full」を渡すだけです。 CaptureRef メソッドと CaptureScreen メソッドの両方でオプションを設定できます。オプションについては次のように説明します。 width / height: 最終的に生成される画像の幅と高さを指定できます。 format: 生成される画像の形式を png、jpg、または webm (Android) で指定します。デフォルトは png です。品質: 画像の品質 0.0 ～ 1.0 (デフォルト)。結果: 最後に生成されたタイプ。tmpfile、base64、または data-uri のいずれかです。 snapshotContentContainer: True に設定すると、コンポーネントの高さが動的に計算されます。 ScrollView コンポーネントの場合、ScrollView 全体の実際の高さがインターセプトされます。

上記は私があなたのためにまとめたものです。

関連記事:

vue2.0 と animate.css をマージする方法 (詳細なチュートリアル)

C# で文字を整数に変換する方法

vue2.0 で一般的に使用されるものは何ですかUIライブラリ？

WeChatミニプログラムでスワイパーコンポーネントを使用して画像切り替え表示を実現する方法

以上がReact Native スクリーンショット コンポーネントの使用方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。