React Nativeのキャッシュとダウンロード

8289 ワード

一般的には、3つのデータのキャッシュとダウンロードが必要です.純粋なテキスト(APIの戻り、ステータスタグなど)、ピクチャキャッシュ、その他の静的ファイルなどです.
プレーンテキスト
純粋なテキストは比較的簡単で、RN公式モジュールAsyncStorageで十分です.HTML 5の中のLocalStorageと同じように、setItemとgetItemを直接調整してデータを操作することができます.この2つの方法はpromiseを返します.次の例は、データのキャッシュです.

_storeData = async () => {
  try {
    await AsyncStorage.setItem('@MySuperStore:key', 'I like to save it.');
  } catch (error) {
    // Error saving data
  }
};

データの取得

_retrieveData = async () => {
  try {
    const value = await AsyncStorage.getItem('TASKS');
    if (value !== null) {
      // We have data!!
      console.log(value);
    }
  } catch (error) {
    // Error retrieving data
  }
};

iOSでは,AsyncStorageはnativeコードで実現され,小さなデータであればシーケンス化辞書に存在し,データ量が大きすぎると単独でファイルを格納する.Androidでは、AsyncStorageがRocksDBまたはSQLiteを使用しており、現在のデバイスがどのデバイスをサポートしているかによって異なります.注意が必要なのは、Androidにはサイズ制限があり、最大6 MBしか保存できません.これはRN公式のわざとで、ここのソースコードを見ることができます.必要に応じて、この制限を上書きできます.

は、/android/app/src/main/java/MainApplication.javaを見つけ、ReactDatabaseSupplierをインポートします.

import com.facebook.react.modules.storage.ReactDatabaseSupplier;

インポート後、このファイルはこのように見えます:

import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
import com.facebook.react.modules.storage.ReactDatabaseSupplier;

を見つけてonCreateを設定し、新しいmaximumSizeを設定します.ここでは50 MB

long size = 50L * 1024L * 1024L; // 50 MB 
ReactDatabaseSupplier.getInstance(getApplicationContext()).setMaximumSize(size);

に設定します.変更後のonCreateはこのように見えます.大きなデータを保存する必要がある場合は、ファイルとして保存できます.後で

について説明します.
画像
もし1つの画像を1回ロードしたことがあるならば、次回また使う時私はもう1回ロードしたくなくて、直接キャッシュから読むことができるほうがいいです.公式コンポーネントImageには、いくつかのキャッシュをサポートできる属性cacheがありますが、iOSのみをサポートしています.ここでは比較的ポピュラーなライブラリreact-native-cached-imageとreact-native-fast-imageを2つ探しました
react-native-cached-image
公式ガイドに従ってインストールすることができます.私はあまり言いません.しかし、このライブラリはreact-native-fetch-blobに依存していることに注意してください.これはnativeモジュールで、yarn addまたはnpm installを実行した後、あなたのプロジェクトにリンクする必要があります.最も簡単なのはreact-native link react-native-fetch-blob自動リンクを実行することです.プロジェクト構造が自動リンクと異なる場合は、手動リンクが必要です.ここを参照してください.このライブラリには、CachedImage,ImageCacheProviderおよびImageCacheManagerの3つの比較的有用なコンポーネントがあります.これは公式の例です.

@Override
public void onCreate() {
  super.onCreate();
  SoLoader.init(this, /* native exopackage */ false);

  long size = 50L * 1024L * 1024L; // 50 MB 
  ReactDatabaseSupplier.getInstance(getApplicationContext()).setMaximumSize(size);
}

ImageCacheManagerはキャッシュを制御するために使用され、画像をダウンロードおよび削除することができ、ダウンロード画像の物理アドレスを取得することもできます.キャッシュ優先、強制リフレッシュ、強制キャッシュというプリセットルールは使用できません.具体的には、自分で定義する必要があります.
react-native-fast-image react-native-fast-imageもっと簡単に使えます.GitHubの星も少し多いです.これはnativeライブラリで、iOSではSDWebImage、AndroidではパッケージのGlide(Android)で、どちらも原生上万星のライブラリです.nativeライブラリですので、インストール後もリンクが必要ですが、具体的な方法は上記と同じです.これは使用例です.

import React from 'react';
import {
    CachedImage,
    ImageCacheProvider
} from 'react-native-cached-image';

const images = [
    'https://example.com/images/1.jpg',
    'https://example.com/images/2.jpg',
    'https://example.com/images/3.jpg',
    // ...
];

