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);

React Native 之Image 组件

猜你在找的React相关文章