react native fast image

Fastimage

Реактивное реагирование нативного компонента изображения.

Пример примера Fastimage.

Реакция компонента Image отреагирует, как кеширование изображения, как браузеры, по большей части. Если сервер возвращает правильные заголовки управления кэшем для изображений, вы, как правило, получаете встроенное поведение кэширования, которое вы имеете в браузере. Даже так много людей заметили:

• Мерцание.
• Кэш пропускает.
• Низкая производительность загрузки из кеша.
• Низкая производительность в целом.

FastImage - это замена Image , которая решает эти проблемы. FastImage - это обертка вокруг Sdwebimage (iOS) и Glide (Android).

Функции

• Агрессивно кэшируйте изображения.
• Добавить заголовки авторизации.
• Расположение приоритетов изображений.
• Предварительные изображения.
• Поддержка GIF.
• Граница радиус.

Использование

Примечание. Вы должны использовать React Native 0,60,0 или выше, чтобы использовать самую последнюю версию 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 }
    />
) 

Вы уже используете Glide, используя апплидемодуль?

• Вы уже используете Glide, используя апплидемодуль? (У вас могут возникнуть проблемы, если вы не читаете это)

Вы используете Proguard?

Если вы используете Proguard, вам нужно будет добавить эти строки в 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 *;
}

Характеристики

source?: object

Источник для удаленного изображения для загрузки.

---

source.uri?: string

Удаленный URL для загрузки изображения. Например 'https://facebook.github.io/react/img/logo_og.png' .

---

source.headers?: object

Заголовки, чтобы загрузить изображение. Например { Authorization: 'someAuthToken' } .

---

source.priority?: enum

• FastImage.priority.low - низкий приоритет.
• FastImage.priority.normal (по умолчанию) - нормальный приоритет.
• FastImage.priority.high - высокий приоритет.

---

source.cache?: enum

• FastImage.cacheControl.immutable - (по умолчанию) - обновления только в случае изменения URL.
• FastImage.cacheControl.web - используйте заголовки и следуйте нормальным процедурам кэширования.
• FastImage.cacheControl.cacheOnly - только показывать изображения из кэша, не выполняйте никаких сетевых запросов.

---

defaultSource?: number

• Актив, загруженный require(...) .
• Обратите внимание, что, как и встроенная реализация Image , на Android defaultSource не работает в режиме отладки. Это связано с тем, что активы отправляются с сервера DEV, но функции RN знают только, как загрузить его с res .

---

resizeMode?: enum

• FastImage.resizeMode.contain - масштабируйте изображение равномерно (поддерживать соотношение сторон изображения), чтобы оба измерения (ширина и высота) изображения будут равны или меньше соответствующего измерения представления (минус накладка).
• FastImage.resizeMode.cover (по умолчанию) - масштабируйте изображение равномерно (поддерживать соотношение сторон изображения), чтобы оба измерения (ширина и высота) изображения будут равны или больше, чем соответствующее размер представления (минус накладка).
• FastImage.resizeMode.stretch - Ширина и высота шкалы независимо от того, что это может изменить соотношение сторон SRC.
• FastImage.resizeMode.center - не масштабируйте изображение, сохраняйте центр.

---

onLoadStart?: () => void

Вызывается, когда изображение начинает загружаться.

---

onProgress?: (event) => void

Вызывается, когда изображение загружается.

Например, onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}

---

onLoad?: (event) => void

Вызвано на успешном образовании. Вызывается с шириной и высотой загруженного изображения.

Например, onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}

---

onError?: () => void

Вызовов по ошибке получения изображения.

---

onLoadEnd?: () => void

Вызывается, когда изображение заканчивает загрузку, будь то успешным или ошибкой.

---

style

Реагирование нативного стиля. Поддерживает использование borderRadius .

---

fallback: boolean

Если True будет отстранен от использования Image . В этом случае изображение все еще будет стилизовано и выложено так же, как и FastImage .

---

tintColor?: number | string

Если они поставляются, изменяет цвет всех неподготовленных пикселей на заданный цвет.

Статические методы

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

Предварительные изображения для отображения позже. например

 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>

Очистить все изображения из кеша памяти.

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

Очистить все изображения из дискового кеша.

Поиск неисправностей

Если у вас есть какие -либо проблемы с использованием этой библиотеки, попробуйте шаги в устранении неполадок и посмотрите, исправят ли они это.

Разработка

Следуйте этим инструкциям, чтобы получить пример приложения.

Поддерживаемые нативные версии React

Этот проект направлен только на поддержку последней версии React Native.
Это упрощает разработку и тестирование проекта.

Если вам нужны новые функции или исправления ошибок для старых версий, вы можете разорвать этот проект.

Кредиты

Идея для этого модулей была получена из пакета Vovkasm React-Native-Web-Image. Он также использует Glide и Sdwebimage, но у меня не было некоторых функций, которые мне нужны (приоритет, заголовки).

Спасибо @mobinni за помощь в концептуализации

Лицензии

• Fastimage - MIT © Dylanvann
• SDWEBIMAGE - MIT
• Glide - BSD, часть MIT и Apache 2.0. Смотрите файл лицензии для получения подробной информации.