React Native－10.React Native Image组件详解

Image组件简介

老话说，没图你说个xx，可见图片在用户感官上的重要性。RN中，Image组件目前支持的属性如下：

• resizeMode : 枚举类型，（cover，contain，stretch）。表示图片适应的模式。
• source： 图片的引用地址，值为：｛uri： string｝。如果是本地的静态资源，需要使用 require（｀image！name｀）包裹。
• defaultSource : iOS支持的属性，表示默认的图片地址。如果网络图片加载完成，将取代defaultSource。
• onLoad： iOS支持的属性，加载成功时触发该事件。
• onLoadEnd：iOS支持的属性，不管是加载成功还是失败，都会触发该事件。
• onLoadStart：iOS支持的属性，加载开始时触发该事件。
• onProgress： iOS支持的属性，加载过程中的进度事件。

加载网络图片

我们做一个图片浏览器的小demo ：

RN中不像web开发那样会默认显示图片，在浏览器中，图片的大小开始是0*0，当图片下载完成后，会按照图片的大小渲染，这时你就会看到图片的加载闪烁，但这是不好的用户体验，因此，在RN中，Image组件的默认大小是0，是不显示图片的。我们需要给定图片的宽高或者知道图片的宽高财能展示图片。因此，我们一开始就可以是用占位符来代替，这样就没有了web的闪烁。这里我们设置主题的图片模式为 resizeMode ＝ “contain”，这样的话，我们的图片就会在指定大小内适应缩放。source的值为｛uri： this.state.imgs[this.state.count]｝,其中uri是根据this.state.count变化的，this.state.count代表数组中的索引。代码如下：

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} = React;

var imgs = [

    'http://pic15.nipic.com/20110702/1410048_183203957000_2.jpg',
    'http://pic1a.nipic.com/2008-10-06/20081069818327_2.jpg',
    'http://pic17.nipic.com/20111019/7745445_223209748000_2.jpg',
]

var MyImage = React.createClass({
    getInitialState : function(){
        var imgs = this.props.imgs;
        return{
            imgs : imgs,
            count : 0,
            };
    },
    goNext : function(){
        var count = this.state.count;
        count++;
        if(count < imgs.length){
            this.setState({
                count: count
            });
        }
    },
    goPreview: function() {
        var count = this.state.count;
        count--;
        if(count >= 0){
            this.setState({
                count:count
            });
        }
    },
    render: function(){
        return(
            <View style = {[styles.flex,{marginTop: 25}]}>
                <View style = {[styles.image]}>
                    <Image style = {styles.img}
                           source = {{uri:this.state.imgs[this.state.count]}}
                           resizeMode = "contain"/>
                </View>
                <View style = {styles.btns}>
                    <TouchableOpacity onPress = {this.goPreview}
                        style = {[styles.btn]}>
                            <Text>
                            上一张
                            </Text>                 
                    </TouchableOpacity>
                    <TouchableOpacity onPress = {this.goNext}
                        style = {[styles.btn]}>                         
                            <Text>
                            下一张
                            </Text>
                    </TouchableOpacity>
                </View>

            </View>
            );
    }
})

var styles = StyleSheet.create({

    flex: {
        flex: 1,
        alignItems: 'center',
    },
    image: {
        borderWidth: 1,
        width:300,
        height: 200,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
    },
    img : {
        height: 150,
        width: 200,
    },
    btns : {
        flexDirection: 'row',
        justifyContent: 'center',
        marginTop :20,
    },
    btn : {
        width : 60,
        height: 30,
        borderColor: '#0089ff',
        borderWidth: 1,
        justifyContent: 'center',
        alignItems : 'center',
        borderRadius : 3,
        marginRight: 20,
    }

})

var wxsPrj = React.createClass({

  render: function() {
    return (
    <View sytle = {[styles.flex,{marginTop:40}]}>
        <MyImage imgs = {imgs}></MyImage>
    </View>
        );
    }
})  

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

效果:

加载本地图片

先说语法：

//好的加载方式
<Image source = {require(image!imageName)}/>

//不好的加载方式
var icon = this.props.active ? 'imageName' : 'imageName2';
<Image source = {require('image!'+icon)}>

//好的加载方式
var icon = this.props.active ? require('image!imageName'):require('image!imageName2');
<Image source = {icon}/>

第二种之所以不好，是因为它运行时去分析静态资源，这个没有必要。
在项目中添加本地图片，需要重启模拟器才可以看到效果。