React Native 之Image 组件

1.加载网络图片

  render() {
    return (
      <View style={styles.container}
      >
       <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
       style={{width: 400, height: 400}} />
       <Image source={require('./img/icon.png')} 
       style={{alignSelf:'center'}}
       /> 
      </View>
    );
  }

网络图片加载 必须指定宽高 如果你不给图片指定尺寸，那么浏览器会首先渲染一个0x0大小的元素占位，显示空白。

2.加载本地资源图片

  render() {
    return (
      <View style={styles.container}
      >
       <Image source={require('./img/icon.png')} 
       style={{alignSelf:'center'}}
       /> 
      </View>
    );
  }

二：Image 组件的样式

当Image的实际宽、高与图片的实际宽、高不符时，视图片样式定义中resizeMode的取值不同分为三种情况：contain  cover  strech,默认值是cover

cover模式：图片处理的思路是要求填充整个Image定义的显示区域，可以对图片进行放大或者缩小，可以丢弃放大或者缩小后的图片中的部分区域，只求在显示比例不失真的情况下填充整个显示区域。

contain模式：可以对它进行等比缩小，但不能丢弃缩小后图片的某部分。

strech模式：要求填充整个Image定义显示区域，为此按照需要对图片进行任意的缩放，不考虑 保持图片的宽、高比，这种模式显示的图片可能会出现明显的失真

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class ViewProject extends Component {

  render() {
    return (
      <View style={styles.container}
      >
       <Image 
        source={require('./img/tuxiang.png')} 
        style={[styles.imageStyle,{resizeMode:'cover'}]}
       /> 
       <Image 
        source={require('./img/tuxiang.png')} 
        style={[styles.imageStyle,{resizeMode:'contain'}]}
       /> 
       <Image 
        source={require('./img/tuxiang.png')} 
        style={[styles.imageStyle,{resizeMode:'stretch'}]}
       /> 
      </View>
    );
  }

}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth:1,
    backgroundColor:'grey',
  },
  imageStyle:{
    margin:2,
    alignSelf:'center',
    width:200,
    height:200,
    backgroundColor:'white',
  }
 
});
AppRegistry.registerComponent('ViewProject', () => ViewProject);