image.prefetchメソッドを使用したときにディスクキャッシュをクリーンアップしたかったが、React Nativeで適切なメソッドが見つからなかった。React Nativeでピクチャのディスクキャッシュをクリアする方法
0
A
答えて
0
React Nativeは現時点で必要な作業を行う方法を公開していないため、サードパーティのソリューションを使用する必要があります。
ネイティブのImage.prefetch()を使用する代わりに、高次のコンポーネントモジュールを使用して、<イメージ>をキャッシュ/永続ストレージを処理してアップグレードすることができます。
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のイメージはローカルディスクに永続的に保存されます。人々はこれをあなたのアプリで静的な画像ファイルを送る代わりにドロップとして使用します。その後
あなたはImage.prefetch(のように事前に暖かいキャッシュする場合)
import imageCacheHoc from 'react-native-image-cache-hoc';
const CacheableImage = imageCacheHoc(Image);
CacheableImage.cacheFile('https://i.redd.it/hhhim0kc5swz.jpg')
.then(localFileInfo => {
console.log(localFileInfo);
// Console log outputs:
//{
// url: 'https://i.redd.it/rc29s4bz61uz.png',
// cacheType: 'cache', //add true as 2nd param to cacheFile() to make permanent
// localFilePath: '/this/is/absolute/path/to/file.jpg'
//}
});
あなたが要求したとして、ディスクからそれをクリアしたい:
import RNFetchBlob from 'react-native-fetch-blob';
RNFetchBlob.fs.unlink(localFilePath.localFilePath)
.then(() => {
console.log('file deleted!');
});
はこれがあなたのお役に立てば幸い!
関連する問題
- 1. React NativeでTextInput focusをクリアする方法は? (Android)
- 2. React Native:リダイレクトする方法
- 3. React Nativeでページをナビゲートする方法
- 4. React^0.14.8&React-native^0.24.1からReact 15.0.2にReact-native 0.26.3にアップグレードする方法
- 5. React-native:フラットリストアイテムをラップする方法
- 6. React App - ChromeディスクキャッシュJSファイル
- 7. React NativeでReact JSコンポーネントを再利用する方法
- 8. ボタンクリック時のTextInput値をクリアする - React Native
- 9. React Nativeの入力フィールドからフォーカスをクリアするには?
- 10. iOSでディスクキャッシュがクリアされるのはいつですか?
- 11. React Native + react-native-router-flux:<Scene/>にhideNavBarを適用する方法は?
- 12. React Native Tab Navigator:アイコンオーバーフロータブバーにする方法?
- 13. npmはnode_moduleのreact-nativeをクリアします
- 14. React Native - AsyncStorageでのアプリのパフォーマンスを最適化する方法
- 15. React Nativeでアンドロイドのプッシュ通知を実装する方法
- 16. firebaseの結果をJavascript React Nativeでマップする方法
- 17. React NativeのWebSocketをクッキーで使用する方法
- 18. Alert React Nativeで他のページをリダイレクトする方法
- 19. React NativeでHTTPエラーのサーバーレスポンスを表示する方法
- 20. iOS上のReact Nativeでホットリロードを設定する方法は?
- 21. AndroidでReact Nativeのカスタムネイティブコンポーネントを測定する方法
- 22. React NativeでAnimatedCircularProgressのビューを正しく配置する方法
- 23. react-nativeでコンポーネントのサイズを取得する方法は?
- 24. React-native - 特定のレベルでStackNavigatorを開始する方法
- 25. React Native:リストビューのデータソースをクリアすると、リフレッシュコントロールが使用できない
- 26. React Native + react-native-oauthでFirebase Authを実装する
- 27. react-native-router-fluxでreact-native-side-menuを使用するには?
- 28. React Nativeコンポーネントライブラリの作成方法は?
- 29. React-Nativeドロップダウンリストの更新方法
- 30. React-nativeコンポーネント間の移動方法
質問に答えず、代わりに「これを使用」と答えます。 –
@AdamBarnesの答えは、「標準的なReact Nativeを使ってやろうとしていることはできません。私は明確にするために私の答えを更新しました。 – billmalarky
Downvoteが削除されました。ありがとうございます。 –