Image元件載入方式

從當前專案中載入

• 圖片資原始檔的查詢和JS模組相似，會根據填寫的圖片路徑相對於當前的js檔案路徑進行搜尋。
• React Naive的Packager會根據平臺選擇相應的檔案，例如:my_icon.ios.png和my_icon.android.png兩個檔案(命名方式android或者ios)，會分別根據android或者ios平臺選擇相應的檔案。
• Packager會打包所有的圖片並且依據螢幕精度提供對應的資源。譬如說，iPhone 5s會使用[email protected]，而Nexus 5上則會使用[email protected]。如果沒有圖片恰好滿足螢幕解析度，則會自動選中最接近的一個圖片。
• 注意：如果你新增圖片的時候packager正在執行，可能需要重啟packager以便能正確引入新新增的圖片。
• 這樣處理的優勢：
  
  • iOS和Android一致的檔案系統。
  • 圖片和JS程式碼處在相同的資料夾，這樣元件就可以包含自己所用的圖片而不用單獨去設定。
  • 不需要全域性命名。你不用再擔心圖片名字的衝突問題了。
  • 只有實際被用到（即被require）的圖片才會被打包到你的app。
  • 與訪問網路圖片相比，Packager可以得知圖片大小了，不需要在程式碼裡再宣告一遍尺寸。
  • 現在通過npm來分發元件或庫可以包含圖片了。
  • 注意：為了使新的圖片資源機制正常工作，require中的圖片名字必須是一個靜態字串（不能使用變數！因為require是在編譯時期執行，而非執行時期執行！）。

export default class App5 extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
         <Image source={require('./image/NO.png')} style={{width: 120, height: 120}}  />
      </View>
    );
  }
}

載入使用APP中的圖片

如果你在編寫一個混合App（一部分UI使用React Native，而另一部分使用平臺原生程式碼），也可以使用已經打包到App中的圖片資源（以拖拽的方式放置在Xcode的asset類目中，或是放置在Android的drawable目錄裡）。注意此時只使用檔名，不帶路徑也不帶字尾

• 在iOS中

<View style={styles.container}>
         <Image source={{uri: 'BG1'}} style={{width: 120, height: 120}} />
      </View>

• 在Android中

 <View style={styles.container}>
         <Image source={{uri: 'asset:/BG1.png'}} style={{width: 40, height: 40}} />
      </View>

載入來自網路的圖片

• 客戶端的很多圖片資源基本上都是實時通過網路進行獲取的，但是需要指定圖片的尺寸大小

• 強烈建議你使用https以滿足iOS App Transport Security 的要求

• 關於resizeMode屬性

  • Image.resizeMode.cover：圖片居中顯示，沒有被拉伸，超出部分被截斷
  • Image.resizeMode.contain：容器完全容納圖片，圖片等比例進拉伸
  • Image.resizeMode.stretch： 圖片被拉伸適應容器大小，有可能會發生變形

<View style={styles.container}>
         <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}}style={{width:100, height:100, resizeMode: Image.resizeMode.contain}}/>
      </View>

設定背景圖片

<View style={styles.container}>
         <ImageBackground source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{marginTop:20,
    marginLeft:20,flex:1,width:200, height:100,}}>
           <Text style={{marginTop: 60, backgroundColor: 'red'}}>下面是背景圖片</Text>
        </ImageBackground>
      </View>

效果：

Image元件的常見屬性

• onLayout(function)
  當Image佈局發生改變的，會進行呼叫該方法，呼叫的程式碼為:{nativeEvent: {layout: {x, y, width, height}}}.

• onLoad (function)
  當圖片載入成功之後，回撥該方法

• onLoadEnd (function)
  當圖片載入失敗回撥該方法，該不會管圖片載入成功還是失敗
• onLoadStart (fcuntion)
  當圖片開始載入的時候呼叫該方法
• resizeMode
  縮放比例,可選引數(‘cover’, ‘contain’, ‘stretch’) 該當圖片的尺寸超過佈局的尺寸的時候，會根據設定Mode進行縮放或者裁剪圖片
• source{uri:string}
  進行標記圖片的引用，該引數可以為一個網路url地址或者一個本地的路徑

Image元件的樣式風格屬性

• FlexBox 支援彈性盒子風格
• Transforms 支援屬性動畫
• backgroundColor 背景顏色
• borderColor 邊框顏色
• borderWidth 邊框寬度
• borderRadius 邊框圓角
• overflow 設定圖片尺寸超過容器可以設定顯示或者隱藏(‘visible’,’hidden’)
• tintColor 顏色設定
• opacity 設定不透明度0.0(透明)-1.0(完全不透明)