React Native 安卓端 android Image 播放gif webp 动态图-CSDN博客

本文链接：https://blog.csdn.net/u013176440/article/details/147493537

React Native 安卓端 android Image 播放gif webp 动态图

RN项目是0.78.2 React是19.0

基本介绍

Image 是 React Native 中用于显示各种类型图片的核心组件，支持显示网络图片、静态资源、本地图片以及 base64 编码的图片。在 Android 端，Image 组件还可以用来播放 GIF、WebP 动态图等格式。

基本用法

import React from "react";
import { View, Image, StyleSheet } from "react-native";

const App = () => {
  return (
    <View style={styles.container}>
      {/* 加载本地静态资源 */}
      <Image source={require("./assets/logo.png")} style={styles.image} />

      {/* 加载网络图片 */}
      <Image
        source={{ uri: "https://reactnative.dev/img/tiny_logo.png" }}
        style={styles.image}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  image: {
    width: 100,
    height: 100,
    margin: 10,
  },
});

export default App;

常用属性

1. source 属性

source 是 Image 组件最基本的属性，用于指定图片的来源：

// 本地静态资源
<Image source={require('./assets/logo.png')} />

// 网络图片
<Image source={{ uri: 'https://example.com/image.jpg' }} />

// base64 图片
<Image source={{ uri: 'data:image/png;base64,iVBORw0KGgoA...' }} />

// 包含请求头的网络图片
<Image
  source={{
    uri: 'https://example.com/secure-image.jpg',
    headers: {
      Authorization: 'Bearer token123'
    }
  }}
/>

2. style 属性

Image 组件可以使用几乎所有的样式属性，常用的包括：

<Image
  source={require("./assets/logo.png")}
  style={{
    width: 100, // 宽度
    height: 100, // 高度
    resizeMode: "cover", // 调整模式
    borderRadius: 50, // 圆角
    borderWidth: 2, // 边框宽度
    borderColor: "#000", // 边框颜色
    backgroundColor: "#f0f0f0", // 背景色
    opacity: 0.8, // 透明度
  }}
/>

3. resizeMode 属性

控制图片如何适应给定的尺寸：

cover: 保持图片宽高比，裁剪长边
contain: 保持图片宽高比，缩放图片使其完全显示
stretch: 拉伸图片填满尺寸，不保持宽高比
repeat: 平铺图片（仅 iOS 支持）
center: 居中显示，不缩放

<Image
  source={{ uri: "https://example.com/image.jpg" }}
  style={{ width: 200, height: 200 }}
  resizeMode="cover"
/>

显示动态图片（GIF/WebP）

Android 端支持 GIF 和 WebP

在 Android 上，React Native 的 Image 组件默认支持 GIF 动画。为了支持 WebP 动态图，需要添加额外的配置：

在 android/app/build.gradle 中添加 WebP 支持：

dependencies {
  // 支持动画 WebP
    implementation 'com.facebook.fresco:animated-gif:3.4.0'

        // 如果你需要支持WebP格式，包括WebP动图
  implementation 'com.facebook.fresco:animated-webp:3.2.0'
  implementation 'com.facebook.fresco:webpsupport:3.2.0'
}

在代码中使用动态图片：

// GIF 图片
<Image
  source={{ uri: 'https://example.com/animation.gif' }}
  style={{ width: 200, height: 200 }}
/>

// WebP 动态图
<Image
  source={{ uri: 'https://example.com/animation.webp' }}
  style={{ width: 200, height: 200 }}
/>

图片预加载

对于网络图片，可以使用 Image.prefetch 方法进行预加载，提升用户体验：

// 预加载单张图片
Image.prefetch("https://example.com/image.jpg")
  .then(() => console.log("图片预加载成功"))
  .catch((error) => console.error("图片预加载失败", error));

// 预加载多张图片
const urls = [
  "https://example.com/image1.jpg",
  "https://example.com/image2.jpg",
];

Promise.all(urls.map((url) => Image.prefetch(url)))
  .then(() => console.log("所有图片预加载成功"))
  .catch((error) => console.error("部分图片预加载失败", error));

性能优化

1. FastImage 组件

对于有大量图片的应用，可以考虑使用第三方库 react-native-fast-image，它在性能上有显著提升：
在这里插入图片描述

import FastImage from "react-native-fast-image";

// 使用方法类似 Image
<FastImage
  source={{ uri: "https://example.com/image.jpg" }}
  style={{ width: 100, height: 100 }}
  resizeMode={FastImage.resizeMode.cover}
/>;

2. 图片缓存

react-native-fast-image 提供了缓存控制功能：

<FastImage
  source={{
    uri: "https://example.com/image.jpg",
    // 缓存策略
    cache: FastImage.cacheControl.immutable,
    // 请求优先级
    priority: FastImage.priority.high,
  }}
  style={{ width: 100, height: 100 }}
/>

常见问题与解决方案

1. Android 上 GIF 不播放或性能问题

如果 GIF 动画在 Android 上播放有问题，可以尝试以下解决方案：

确保 GIF 文件大小适中
使用 react-native-gif 或 react-native-fast-image 替代原生 Image
考虑使用 Lottie 动画作为替代方案

2. 圆形图片

创建圆形图片的最佳方式：

<Image
  source={{ uri: "https://example.com/avatar.jpg" }}
  style={{
    width: 100,
    height: 100,
    borderRadius: 50, // 设置为宽高的一半
    overflow: "hidden",
  }}
/>