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 動態圖,需要添加額外的配置:

  1. 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'
}
  1. 在代碼中使用動態圖片:
// 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-gifreact-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 動態圖片的播放,通過合理配置和使用第三方庫,可以顯著提升圖片加載性能和用戶體驗。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/902720.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/902720.shtml
英文地址,請注明出處:http://en.pswp.cn/news/902720.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

實時數字人——DH_LIVE

前兩天親手搭建了實時對話數字人VideoChat&#xff0c;今天來搭建下DH_LIVE。 DH_LIVE一個實時數字人解決方案&#xff0c;從輸入文字到數字人對口型說話用時2-3秒。 今天就來實際操作下dh_live的搭建過程。 首先貼上git地址&#xff1a;https://github.com/kleinlee/DH_liv…

AOSP CachedAppOptimizer 凍結方案

背景 Android 一直面臨一個核心難題&#xff1a;如何優化進程對有限系統資源&#xff08;如 CPU、電量&#xff09;的使用&#xff0c;同時保證用戶體驗。 當進程進入后臺后&#xff0c;它們雖不再貢獻用戶體驗&#xff0c;卻仍可能消耗資源。傳統的殺后臺方案雖然節省資源&a…

實體店的小程序轉型之路:擁抱新零售的密碼-中小企實戰運營和營銷工作室博客

實體店的小程序轉型之路&#xff1a;擁抱新零售的密碼-中小企實戰運營和營銷工作室博客 在當今數字化浪潮的沖擊下&#xff0c;實體店面臨著前所未有的挑戰&#xff0c;但小程序的出現為實體店轉型新零售帶來了新的曙光。先來看一組驚人的數據&#xff0c;據相關統計&#xff…

Java求職面試:從Spring Boot到微服務的全面考核

Java求職面試實錄&#xff1a;從Spring Boot到微服務的全面考核 第一輪&#xff1a;基礎技術的考察 場景&#xff1a; 趙大寶走進了一家互聯網大廠的面試間&#xff0c;面試官嚴肅地看著他。 面試官&#xff1a; 趙大寶&#xff0c;你好。我們先從簡單的開始。請你解釋一下J…

記錄一個坑關于STM32 ARM Compiler Version

在用 Keil 進行 STM32 開發的時候&#xff0c;一開始下載&#xff0c;下載的 ARM 編譯器是 Version6&#xff0c;他就不兼容老的代碼&#xff0c;就很抽象。 所以必須要更換編譯器。 可以去官網下載編譯器 Downloads - Arm Developer &#xff0c;也可以自己找資源哈&#xff…

PCIe體系結構學習入門——PCI總線概述(二)PCI總線的橋和配置

這里寫目錄標題 序言存儲器域和 PCI 總線域HOST 主橋PCI 橋和 PCI 設備配置空間PCI 橋PCI 設備配置空間PCI 總線的配置非透明 PCI 橋序言 接續前章內容,本章繼續講述 PCI 總線概述的第二部分——PCI 總線的橋和配置。 如果需要進一步了解前一章節內容,可以訪問:PCIe體系結構…

潯川代碼編輯器v2.0(測試版)更新公告

潯川代碼編輯器v2.0(測試版)更新公告 發布日期&#xff1a;** 2023年4月30日 我們很高興地宣布潯川代碼編輯器v2.0測試版即將上線&#xff01;本次更新帶來了多項功能改進和問題修復&#xff0c;旨在為用戶提供更穩定、更強大的編程體驗。 主要更新內容 1. **Bug修復與穩定性提…

微信小程序 tabbar底部導航欄

官方文檔&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#tabBar 一、常規菜單格式 在app.json 文件中配置&#xff0c;其他關鍵點詳見官方文檔&#xff0c;后續更新不規則圖標的寫法

Spring 中@Autowired,@Resource,@Inject 注解實現原理

使用案例 前置條件&#xff1a; 現在有一個 Vehicle 接口&#xff0c;它有兩個實現類 Bus 和 Car &#xff0c;現在還有一個類 VehicleService 需要注入一個 Vehicle 類型的 Bean&#xff1a; public interface Vehicle {}Component public class Car implements Vehicle {}C…

【Rust結構體】Rust結構體詳解:從基礎到高級應用

?? 歡迎大家來到景天科技苑?? &#x1f388;&#x1f388; 養成好習慣&#xff0c;先贊后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者簡介&#xff1a;景天科技苑 &#x1f3c6;《頭銜》&#xff1a;大廠架構師&#xff0c;華為云開發者社區專家博主&#xff0c;…

