基本用法

載入本地圖片

<Image source={require('./img/baidu.png')}/>

載入App內資源圖片

<Image source={{uri: 'ic_launcher'}} style={{width: 140, height: 140}} />

載入網路圖片

<Image source={{uri:'http://172.17.137.68/heqiang/2.jpg'}} style={{width: 200, height: 200}}/>

資源圖片和網路圖片必須宣告圖片寬高，否則不顯示。

適配不同平臺

有時我們希望在不同平臺之間用不同的圖片
比如baidu.android.png，baidu.ios.png，程式碼中只需要寫baidu.png，便可以適配android和ios平臺
[email protected]，[email protected]還可以適配不同解析度的機型。如果沒有圖片恰好滿足螢幕解析度，則會自動選中最接近的一個圖片。這點是和Android中是類似的。

程式碼

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';

class HelloWorldAppp extends Component{
  render() {
    console.log("render()");
    return (
      <View
 
>
        <Text style={styles.title_text}>本地圖片</Text>
        <Image source={require('./img/baidu.png')}/>
        <Text style={styles.title_text}>資源圖片</Text>
        <Image source={{uri: 'ic_launcher'}} style={{width: 140, height: 140}} />
        <Text style={styles.title_text}
 
>網路圖片</Text>
        <Image source={{uri:'http://*******.jpg'}} style={{width: 200, height: 200}}/>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => HelloWorldAppp);

const styles = StyleSheet.create({
  title_text:{
    fontSize:18,
  }

});

效果圖

回撥函式和屬性

• onLayout：layout時呼叫，與View元件的onLayout函式類似
• onLoadStart：開始載入時呼叫
• onLoadEnd載入結束時呼叫
• onLoad：成功讀取圖片時呼叫

        <Image source={{uri:'http://172.17.137.68/heqiang/23.jpg'}} style={{width: 200, height: 200}} 
          onLoad={function(){console.log("onLoad");}}
          onLayout={function(){console.log("onLayout");}}
          onLoadStart={function(){console.log("onLoadStart");}}
          onLoadEnd={function(){console.log("onLoadEnd");}}
          />

• resizeMode

  • cover：在顯示比例不失真的情況下填充整個顯示區域。可以對圖片進行放大或者縮小，超出顯示區域的部分不顯示，也就是說，圖片可能部分會顯示不了。
  • contain：要求顯示整張圖片，可以對它進行等比縮小，圖片會顯示完整，可能會露出Image控制元件的底色。如果圖片寬高都小於控制元件寬高，則不會對圖片進行放大。
  • stretch：不考慮保持圖片原來的寬高比，填充整個Image定義的顯示區域，這種模式顯示的圖片可能會畸形和失真。
  • center：居中不縮放

  resizeMode也可以定義在style中，但在屬性上定義的優先順序比style中高。比如下面設定中最終生效的是Image.resizeMode.center。

        <Image source={{uri:'http://172.17.137.68/heqiang/test.png'}} 
          style={{width: 200, height: 200, backgroundColor: 'grey',resizeMode: Image.resizeMode.contain}} 
          resizeMode={Image.resizeMode.center}
          />

樣式風格

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