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 動態圖片的播放,通過合理配置和使用第三方庫,可以顯著提升圖片加載性能和用戶體驗。