React-native Image的初识

Image组件的常见属性：

• 属性方法

  • onLoad(function）:当图片加载成功后，回调该方法
  • onLoadStart（function）:当图片开始加载的时候调用该方法
  • onLoadEnd(function）:当图片加载结束回调该方法，不会管图片加载成功还是失败
  • onLayout（function）:当 Image 布局发生变化会调用该方法
  • resizeMode:缩放比例，（包含可选参数’cover’,‘contain’,‘stretch’）,当该图片的尺寸超过布局的尺寸时，会根据设置 Mode 进行缩放或剪裁图片
  • source{uri:string}:进行标记图片引用，该参数可以为一个网络 url地址 或者 一个本地路径

• 样式属性

  • FlexBox：支持弹性盒子风格
  • Transforms：支持属性动画
  • backgroundcolor：背景颜色
  • borderColor：边框颜色
  • borderWidth：边框宽度
  • borderRadius：边框圆角
  • overflow：设置图片尺寸超过容器可以设置显示或隐藏(‘visible’,‘hidden’)
  • tintColor：颜色设置
  • opacity：设置透明度（取值范围0.0（全透明）~ 1.0（不透明））

1、没有设置width和height的情况下，默认为图片的宽高

/* 不设置尺寸的情况下 */
<Image source={require('./imgs/icon.png')} />

效果图：

2、设置width和height的情况下，尺寸图片的宽高

/* 设置尺寸的情况下 */
<View style={styles.container}>
         <Image source={require('./imgs/icon.png')} />  
         <Image source={require('./imgs/icon.png')} style={styles.imgStyle} />
      </View>

const styles = StyleSheet.create({ imgStyle:{ width:30,height:20,},container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',});

效果图：

3、加载网络图片

{/* uri是固定写法，后面跟上图片网络URL地址的字符串即可，还有，网络图片必须设置图片的大小，否则无法显示，一般还需要配合填充方式以达到想要的效果 */} <Image source={{uri:'http://avatar.csdn.net/5/F/0/1_zww1984774346.jpg'}} style={styles.imgStyle2}/>

效果图：

4、动态设置图片的宽与屏幕等宽

// 导入Dimensions库
var Dimensions = require('Dimensions');

export default class firstProgram extends Component {
  render() {
    // var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
         <Image source={require('./imgs/icon.png')} />  
         <Image source={require('./imgs/icon.png')} style={styles.imgStyle} />
         {/* uri是固定写法，后面跟上图片网络URL地址的字符串即可，还有，网络图片必须设置图片的大小，否则无法显示，一般还需要配合填充方式以达到想要的效果 */}
         <Image source={{uri:'http://avatar.csdn.net/5/F/0/1_zww1984774346.jpg'}} style={styles.imgStyle2}></Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  imgStyle:{
     width:30,imgStyle2:{
     // 设置背景颜色
     backgroundColor:'green',// 设置宽度
     width:Dimensions.get('window').width,// 设置高度
     height:150
  },container: {
    flex: 1,});

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

效果图：

图片填充模式：

• cover( 默认)：图片居中显示且不拉伸图片，超出的部分剪裁掉

imgStyle2:{
     // 设置背景颜色
     backgroundColor:'green',// 设置宽度
     width:Dimensions.get('window').width,// 设置高度
     height:150
     resizeMode:'cover'
  }

• contain：容器完全容纳图片，图片等比例进行拉伸

imgStyle2:{
     // 设置背景颜色
     backgroundColor:'green',// 设置高度
     height:150
     resizeMode:'contain'
  }

效果图：

• stretch：图片被拉伸至与容器大小一致，可能会发生变形

```
imgStyle2:{
     // 设置背景颜色
     backgroundColor:'green',// 设置高度
     height:150
     resizeMode:'stretch'
  }

效果：

demo1：

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,Image,Text,View,TabBarIOS,NavigatorIOS,ScrollView,TouchableHighlight 
} from 'react-native';

// 导入Dimensions库
var Dimensions = require('Dimensions');

export default class firstProgram extends Component {
  render() {
    // var movie = MOCKED_MOVIES_DATA[0];
    return (

    <View style={styles.container}>
                {/* 因为还没讲到listView,这边就用View代表Cell*/}
                <View style={styles.cellStyle}>
                    {/* 头像 */}
                    <Image source={require('./imgs/2.png')} style={styles.imgStyle}></Image>
                    {/* 昵称 */}
                    <Text style={styles.nameStyle}>昵称</Text>
                </View>
                {/* 分隔线 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 头像 */}
                    <Image source={require('./imgs/2.png')} style={styles.imgStyle}></Image>
                    {/* 出生日期 */}
                    <Text style={styles.nameStyle}>出生日期</Text>
                </View>
                {/* 分隔线 */}
                <View style={styles.lineStyle}></View>
                <View style={styles.cellStyle}>
                    {/* 头像 */}
                    <Image source={require('./imgs/2.png')} style={styles.imgStyle}></Image>
                    {/* 籍贯 */}
                    <Text style={styles.nameStyle}>籍贯</Text>
                </View>
                {/* 分隔线 */}
                <View style={styles.lineStyle}></View>
            </View>

    );
  }
}


    const styles = StyleSheet.create({
        container: {
            marginTop:20,backgroundColor:'white',flex:1,// 设置换行方式
            flexWrap:'wrap'
        },cellStyle: {
            // 尺寸
            height:44,width:Dimensions.get('window').width,// 设置背景颜色
            backgroundColor:'white',// 设置主轴方向
            flexDirection:'row',// 设置侧轴对齐方式
            alignItems:'center'
        },imgStyle: {
            width:30,height:30,// 设置图片填充模式
            resizeMode:'cover',// 设置圆角
            borderRadius:15,// 设置图片位置
            marginLeft:10
        },nameStyle: {
            // 设置昵称位置
            marginLeft:10
        },lineStyle: {
            // 背景色
            backgroundColor:'black',// 设置尺寸
            width:Dimensions.get('window').width,height:1
        }

    });

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

效果图：