React Native知識4-Image組件，react4-image

React Native知識4-Image組件，react4-image

一個用於顯示多種不同類型圖片的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才會有效果；