目錄
一.簡介" >一.簡介
使用混合App的圖片資源" >使用混合App的圖片資源
載入網頁圖片" >載入網頁圖片
為什麼不在所有情況下都指定尺寸呢" >為什麼不在所有情況下都指定尺寸呢
透過巢狀實作背景圖片" >透過巢狀實作背景圖片
在Android 上支援GIF和WebP格式的圖片" >在Android 上支援GIF和WebP格式的圖片
二. 屬性" >二. 屬性
三.樣式風格" >三.樣式風格
四。 範例" >四。 範例
首頁 web前端 js教程 React-native 中Image控制項的簡介

React-native 中Image控制項的簡介

Jun 29, 2017 am 11:24 AM
image react-native 控制項

一.簡介

一個用於顯示多種不同類型圖片的React元件,包括網路圖片、靜態資源、暫時的本機圖片、以及本機磁碟上的圖片(如相簿)等。
從0.14版本開始,React Native提供了一個統一的方式來管理iOS和Android應用程式中的圖片。要在App中新增一個靜態圖片,只需把圖片檔案放在程式碼資料夾例如img中某處,然後像下面這樣去引用它:
<Image source= {require('./img/check.png')} />
如果你有my-icon.ios.png和my-icon.android.png,Packager就會根據平台而選擇不同的文件。
你也可以使用@2x,@3x這樣的檔案名稱後綴,來為不同的螢幕精確度提供圖片。例如下面這樣的程式碼結構:
------ button.js
#------ img
------   |-------- check@2x.png
------    |-------- check@3x.p
Packager會打包所有的圖片並且依據螢幕精確度提供對應的資源。譬如說,iPhone 5s會使用check@2x.png,而Nexus 5上則會使用check@3x.png。如果沒有圖片恰好滿足螢幕分辨率,則會自動選取最接近的圖片。
【注意】如果你加入圖片的時候packager正在運行,可能需要重啟packager以便能正確引入新加入的圖片。為了讓新的圖片資源機制正常運作,require中的圖片名字必須是一個靜態字串,不能在require中進行拼接。
//正確
<Image source={require('./my-icon.png')} />
#錯誤
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />

使用混合App的圖片資源

如果你在寫一個混合App(一部分UI使用React Native,而另一部分使用平台原生程式碼),也可以使用已經打包到App中的圖片資源(透過Xcode的asset類別或Android的drawable資料夾打包):
<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
注意:此做法並沒有任何安全性檢查。你需要自己確保圖片在應用程式中確實存在,而且還需要指定尺寸。

載入網頁圖片

與靜態資源不同的是,你需要手動指定圖片的尺寸。
//正確
<Image source={{uri: 'https://facebook.github.io/react/img/logo_og. png'}} style={{width: 400, height: 400}} />
//錯誤
##

為什麼不在所有情況下都指定尺寸呢

在瀏覽器中,如果你不給圖片指定尺寸,那麼瀏覽器會先渲染一個0x0大小的元素佔位,然後下載圖片,在下載完成後再基於正確的尺寸來渲染圖片。這樣做的最大問題是UI會在圖片載入的過程中上下跳動,使得使用者體驗非常糟糕。
在React Native中有意避免了這項行為。如此一來開發者就需要做更多工作來提前知曉遠端圖片的尺寸(或寬高比),但我們相信這樣可以帶來更好的使用者體驗。然而,從已經打包好的應用程式資源檔案中讀取圖片(使用require('image!x')語法)則無需指定尺寸,因為它們的尺寸在載入時就可以立刻知道。
例如這樣一個引用require('image!logo')的實際輸出結果可能是:
{"__packager_asset":true,"isStatic" :true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}

透過巢狀實作背景圖片

#類似web中的背景圖(background-image),只需簡單地創建一個元件,然後把需要背景圖的子元件嵌入其中即可
#return (  <Image source={...}>    <Text>Inside</Text>  </Image> );

在Android 上支援GIF和WebP格式的圖片

dependencies {
# // 如果你需要支援Android4.0(API level 14)之前的版本
 compile 'com.facebook.fresco:animated-base-support:0.11.0'

#  // 如果你需要支援GIF動圖
 compile 'com.facebook.fresco:animated-gif:0.11.0'

#  // 如果你需要支援WebP格式,包含WebP動圖
 compile 'com.facebook.fresco:animated-webp:0.11.0'
 compile 'com.facebook.fresco:webpsupport:0.11.0'

#  // 如果只需要支援WebP格式而不需要動圖
 compile 'com .facebook.fresco:webpsupport:0.11.0'
}
如果你在使用GIF的同時也使用了ProGuard,那麼需要在proguard-rules.pro中加入以下規則:
-keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl {  public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, facebook.com.facebook. .core.ExecutorSupplier); }

