Image元件類似於iOS中UIImage控制元件，該元件可以通過多種方式載入圖片資源。

使用方式，載入方式有如下幾種：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 周少停
 * image 載入的三種方式+設定圖片的內容模式
 */

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

class Project extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>載入工程中圖片</Text>
       <Image source={require('./imgs/1111.png')} style={{width:120,height:120}}/> 
        <Text>載入Xcode中asset的圖片</Text>
       <Image source={require('image!520')} style={{width:120,height:120}} />
        <Text>載入網路中的圖片</Text>
       <Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200}}/>
        <Text>設定載入圖片的模式</Text>
        <Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200,resizeMode:Image.resizeMode.cover}}/>
        <Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200,resizeMode:Image.resizeMode.contain}}/>
        <Image source={{uri:'https://unsplash.it/600/400/?random'}} style={{width:120,height:200,resizeMode:Image.resizeMode.stretch}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:20,//上邊距
    flexDirection:'column',//主軸方向 垂直
    justifyContent: 'flex-start',//控制元件在主軸上的對齊方向
    alignItems: 'flex-start', //控制元件在側軸上的對齊方向
    backgroundColor: '#F5FCFF',
  }
});

AppRegistry.registerComponent('Project', () => Project);

 

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * 周少停 2016-09-13
 * Imaage的常見屬性
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
//匯入json資料
var BadgeData = require('./BadgeData.json');

//定義一些全域性變數
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window'); //屏寬
var cols = 3 //總列數
var boxW = 100; //單個盒子的寬度&高度
var vMargin = (width - cols*boxW)/(cols + 1);//盒子中間的水平間距
var hMargin = 25;
 
class Project extends Component {
  render() {
    return (
      <View style={styles.container}>
       {/*返回包的資料*/}
        {this.renderAllBadge()}
      </View>
    );
  }
  //返回所有的包
  renderAllBadge(){
    //定義一個數組,裝每個包的資訊
    var allBadge = [];
    //遍歷json資料
    for(var i=0;i<BadgeData.data.length;i++){
      //去除單獨的資料物件
      var badge = BadgeData.data[i];
      //直接裝入陣列
      allBadge.push(
        <View key={i} style={styles.outViewStyle}>
            <Image source={{uri:badge.icon}} style={styles.imageStyle} />
            <Text style={styles.mainTitleStyle}>
               {badge.title}
            </Text>
        </View>
      );
    }
    //返回陣列
    return allBadge;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:20,//上邊距
    flexDirection:'row',//主軸方向,水平
    alignItems:'flex-start',//定義控制元件在側軸上的對齊方式
    flexWrap:'wrap',//是否換行
    backgroundColor: '#F5FCFF'
  },
  outViewStyle: {
    backgroundColor:'gray',
    alignItems:'center',
    width:boxW,
    height:boxW,
    marginLeft:vMargin,
    marginBottom:hMargin
  },
  imageStyle:{
    width:80,
    height:80
  },
  mainTitleStyle:{
    color:'white'
  }
});

AppRegistry.registerComponent('Project', () => Project);