Image組件介紹

Image組件是可以顯示圖片的React Native組件。Image組件既可以顯示網絡圖片，也可以顯示本地圖片。Image組件幾乎是開發任何一個App都需要的組件。

在實際開發過程中，我們可以從多種途徑加載所需的圖片資源，諸如從網絡加載圖片，或者從本地加載靜態圖片資源等。在使用React Native過程中，對于圖片的加載有如下4種常見情況。

• 加載網絡圖片。Image組件能直接顯示網絡圖片，由于網絡圖片是存儲在服務端的，所以在渲染的時候Image組件的大小是未知的，因此需要手動指定style屬性中的寬高數值。

<Image
style={{width: 150, height: 150, backgroundColor: 'skyblue'}}
source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
/>

• 加載Images.xcassets中的圖片。在Xcode中，我們可以添加圖片到Images.xcassets中，對于添加到Images.xcassets中的圖片，我們可以直接通過其圖片名稱進行加載。例如，在Images.xcassets中存放著一個名稱為99ios的圖片。

<Image
style={{width: 150, height: 150}}
source={{uri: '99ios'}}
/>

• 加載本地靜態圖片資源。對于本地靜態圖片一般推薦把圖片統一放在組件內部，即圖片與JS代碼放在相同的文件夾，這樣做的好處在于組件可以包含自己所用的圖片而不用再單獨設置了。對于組件內部圖片，我們可以不指定Image組件的大小而直接顯示出來。

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

• 加載Base64圖片。Base64編碼的圖片也需要指定大小才能正常顯示，加載的方法如下。

var base64Icon = 'data:image/png;base64,...';

<Image
style={{width: 100, height: 100}}
source={{uri: base64Icon}}
/>

Image組件使用示例

下方的示例代碼中，演示了Image組件從網絡加載圖片的實現方法。

• 在終端中執行如下命令，創建名稱為ImageDemo的工程

react-native init ImageDemo

• 使用Atom打開ImageDemo工程的index.ios.js文件，編寫組件所使用的樣式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

• 在一個View組件中添加一個Image組件，該Image組件從網絡加載一張圖片。

export default class ImageDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={{width: 200, height: 200, backgroundColor: 'skyblue'}}
          source={{uri:'https://facebook.github.io/react/img/logo_og.png'}}
        />
      </View>
    );
  }
}

• 使用import加載項目所使用的模塊，并且注冊組件ImageDemo成為整個應用的根容器

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

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

• 在終端中執行下面的命令運行程序，在iOS模擬器中可以看到顯示的Image組件的樣式，并且加載了一張網絡圖片。

react-native run-ios

---