《LightLLM:開啟大語言模型推理新時代》

《LightLLM:開啟大語言模型推理新時代》 大語言模型推理的困境與挑戰 在當今人工智能飛速發展的時代,大語言模型(LLMs)無疑是最為耀眼的明星技術之一。從 OpenAI 的 GPT 系列到谷歌的 BERT,再到國內如百度文心一言、阿里通義千問等,大語言模型以其強大的語言理解和生成能…

【Python Web開發】02-Socket網絡編程02

文章目錄 1. 服務器端1.1 socket.socket()1.2 socket.bind()1.3 socket.listen()1.4 socket.accept()1.5 socket.recv()1.6 socket.send() 和 socket.sendall()1.7 socket.close() 2. 客戶端2.1 socket.socket()2.2 socket.connect()2.3 socket.send() 和 socket.sendall()2.4 …

Flutter 在全新 Platform 和 UI 線程合并后,出現了什么大坑和變化?

Flutter 在全新 Platform 和 UI 線程合并后&#xff0c;出現了什么大坑和變化&#xff1f; 在兩個月前&#xff0c;我們就聊過 3.29 上《Platform 和 UI 線程合并》的具體原因和實現方式&#xff0c;而事實上 Platform 和 UI 線程合并&#xff0c;確實為后續原生語言和 Dart 的…

藍橋杯 1. 四平方和

四平方和 原題目鏈接 題目描述 四平方和定理&#xff08;又稱拉格朗日定理&#xff09;指出&#xff1a; 每個正整數都可以表示為 至多 4 個正整數的平方和。 如果將 0 包括進去&#xff0c;則每個正整數都可以恰好表示為 4 個非負整數的平方和。 例如&#xff1a; 5 0 …

開發并發布一個屬于自己的包(npm)

一、CommonJS規范導入require 創建一個npm包涉及幾個步驟&#xff0c;包括設置你的項目結構、編寫代碼、編寫文檔、測試你的代碼&#xff0c;以及發布到npm倉庫。以下是一個基本的指南&#xff0c;幫助你從頭開始創建一個npm包。 步驟 1: 初始化npm項目 創建項目文件夾&#x…

CRTP(Curiously Recurring Template Pattern)

C 中的 CRTP&#xff08;奇異遞歸模板模式&#xff09; CRTP&#xff08;Curiously Recurring Template Pattern&#xff09;是一種利用模板繼承實現 靜態多態&#xff08;Static Polymorphism&#xff09; 的設計模式。通過基類模板以派生類作為模板參數&#xff0c;CRTP 允許…

小白工具視頻轉MPG, 功能豐富齊全,無需下載軟件,在線使用,超實用

在視頻格式轉換需求日益多樣的今天&#xff0c;小白工具網的在線視頻轉 MPG 功能https://www.xiaobaitool.net/videos/convert-to-mpg/ &#xff09;脫穎而出&#xff0c;憑借其出色特性&#xff0c;成為眾多用戶處理視頻格式轉換的優質選擇。 從格式兼容性來看&#xff0c;它支…

銀河麒麟系統離線安裝nodejs

本篇文章我們介紹如何通過nvm(node版本管理工具)來實現離線安裝nodejs 第一步&#xff1a;下載nvm https://github.com/nvm-sh/nvm/releases/tag/v0.40.1 在頁面找到【Source code(tar.gz)】下載 第二步&#xff1a;安裝nvm 將下載好的tar.gz拷貝到銀河麒麟系統文件夾下(加…

Go語言中包導入下劃線的作用解析

在Go語言的代碼中&#xff0c;有時會看到類似以下的導入語句&#xff1a; import _ "github.com/mattn/go-sqlite3"這種以下劃線_開頭的導入方式&#xff0c;顯得有些特別&#xff0c;尤其是對于新手來說&#xff0c;可能會感到困惑&#xff0c;為什么要這樣寫&…

Winddows11官網下載安裝VMware Workstation Pro17(圖文詳解)

Winddows11安裝VMware17 1、官網下載2、安裝3、總結 1、官網下載 官網地址 點擊Products&#xff0c;滑到最下面&#xff0c;選擇SEE DESKTOPP HYPERVISORS 選擇 DOWNLOAD FUSION OR WORKSTATION 自動跳轉到下面哪個服界面&#xff0c;注冊 輸入郵箱地址和圖片下面的文字…