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

---