react-native-cached-image, CachedImage组件用于React native

分享于 

9分钟阅读

GitHub

  繁體 雙語
CachedImage component for react-native
  • 源代码名称:react-native-cached-image
  • 源代码网址:http://www.github.com/kfiroo/react-native-cached-image
  • react-native-cached-image源代码文档
  • react-native-cached-image源代码下载
  • Git URL:
    git://www.github.com/kfiroo/react-native-cached-image.git
    Git Clone代码到本地:
    git clone http://www.github.com/kfiroo/react-native-cached-image
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/kfiroo/react-native-cached-image
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    react-native-cached-image

    CachedImage组件用于React native

    这个软件包受到了 @jayesbe的启发amazing令人惊奇的 react-native-cacheable-image,但是在我们的本地应用程序中处理缓存映像时,我们还缺少一些功能。

    安装

    
    npm install react-native-cached-image --save
    
    
    - or -
    
    
    yarn add react-native-cached-image
    
    
    
    

    我们在这个包中使用 react-native-fetch-blob 处理文件系统访问,在安装过程中需要额外的步骤。

    你应该只做一次。

    
    react-native link react-native-fetch-blob
    
    
    
    

    或者,如果要自动将Android权限添加到 AndroidManifest.xml,请使用这里选项:

    
    RNFB_ANDROID_PERMISSIONS=true react-native link react-native-fetch-blob
    
    
    
    

    网络状态- 仅适用于 Android

    将以下行添加到 android/app/src/AndroidManifest.xml

    
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
    
    
    
    

    用法

    TODO - 添加用法示例

    import React from'react';import { CachedImage, ImageCacheProvider} from'react-native-cached-image';constimages = [
     'https://example.com/images/1.jpg',
     'https://example.com/images/2.jpg',
     'https://example.com/images/3.jpg',//.. .];export defaultclassExampleextendsReact.Component {
     render() { return (
     <ImageCacheProviderurlsToPreload={images}onPreloadComplete={() =>console.log('hey there')}>
     <CachedImagesource={{uri: images[0]}}/>
     <CachedImagesource={{uri: images[1]}}/>
     <CachedImagesource={{uri: images[2]}}/>
     </ImageCacheProvider>
     );
     }
    }

    API

    这里软件包公开了 3个模块:

    const { CachedImage,// react-native component that is a drop-in replacement for your react-native `Image` components ImageCacheProvider,// a top level component that provides accsess to the underlying `ImageCacheManager` and preloads images ImageCacheManager,// the logic behind cache machanism - ttl, fs, url resolving etc. } =require('react-native-cached-image');

    ImageCacheManager

    这就是所有缓存魔法发生的地方。 API通常采用一个 URL 和一组 ImageCacheManagerOptions

    ImageCacheManager.downloadAndCacheUrl(url: String, options: ImageCacheManagerOptions): Promise<String>

    检查URL的缓存( 在删除查询字符串之后根据 ImageCacheManagerOptions.useQueryParamsInCacheKey ) 如果缓存存在于缓存中且未过期,则使用本地缓存文件路径解决。 否则,下载到缓存文件夹,将它的添加到缓存中,然后返回缓存的文件路径。

    ImageCacheManager.seedAndCacheUrl(url: String, seedPath: String, options: ImageCacheManagerOptions): Promise<String>

    检查URL的缓存( 在删除查询字符串之后根据 ImageCacheManagerOptions.useQueryParamsInCacheKey ) 如果缓存存在于缓存中且未过期,则使用本地缓存文件路径解决。 否则,将种子文件复制到缓存文件夹中,将它的添加到缓存中,然后返回缓存的文件路径。

    ImageCacheManager.deleteUrl(url: String, options: ImageCacheManagerOptions): Promise

    移除URL和对应于它的本地文件的缓存条目,如果存在的话。

    ImageCacheManager.clearCache(options: ImageCacheManagerOptions): Promise

    清除URL缓存并删除缓存文件夹中的文件( 如 ImageCacheManagerOptions.cacheLocation )

    ImageCacheManager.getCacheInfo(options: ImageCacheManagerOptions): Promise.<{file: Array, size: Number}>

    返回有关缓存。文件列表和缓存的总大小的信息。

    CachedImage

    CachedImage 是替换 Image 组件的一个下降,它将尝试缓存远程url以获得更好的性能。
    主要用途是隐藏用户的缓存层,并提供一种简单的缓存图像的方法。
    CachedImage 使用 ImageCacheManager 实例来与缓存交互,如果通过 ImageCacheProvider 提供的实例,则会创建一个新实例。

    <CachedImagesource={{uri:'https://example.com/path/to/your/image.jpg' }}style={styles.image}/>
    道具
    • renderImage - 返回组件的函数,用于覆盖基础 Image 组件。
    • activityIndicatorProps - 下载图像时显示的ActivityIndicator的道具。
    • defaultSource - 在下载源图像时显示 background 图像。 这将在android中工作,但如果在这里组件样式支持器上设置 borderRadius,则不显示 background 图像。
    • loadingIndicator - 组件设置自定义 ActivityIndicator
    • fallbackSource - 设置占位符图像的道具。 当 source.uri 为空或者缓存失败时,将显示 fallbackSource
    • 任何 ImageCacheManagerOptionsPropTypes 道具- 为这个特定的CachedImage 实例定制 ImageCacheManager

    ImageCacheProvider

    这是一个具有 2个主要功能的顶级组件:

    • 为嵌套的CachedImage 提供定制的ImageCacheManager
    • 预加载一组 url。
    • 道具
    • urlsToPreload - 组件装入时加载的url的array。 默认 [ ]
    • numberOfConcurrentPreloads - 控制并发下载的数量,通常在 urlsToPreload array 非常大时使用。 默认 urlsToPreload.length
    • onPreloadComplete - 当预加载完成且所有图像都被缓存时的回调。

    ImageCacheManagerOptions

    提供给 ImageCacheManager的选项集,并提供一些方法来根据需要定制它们。

    typeImageCacheManagerOptions = {
     headers: PropTypes.object,// an object to be used as the headers when sending the request for the url. default {}ttl: PropTypes.number,// the number of seconds each url will stay in the cache. default 2 weeksuseQueryParamsInCacheKey: PropTypes.oneOfType([// when handling a URL with query params, this indicates how it should be treated:PropTypes.bool,// if a bool value is given the whole query string will be used/ignoredPropTypes.arrayOf(PropTypes.string)// if an array of strings is given, only these keys will be taken from the query string. ]),// default falsecacheLocation: PropTypes.string,// the path to the root of the cache folder. default the device cache dir allowSelfSignedSSL: PropTypes.bool,// true to allow self signed SSL URLs to be downloaded. default false};

    详细了解我们的行为规范和提交请求的过程,请阅读 CONTRIBUTING.md


    COM  react  component  NAT  Native  CAC  
    相关文章