二. 屬性

1.onLayout   (function) 當Image佈局改變的,會進行呼叫該方法,呼叫的程式碼為:
{nativeEvent: {layout: {x, y, width, height}}}.
2.onLoad (function):當圖片載入成功之後,回呼此方法
3.onLoadEnd (function):當圖片載入失敗回呼該方法,不會管圖片載入成功還是失敗
4.onLoadStart (fcuntion):當圖片開始載入的時候呼叫該方法
5.resizeMode  縮放比例,可選參數('cover', 'contain', 'stretch') 當圖片的尺寸超過佈局的尺寸的時候,會根據設定Mode進行縮放或裁剪圖片
cover: 在保持圖片寬高比的前提下縮放圖片,直到寬度和高度都大於等於容器視圖的尺寸(如果容器有padding內襯的話,則相應減去)。譯註:這樣圖片完全覆蓋甚至超出容器,容器中不留任何空白。
contain: 在保持圖片寬高比的前提下縮放圖片,直到寬度和高度都小於等於容器視圖的尺寸(如果容器有padding內襯的話,則相應減去)。譯註:這樣圖片完全被包裹在容器中,容器中可能留有空白
stretch: 拉伸圖片且不維持寬高比,直到寬高都剛好填滿容器。
repeat: 重複平鋪圖片直到填滿容器。圖片會維持原始尺寸。僅iOS可用。
center: 居中不拉伸。
6.source {uri:string} 進行標記圖片的引用,該參數可以為一個網路url位址或一個本地(使用require(相對路徑)來引用)的路徑

三.樣式風格

1.FlexBox  支援彈性盒子樣式
2.Transforms  支援屬性動畫              3.resizeMode  設定縮放模式
4.backgroundColor 背景顏色
5.borderColor     邊框顏色             6.borderWidth 邊框寬度#order#order##7.b#order#order#a.b#order#order
##order#order#C#order#order#CC#order#C
#C#order#C#白'
8.overflow 設定圖片尺寸超過容器可以設定顯示或隱藏('visible','hidden')

###9.tintColor  顏色設定        10.opacity 設定不透明度0.0(透明)-1.0(完全不透明)######
四。 範例

載入網路圖片的範例
class MyImageDemo extends Component {    使成為() {        返回 (                            <myimage imgs="{imgs}"> </我的圖片>            </查看>        );    } }</myimage>
##class MyImage 擴充元件 {    構造函數(道具){        超級(道具);        這個.狀態 = {            count: 0,//圖片索引            imgs: this.props.imgs,        };    }##############使成為() {        返回 (                                                                    上一張
#下一張文字>檢視>                        );    }
##onPrevious() {        var count = this.state.count;        數數 - ;        如果(計數>= 0){            this.setState({                計數:計數,            });        }    }    onNext() {        var count = this.state.count;        計數++;        if (count const 樣式 = StyleSheet.create({        柔性: {            彈性:1,        },        圖像: {            寬度:300,            高度:200,            邊框寬度:1,            justifyContent: '中心',            對齊項目:'居中',            邊框顏色:'#ccc',            邊框半徑:5,        },        圖片:{            寬度:200,            身高:150,        },        按鈕:{            寬度:60,            身高:35,            邊框寬度:1,            邊框顏色:'#ccc',            邊框半徑:3,            justifyContent: '中心',            對齊項目:'居中',            右邊距:30,        },        按鈕:{            flexDirection: '行',            邊距頂部:20,            justifyContent: '中心'        }    } );

##效果


#Image_first.jpeg


點選下一張


##Image_second. jpeg


點選下一張


Image_third .jpeg#之路
記錄我自己的RN學習,純粹屬於自己增值,有什麼不同的地方,一起討論進步

#

以上是React-native 中Image控制項的簡介的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1243
24
react native怎麼改變版本 react native怎麼改變版本 Jan 19, 2023 pm 02:31 PM

react native更改版本的方法:1、進入React Native專案目錄,命令列輸入「react-native --version」;2、查看npm套件管理的React Native版本;3、開啟專案中的「package.json」文件,修改dependencies字段,把「react-native」版本修改為目標版本即可。

