React Native Turbo Image 使用教程

React Native Turbo Image 使用教程

react-native-turbo-image Performant React Native image component 项目地址: https://gitcode.com/gh_mirrors/re/react-native-turbo-image

1. 项目介绍

react-native-turbo-image 是一个高性能的图片组件，适用于 React Native 应用。它由 Nuke 和 Coil 提供支持，具备内存缓存、磁盘缓存和 HTTP 磁盘缓存功能，同时还支持图片预加载、清理和释放等操作。该组件使用 TypeScript、Swift 和 Kotlin 编写，支持 SVG、GIF 和 APNG 等特殊格式图片。

2. 项目快速启动

安装

首先，使用 npm 安装 react-native-turbo-image：

npm install react-native-turbo-image

然后，进入 iOS 目录并执行 pod 安装：

cd ios && pod install

使用

在 React Native 组件中引入 TurboImage 并使用如下：

import TurboImage from 'react-native-turbo-image';

<TurboImage
  source={{
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781817/ecb16e82-57a0-11e5-9b43-6b4f52659997.jpg',
  }}
  cachePolicy="urlCache"
  style={{
    width: 240,
    height: 360,
  }}
/>

3. 应用案例和最佳实践

图片缓存策略

根据不同场景，可以选择合适的缓存策略：

• urlCache: 服务器通过 HTTP 头精确管理缓存。
• dataCache: 忽略 HTTP 缓存控制。

占位图

在图片加载过程中，可以显示占位图，提高用户体验：

<TurboImage
  source={{
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781817/ecb16e82-57a0-11e5-9b43-6b4f52659997.jpg',
    thumbhash: 'your-thumbhash',
    blurhash: 'your-blurhash',
    memoryCacheKey: 'your-memoryCacheKey',
  }}
  cachePolicy="urlCache"
  style={{
    width: 240,
    height: 360,
  }}
  placeholder={{
    thumbhash: 'your-thumbhash',
    blurhash: 'your-blurhash',
    memoryCacheKey: 'your-memoryCacheKey',
  }}
/>

图片格式指定

如果需要，可以指定图片格式：

<TurboImage
  source={{
    uri: 'https://cloud.githubusercontent.com/assets/1567433/9781817/ecb16e82-57a0-11e5-9b43-6b4f52659997.jpg',
    format: 'svg', // 或 'gif', 'apng'
  }}
  cachePolicy="urlCache"
  style={{
    width: 240,
    height: 360,
  }}
/>

4. 典型生态项目

目前，react-native-turbo-image 没有直接依赖的生态项目。不过，你可以结合其他 React Native 组件和库，如状态管理库、路由库等，来构建更完整的应用。

react-native-turbo-image Performant React Native image component 项目地址: https://gitcode.com/gh_mirrors/re/react-native-turbo-image