React-Native スクリーンショットコンポーネント react-native-view-shot の紹介と使い方のまとめ

1. 現象

1. 要件: 特定の表示ページをキャプチャしてアルバムに保存し、ポスターの形式で共有します。

2. iOSとAndroidをサポート

2. 解決策

1. インストール: npm i --save react-native-view-shot

2. リンク処理: react-native リンク react-native-view-shot

3. iOS で実行する場合は、次のコマンドも実行する必要があります (Android では必要ありません)。cd ios && pod install && cd ..

4. 使用方法:

（１）参考文献：

「react-native-view-shot」から{captureRef}をインポートします。

（２）テンプレート：

 <View ref="shareImageRef">表示されるコンテンツはここです</View>

（３）方法：

// 傍受した画像リンクを取得する doDownLoadImage = () => {
  キャプチャRef(this.refs.shareImageRef, {
    フォーマット: "jpg",
    品質: 0.8
  }）。それから（
    ウリ => {

      console.error("リンクは:", uri)

    },
    エラー => {

      console.error("エラーメッセージ:", error)

    } 
  );
}

// 進化メソッド、インターセプトされた画像リンクを取得してアルバムに保存する doDownLoadImage = () => {
  キャプチャRef(this.refs.shareImageRef, {
    フォーマット: "jpg",
    品質: 0.8
  }）。それから（
    ウリ => {

      console.error("リンクは:", uri)　

      promise = CameraRoll.saveToCameraRoll(uri); とします。
      約束
      .then((結果) => {
        alert('保存に成功しました!');
      })
      .catch((エラー) => {
        alert('保存に失敗しました!');
      });

    },
    エラー => {

      console.error("エラーメッセージ:", error)

    } 
  );
}

注: 参照を保存します (自己インストール): import CameraRoll from '@react-native-community/cameraroll';

// 生成されたリンクをbase64に変換し、共有可能なリンクに処理します。doShareImg = () => {
  キャプチャRef(this.refs.shareImageRef, {
    フォーマット: "jpg",
    品質: 0.8
  }）。それから（
    ウリ => {

      console.error("リンクは:", uri)　

        RNFS.readFile(uri, 'base64')
      .then((コンテンツ) => {

        // 共有ポスター画像のアドレスは次のとおりです:

        const リンク = 'data:image/png;base64,' + コンテンツ

        console.log("共有ポスター画像のアドレスは" + リンクです)
      })
      .catch((エラー) => {
        console.log("読み取りエラー: " + err);
      });

    },
    エラー => {

      console.error("エラーメッセージ:", error)

    } 
  );
}

注: イメージは base64 に変換され、次のように参照されます: import RNFS from 'react-native-fs';

3. 要約:

必要に応じて、さらに使用方法とパラメータを取得できます: https://www.npmjs.com/package/react-native-view-shot

ヒント: 図に示すように、Android ではこのような問題が発生する可能性があります。

存在しないタグ2573のビューを解決しようとしています。

存在しないタグ 2105 のビューを解決しようとしています

私はこれら両方の現象に遭遇しました。解決策は、傍受する必要があるコンテンツに背景色を追加することです。

モジュールに追加する場合は:

<View ref="shareImageRef" style={{backgroundColor: 'white'}}>表示されるコンテンツはここです</View>

React Native スクリーンショットコンポーネント react-native-view-shot の紹介と使い方についてはこれで終わりです。React Native スクリーンショットコンポーネントに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: