ReactNative基础组件学习（二） Image组件

 Image重要组件

 用于显示多种不同类型图片的 React 组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。

// export default App;
import React from 'react';
import {AppRegistry,View,Image,ScrollView} from 'react-native'
//http://file.66uu.com.cn/201312/26/1_13880282505Jbm.jpg
//http://benyouhuifile.it168.com/forum/201310/23/162906bl2ttfnm775b1sq8.jpg
export default class App extends React.Component {
  render() {
    return (
      <ScrollView>
        <Image
        style={{width: 200,height: 200,resizeMode:'center'}}
        source={require('./1.jpg')}
        />
        <Image 
        style={{width:200,height:200,resizeMode:'contain'}}
        source={{uri:'http://benyouhuifile.it168.com/forum/201310/23/162906bl2ttfnm775b1sq8.jpg'}}
        />
        <Image
        style={{width:200,height:200,resizeMode:'cover'}}
        source={require('./2.jpg')}
        />
        <Image
        style={{width:200,height:200,resizeMode:'repeat'}}
        source={require('./3.jpeg')}
        />
        <Image
        style={{width:200,height:200,resizeMode:'stretch'}}
        source={{uri:'http://file.66uu.com.cn/201312/26/1_13880282505Jbm.jpg'}}
        />
      </ScrollView>
    );
  }
}

• borderTopRightRadius: number

• backfaceVisibility: enum('visible', 'hidden')

• borderBottomLeftRadius: number

• borderBottomRightRadius: number

• borderColor: color

• borderRadius: number

• borderTopLeftRadius: number

• backgroundColor: color

• borderWidth: number

• opacity: number

• overflow: enum('visible', 'hidden')

• resizeMode: Object.keys(ImageResizeMode)

• tintColor: color

• resizeMode

• 决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。默认值为cover。cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。

• contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白。

• stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。

• repeat: 重复平铺图片直到填满容器。图片会维持原始尺寸，但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。

• center: 居中不拉伸。

• source

• 图片源数据（远程 URL 地址或本地数据）。

• require 加载本地图片

• require('本地图片路径')

• uri 加载远程图片

• uri:'http://benyouhuifile.it168.com/forum/201310/23/162906bl2ttfnm775b1sq8.jpg'