一個用于顯示多種不同類型圖片的React組件，包括網絡圖片、靜態資源、臨時的本地圖片、以及本地磁盤上的圖片（如相冊）等

?

一：屬性

1：onLayout function?

當元素掛載或者布局改變的時候調用，參數為：{nativeEvent: {layout: {x, y, width, height}}}.

2：onLoad function?

加載成功完成時調用此回調函數。

3：onLoadEnd function?

加載結束后，不論成功還是失敗，調用此回調函數。

4：onLoadStart function?

加載開始時調用。

5：resizeMode enum('cover', 'contain', 'stretch')?

決定當組件尺寸和圖片尺寸不成比例的時候如何調整圖片的大小。

6：cover: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都大于等于容器視圖的尺寸（如果容器有padding內襯的話，則相應減去）。譯注：這樣圖片完全覆蓋甚至超出容器，容器中不留任何空白。

7：contain: 在保持圖片寬高比的前提下縮放圖片，直到寬度和高度都小于等于容器視圖的尺寸（如果容器有padding內襯的話，則相應減去）。譯注：這樣圖片完全被包裹在容器中，容器中可能留有空白

8：stretch: 拉伸圖片且不維持寬高比，直到寬高都剛好填滿容器。

9：source {uri: string}, number?

uri是一個表示圖片的資源標識的字符串，它可以是一個http地址或是一個本地文件路徑（使用require(相對路徑)來引用）。

10：testID string?

一個唯一的資源標識符，用來在自動測試腳本中標識這個元素。

11：（ios）accessibilityLabel string?

當用戶與圖片交互時，讀屏器（無障礙功能）會朗讀的文字。

12：（ios）accessible bool?

當此屬性為真的時候，表示這個圖片是一個啟用了無障礙功能的元素。

13：（ios）blurRadius number?

blurRadius(模糊半徑)：為圖片添加一個指定半徑的模糊濾鏡。

14：（ios）capInsets {top: number, left: number, bottom: number, right: number}?

當圖片被縮放的時候，capInsets指定的角上的尺寸會被固定而不進行縮放，而中間和邊上其他的部分則會被拉伸。這在制作一些可變大小的圓角按鈕、陰影、以及其它資源的時候非常有用（譯注：這就是常說的九宮格或者.9圖。了解更多信息，可以參見蘋果官方文檔

15：（ios）defaultSource {uri: string}?

一個靜態圖片，當最終的圖片正在下載的過程中時顯示（loading背景圖）。

16：（ios）onError function?

當加載錯誤的時候調用此回調函數，參數為{nativeEvent: {error}}

17：（ios）onProgress function?

在加載過程中不斷調用，參數為{nativeEvent: {loaded, total}}

?

二：屬性

1：FlexBox 支持彈性盒子風格

2：Transforms 支持屬性動畫

3：resizeMode 設置縮放模式

4：backgroundColor 背景顏色

5：borderColor 邊框顏色

6：borderWidth 邊框寬度

7：borderRadius 邊框圓角

8：overflow 設置圖片尺寸超過容器可以設置顯示或者隱藏('visible','hidden')

9：tintColor 顏色設置

10：opacity 設置不透明度0.0(透明)-1.0(完全不透明)

11：alignSelf:center 代表在當前的布局中居中

12：flexDirection:row 這個屬性代表是以橫向布局

?

三：方法

1：static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void)?

在顯示圖片前獲取圖片的寬高(以像素為單位)。如果圖片地址不正確或下載失敗,此方法也會失敗。

要獲取圖片的尺寸,首先需要加載或下載圖片(同時會被緩存起來)。這意味著理論上你可以用這個方法來預加載圖片,雖然此方法并沒有針對這一用法進行優化,而且將來可能會換一些實現方案使得并不需要完整下載圖片即可獲取尺寸。所以更好的預加載方案是使用下面那個專門的預加載方法。

?

2：static prefetch(url: string) #

預加載一個遠程圖片(將其下載到本地磁盤緩存)。

?

三：實例代碼

import React, { Component } from 'react'; import {AppRegistry,StyleSheet,Text,View,TextInput,Alert,Image } from 'react-native';class ReactNativeProject extends Component {render() {return (<View style={styles.container}><Image style={styles.imageTopStyle} source={{uri:"http://f1.diyitui.com/18/ac/88/89/c4/1b/ed/86/be/1c/46/62/79/1e/85/f1.jpg"}}/><Image style={styles.imageCenterStyle} source={require('./img/myimage.png')}/><Image style={styles.imageCenterStyle} source={require('image!myicon')}/></View> );} }const styles = StyleSheet.create({container: {flex: 1,marginTop:64},imageTopStyle:{marginTop:20,marginRight:20,marginLeft:20,height:100,width:100,resizeMode:'cover'},imageCenterStyle:{marginRight:10,marginTop:20,height:50,width:50} });AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

效果圖：

注意：上面三張分別對應加載三種圖片的方式，第一種是加載網絡圖，第二種是加載項目文件的圖，第三種是加載iOS項目里面的圖；

上面這種就是加載項目里面的圖片，如果在虛擬器新增加這張圖時，記得把終端服務重啟一下，否則會報錯；

上面這種是加載Xcode里面的xcassets的圖片，要重新運行XCode才會有效果；

?

最近有個妹子弄的一個關于擴大眼界跟內含的訂閱號，每天都會更新一些深度內容，在這里如果你感興趣也可以關注一下(嘿對美女跟知識感興趣)，當然可以關注后輸入：github 會有我的微信號，如果有問題你也可以在那找到我；當然不感興趣無視此信息；

轉載于:https://www.cnblogs.com/wujy/p/5846315.html

總結

以上是生活随笔為你收集整理的React Native知识4-Image组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。