反応したネイティブのキャッシュイメージ

Question

URLからイメージをキャッシュする、良いライブラリがありますか、あるいはデフォルトのネイティブコンポーネントが反応しますか？ 私はreact-native-cache-imageを試しましたが、react-native-fsとreact-native-sqlite-storageには問題があります。また、ネイティブの反応に新しいので、正しく修正する方法がわかりません。

Answer 1

メソッドがImageコンポーネントに組み込まれています。

Answer 2

パフォーマンスに関連する画像キャッシュと「永続キャッシュ」機能をネイティブの<Image>コンポーネントに追加する、高次コンポーネントモジュールに興味があるかもしれません。私のモジュールは、ファイルをダウンロードするためのgoto尊重された、戦闘テスト済みのライブラリであるreact-native-fetch-blobに依存しているので、依存性の問題はないはずです。

React Native Image Cache HOC

Tlの、DRコード例：合計ローカルキャッシュは過去15 MBが成長するまで

import imageCacheHoc from 'react-native-image-cache-hoc'; 
const CacheableImage = imageCacheHoc(Image); 

export default class App extends Component<{}> { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.welcome}>Welcome to React Native!</Text> 
     <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/rc29s4bz61uz.png'}} /> 
     <CacheableImage style={styles.image} source={{uri: 'https://i.redd.it/hhhim0kc5swz.jpg'}} permanent={true} /> 
     </View> 
); 
    } 
} 

最初の画像は、キャッシュされた画像が合計まで、第1の最も古い削除する（デフォルトで）キャッシュしますキャッシュは15 MB未満です。

第2のイメージはローカルディスクに永続的に保存されます。人々はこれをあなたのアプリで静的な画像ファイルを送る代わりにドロップとして使用します。

ローカルディスクにイメージファイルを任意に格納することに興味があるようにも聞こえます。次のようなCacheableImage静的メソッドを使用してこれを行うことができます。

import imageCacheHoc from 'react-native-image-cache-hoc'; 
const CacheableImage = imageCacheHoc(Image); 
CacheableImage.cacheFile('https://i.redd.it/hhhim0kc5swz.jpg', true) 
    .then(localFileInfo => { 
    console.log(localFileInfo); 

    // Console log outputs: 
    //{ 
    // url: 'https://i.redd.it/rc29s4bz61uz.png', 
    // cacheType: 'permanent', 
    // localFilePath: '/this/is/absolute/path/to/file.jpg' 
    //} 

    });