如何免費使用Bing Image Creator 如何免費使用Bing Image Creator Feb 27, 2024 am 11:04 AM

本文將介紹七種利用免費的BingImageCreator獲得高品質輸出的方法。 BingImageCreator(現稱為MicrosoftDesigner的ImageCreator)是一個出色的線上人工智慧藝術生成器之一。它能根據使用者的提示產生高度逼真的視覺效果。提示越具體、清晰和創意,生成的效果也會更出色。 BingImageCreator在創建高品質影像方面取得了重大進展。現在它使用Dall-E3訓練模式,顯示出更高水準的細節和現實主義。然而,它能否始終如一地產生高清結果取決於幾個因素,包括快速

小米手機image怎麼刪除 小米手機image怎麼刪除 Mar 02, 2024 pm 05:34 PM

小米手機image怎麼刪除?在小米手機中是可以刪除image,但是多數的用戶不知道image如何的刪除,接下來就是小編為用戶帶來的小米手機image刪除方法教程,感興趣的用戶快來一起看看吧!小米手機image怎麼刪除1、先打開小米手機中的【相簿】功能;2、然後勾選不需要的圖片,點擊右下角的【刪除】按鈕;3、之後點擊最頂部的【相簿】進入到專區,選擇【回收站】;4、接著直接點選下圖所示的【清空回收站】;5、最後直接點選【永久刪除】即可完成。

Imagemagic安裝Centos及Image安裝教學課程 Imagemagic安裝Centos及Image安裝教學課程 Feb 12, 2024 pm 05:27 PM

LINUX是一種開源的作業系統,它的靈活性和可自訂性使得它成為了許多開發者和系統管理員的首選,在LINUX系統中,映像處理是一個非常重要的任務,而Imagemagick和Image是兩個非常受歡迎的影像處理工具,本文將為您介紹如何在Centos系統中安裝Imagemagick和Image,並提供詳細的安裝教學。 Imagemagic安裝Centos教學Imagemagick是一個功能強大的影像處理工具集,它可以在命令列下執行各種映像操作,以下是在Centos系統上安裝Imagemagick的步驟:1

Go語言Web開發框架中常見的富文本編輯器控件 Go語言Web開發框架中常見的富文本編輯器控件 Jun 04, 2023 am 09:10 AM

隨著Web應用程式的普及,富文本編輯器成為Web開發中不可或缺的一個工具。而在使用Go語言進行網頁開發時,我們也需要選擇一個適合的富文本編輯器控制項來豐富我們的網站和應用程式。在本文中,我們將會探討Go語言Web開發常見的富文本編輯器控制項。 FroalaEditorFroalaEditor是一款流行的富文本編輯器控件,被廣泛應用於Web開發中。它具有現代化

react native紅螢幕報錯怎麼辦 react native紅螢幕報錯怎麼辦 Jan 03, 2023 pm 02:37 PM

react native紅屏報錯的解決方法:1、在「android/app/src/main/」中建立資料夾assets;2、執行指令「react-native bundle --platform android --dev false --entry-file index.android.js...」;3、在專案中執行「react-native run-android」即可。

常見的Ajax控制項有哪些?深入了解其特點和功能 常見的Ajax控制項有哪些?深入了解其特點和功能 Jan 17, 2024 am 11:11 AM

深入了解Ajax控制:常見的有哪些?介紹:在現代Web開發中,Ajax(AsynchronousJavaScriptandXML)成為了一種流行的技術,它可以實現網頁局部刷新,提升使用者體驗。而在開發中,我們通常使用Ajax控制來簡化和加速我們的開發流程。本文將深入了解Ajax控件,介紹一些常見的控件及其功能。一、jQueryAjax:jQueryA

excel控制項怎麼做 excel控制項怎麼做 Mar 20, 2024 am 09:40 AM

我們在使用excel辦公軟體的時候,如果能夠巧妙地使用一些控件,可以幫助我們在excel表格中做出比較專業的效果,例如添加選擇控件,可以使填表人員輕鬆的完成表格的填寫。下邊,我們就示範excel選擇控制的製作方法,希望對你有幫助! 1.首先,我們新建並開啟一個空白的excel表格。 2、新增“開發工具”選項卡,點擊左上側檔案按鈕,找到“Excel選項”,之後,我們在自訂功能區的選項內找到開發工具,勾選,使其前邊出現對號就可以。 3.回到excel工作介面,就可以看到「開發工具」選項卡了,一般情況,不

See all articles