Michael_Jheng的部落格

<Image>是HTML圖片顯示標籤,在<Image>裡輸入圖片來源,例如

 let pic = {

  uri: '圖片來源'

 }; 

<Image source={pic} style={{width: 要顯示圖片的寬度, height: 要顯示圖片的高度}}/>

在{pic}大括號中,將變量(uri: '圖片來源')嵌入pic到JSX中,您可以將任何JavaScript表達式放在JSX中的大括號內,

特別要注意,在解構指派(Destructuring Assignment)中,需要Image ,

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

接下來修改在[筆記]安裝React-Native與創造第一個專案,所創造的專案來演示<Image>標籤功能,

修改新增程式碼如下,

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

export default class AwesomeProject extends Component {
  render() {  
    let pic = {
      uri:

      'http://img05.tooopen.com/images/20150925/tooopen_sy_143684733881.jpg'
    };  
    return (
      <View style={styles.container}>
         <Image source={pic} style={{width: 300, height: 230}}/>
      </View>
    );
  }
}

在Node.js command prompt執行"react-native run-android",即可安裝在模擬器或手機上演示,