react native fast image Download react native fast image 소스 코드 다운로드

react native fast image

기타 소스코드

v8.6.3

다운로드

Fastimage

성능 반응 기본 이미지 구성 요소.

Fastimage 예제 앱.

React Native의 Image 구성 요소는 대부분 브라우저와 같은 이미지 캐싱을 처리합니다. 서버가 이미지에 대해 적절한 캐시 제어 헤더를 반환하는 경우 일반적으로 브라우저에있는 캐싱 동작이 내장되어 있습니다. 너무 많은 사람들조차도 :

꺼질 것 같은.
캐시가 누락됩니다.
캐시에서 성능 저하.
일반적으로 낮은 성능.

FastImage 는 이러한 문제를 해결하는 Image 교체입니다. FastImage 는 sdwebimage (iOS) 및 Glide (Android) 주변의 래퍼입니다.

특징

용법

참고 : 최신 버전의 react-native-fast-image 사용하려면 React Native 0.60.0 이상을 사용해야합니다.

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를 이미 AppGlidEmodule을 사용하고 있습니까?

Glide를 이미 AppGlidEmodule을 사용하고 있습니까? (이 글을 읽지 않으면 문제가있을 수 있습니다)

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 의 Debug 모드에서는 작동하지 않습니다. 이는 자산이 개발자 서버에서 자산이 전송되었다는 사실 때문이지만 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' } ,
    } ,
] )