export default class Example extends React.Component {
    render() {
        return (
             console.log('hey there')}>

                

                

                

            
        );
    }
}

キャッシュを制御するために3つのモードが予め設定されています.そのうちの1つはFastImage.cacheControl.webです.この戦略はウェブページが同じです.彼はHTTPのキャッシュ制御ヘッドを採用して制御します.フロントエンドの開発者はよく知っているはずです.このライブラリの公式には多くの例が見られますが、ここを見てください.画像キャッシュを作るなら、これをお勧めします.
その他の静的ファイル
pdf,mp 3,mp 4などの静的ファイルをデバイスにダウンロードまたはキャッシュする必要がある場合があります.rn-fetch-blobは、あなたのHTTPをファイルとしてデバイス上に存在するnativeライブラリに戻すことができます.彼は実はreact-native-fetch-blobだったが、react-native-fetch-blobは維持を続けなかったので、forkが名前を変えて維持を続けた.要求された構成にfileCache : trueを設定すると、彼は戻り値をファイルとして保存し、物理パスに戻ります.デフォルトで保存されているファイルには接尾辞名がありません.パラメータを加えて接尾辞を設定することができます.例えば、appendExt : 'zip'

import FastImage from 'react-native-fast-image'

const YourImage = () =>

このパスを手に入れると直接使えます

RNFetchBlob
  .config({
    // add this option that makes response data to be stored as a file,
    // this is much more performant.
    fileCache : true,
    appendExt : 'zip'
  })
  .fetch('GET', 'http://www.example.com/file/example.zip', {
    Authorization : 'Bearer access-token...',
    //some headers ..
  })
  .then((res) => {
    // the temp file path
    console.log('The file saved to ', res.path())
  })

このライブラリではファイルのアップロードもサポートできます

imageView =

ダウンロードとアップロードの過程で、彼の進捗状況を得ることもできます.

RNFetchBlob.fetch('POST', 'https://content.dropboxapi.com/2/files/upload', {
    // dropbox upload headers
    Authorization : "Bearer access-token...",
    'Dropbox-API-Arg': JSON.stringify({
      path : '/img-from-react-native.png',
      mode : 'add',
      autorename : true,
      mute : false
    }),
    'Content-Type' : 'application/octet-stream',
    // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
    // Or simply wrap the file path with RNFetchBlob.wrap().
  }, RNFetchBlob.wrap(PATH_TO_THE_FILE))
  .then((res) => {
    console.log(res.text())
  })
  .catch((err) => {
    // error handling ..
  })

注意しなければならないのは、rn-fetch-blobはあなたのダウンロード履歴を記録しません.つまり、アプリを消してから開くと、ダウンロードしたファイルがどこにあるか分かりません.AsyncStorageでダウンロードの履歴を記録することができます.ダウンロードが完了したら、アドレスをAsyncStorage:

RNFetchBlob.fetch('POST', 'http://www.example.com/upload', {
    //... some headers,
    'Content-Type' : 'octet-stream'
  }, base64DataString)
  // listen to upload progress event
  .uploadProgress((written, total) => {
      console.log('uploaded', written / total)
  })
  .then((resp) => {
    // ...
  })
  .catch((err) => {
    // ...
  })

RNFetchBlob
  .config({
    // add this option that makes response data to be stored as a file,
    // this is much more performant.
    fileCache : true,
    appendExt : 'zip'
  })
  .fetch('GET', 'http://www.example.com/file/example.zip', {
    Authorization : 'Bearer access-token...',
    //some headers ..
  })
  // listen to download progress event
  .progress((received, total) => {
      console.log('progress', received / total)
  })
  .then((res) => {
    // the temp file path
    console.log('The file saved to ', res.path())
  })

このファイルがすでにダウンロードされているかどうかを確認します.

RNFetchBlob
  .config({
    fileCache: true,
    appendExt: 'pdf',
  })
  .fetch('GET', 'http://pdf.dfcfw.com/pdf/H3_AP201901271289150621_1.pdf')
  .then((response) => {
    const path = response.path();

    this.setState({
      cachedFile: path,
    });

    AsyncStorage.setItem('fileCache', path);
  })
  .catch((error) => {
    this.setState({
      error,
    });
  });

使い終わったらこのファイルを削除して、同時に記録を削除することもできます.

componentDidMount() {
  AsyncStorage.getItem('fileCache').then((data) => {
    this.setState({
      cachedFile: data,
    });
  });
}

html 5ページ携帯電話のアプリを起動

WKWebViewとUIWebViewの比較