React Native 安卓端 android Image 播放gif webp 动态图
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} />{/* 加载网络图片 */}<Imagesource={{ 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...' }} />// 包含请求头的网络图片
<Imagesource={{uri: 'https://example.com/secure-image.jpg',headers: {Authorization: 'Bearer token123'}}}
/>
2. style 属性
Image 组件可以使用几乎所有的样式属性，常用的包括：
<Imagesource={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: 居中显示，不缩放
<Imagesource={{ 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 {// 支持动画 WebPimplementation '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 图片
<Imagesource={{ uri: 'https://example.com/animation.gif' }}style={{ width: 200, height: 200 }}
/>// WebP 动态图
<Imagesource={{ 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
<FastImagesource={{ uri: "https://example.com/image.jpg" }}style={{ width: 100, height: 100 }}resizeMode={FastImage.resizeMode.cover}
/>;
2. 图片缓存
react-native-fast-image 提供了缓存控制功能：
<FastImagesource={{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. 圆形图片
创建圆形图片的最佳方式：
<Imagesource={{ uri: "https://example.com/avatar.jpg" }}style={{width: 100,height: 100,borderRadius: 50, // 设置为宽高的一半overflow: "hidden",}}
/>
总结
React Native 的 Image 组件是一个功能强大的图片显示工具，可以满足大多数应用场景的需求。在 Android 端，它支持 GIF 和 WebP 动态图片的播放，通过合理配置和使用第三方库，可以显著提升图片加载性能和用户体验。