react native fast image

Fastimage

Performant bereaksi komponen gambar asli.

Aplikasi Contoh Fastimage.

Bereaksi komponen Image asli menangani caching gambar seperti browser untuk sebagian besar. Jika server mengembalikan header kontrol cache yang tepat untuk gambar, Anda biasanya mendapatkan jenis perilaku caching bawaan yang Anda miliki di browser. Bahkan begitu banyak orang telah memperhatikan:

• Kerlip.
• Cache meleset.
• Pemuatan kinerja rendah dari cache.
• Kinerja rendah secara umum.

FastImage adalah penggantian Image yang memecahkan masalah ini. FastImage adalah pembungkus di sekitar SDWebImage (iOS) dan Glide (Android).

Fitur

• Gambar cache yang agresif.
• Tambahkan header otorisasi.
• Memprioritaskan gambar.
• Gambar preload.
• Dukungan gif.
• Radius perbatasan.

Penggunaan

CATATAN: Anda harus menggunakan React Native 0.60.0 atau lebih tinggi untuk menggunakan versi terbaru dari react-native-fast-image .

yarn add react-native-fast-image
cd ios && pod install

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

const YourImage = ( ) => (
    < FastImage
        style = { { width : 200 , height : 200 } }
        source = { {
            uri : 'https://unsplash.it/400/400?image=1' ,
            headers : { Authorization : 'someAuthToken' } ,
            priority : FastImage . priority . normal ,
        } }
        resizeMode = { FastImage . resizeMode . contain }
    />
) 

Apakah Anda menggunakan Glide sudah menggunakan AppGlidemodule?

• Apakah Anda menggunakan Glide sudah menggunakan AppGlidemodule? (Anda mungkin memiliki masalah jika Anda tidak membaca ini)

Apakah Anda menggunakan Proguard?

Jika Anda menggunakan proguard, Anda harus menambahkan baris ini ke android/app/proguard-rules.pro :

 -keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

Properti

source?: object

Sumber untuk gambar jarak jauh untuk dimuat.

---

source.uri?: string

URL jarak jauh untuk memuat gambar dari. misalnya 'https://facebook.github.io/react/img/logo_og.png' .

---

source.headers?: object

Header untuk memuat gambar dengan. misalnya { Authorization: 'someAuthToken' } .

---

source.priority?: enum

• FastImage.priority.low - prioritas rendah.
• FastImage.priority.normal (default) - prioritas normal.
• FastImage.priority.high - Prioritas tinggi.

---

source.cache?: enum

• FastImage.cacheControl.immutable - (default) - Hanya pembaruan jika URL berubah.
• FastImage.cacheControl.web - Gunakan header dan ikuti prosedur caching normal.
• FastImage.cacheControl.cacheOnly - Hanya tampilkan gambar dari cache, jangan membuat permintaan jaringan apa pun.

---

defaultSource?: number

• Aset yang dimuat dengan require(...) .
• Perhatikan bahwa seperti implementasi Image bawaan, di Android defaultSource tidak berfungsi dalam mode debug. Ini karena fakta bahwa aset dikirim dari server dev, tetapi fungsi RN hanya tahu cara memuatnya dari res .

---

resizeMode?: enum

• FastImage.resizeMode.contain - Skala gambar secara seragam (pertahankan rasio aspek gambar) sehingga kedua dimensi (lebar dan tinggi) gambar akan sama atau kurang dari dimensi tampilan yang sesuai (bantalan minus).
• FastImage.resizeMode.cover (default) - Skala gambar secara seragam (pertahankan rasio aspek gambar) sehingga kedua dimensi (lebar dan tinggi) gambar akan sama atau lebih besar dari dimensi yang sesuai dari tampilan (minus padding).
• FastImage.resizeMode.stretch - Lebar dan tinggi skala secara independen, ini dapat mengubah rasio aspek SRC.
• FastImage.resizeMode.center - Jangan skala gambar, tetap berpusat.

---

onLoadStart?: () => void

Dipanggil saat gambar mulai memuat.

---

onProgress?: (event) => void

Dipanggil saat gambar dimuat.

misalnya onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}

---

onLoad?: (event) => void

Memanggil gambar yang sukses. Dipanggil dengan lebar dan tinggi gambar yang dimuat.

misalnya onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}

---

onError?: () => void

Memanggil kesalahan pengambilan gambar.

---

onLoadEnd?: () => void

Dipanggil saat gambar selesai memuat, apakah itu berhasil atau kesalahan.

---

style

Gaya asli yang bereaksi. Mendukung menggunakan borderRadius .

---

fallback: boolean

Jika benar akan mundur menggunakan Image . Dalam hal ini gambar masih akan ditata dan diletakkan dengan cara yang sama seperti FastImage .

---

tintColor?: number | string

Jika disediakan, ubah warna semua piksel yang tidak transparan ke warna yang diberikan.

Metode statis

FastImage.preload: (source[]) => void

Gambar preload untuk ditampilkan nanti. misalnya

 FastImage . preload ( [
    {
        uri : 'https://facebook.github.io/react/img/logo_og.png' ,
        headers : { Authorization : 'someAuthToken' } ,
    } ,
    {
        uri : 'https://facebook.github.io/react/img/logo_og.png' ,
        headers : { Authorization : 'someAuthToken' } ,
    } ,
] )

FastImage.clearMemoryCache: () => Promise<void>

Hapus semua gambar dari cache memori.

FastImage.clearDiskCache: () => Promise<void>

Hapus semua gambar dari cache disk.

Pemecahan masalah

Jika Anda memiliki masalah menggunakan perpustakaan ini, coba langkah -langkah dalam pemecahan masalah dan lihat apakah mereka memperbaikinya.

Perkembangan

Ikuti instruksi ini untuk menjalankan aplikasi contoh.

Didukung React Versi Native

Proyek ini hanya bertujuan untuk mendukung versi terbaru dari React Native.
Ini menyederhanakan pengembangan dan pengujian proyek.

Jika Anda memerlukan fitur baru atau perbaikan bug untuk versi yang lebih lama, Anda dapat membayar proyek ini.

Kredit

Gagasan untuk modul ini berasal dari paket Image Bereaksi-Native-WEB Vovkasm. Ini juga menggunakan Glide dan SDWebImage, tetapi tidak memiliki beberapa fitur yang saya butuhkan (prioritas, header).

Terima kasih kepada @Mobinni yang telah membantu konseptualisasi

Lisensi

• Fastimage - MIT © Dylanvann
• SDWebImage - MIT
• Glide - BSD, bagian MIT dan Apache 2.0. Lihat file lisensi untuk detailnya.