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,
     height:20,
  },
  imgStyle2:{
     // 设置背景颜色
     backgroundColor:'green',
     // 设置宽度
     width:Dimensions.get('window').width,
     // 设置高度
     height:150
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

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

效果图：

图片填充模式：

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

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

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

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

效果图：

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

```
imgStyle2:{
     // 设置背景颜色
     backgroundColor:'green',
     // 设置宽度
     width:Dimensions.get('window').width,
     // 设置高度
     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);

效果图：