React Native学习之图片Image组件

React Native的Image组件调用的图片途径比较多：网络图片、本地图片、照相机图片

Image组件的属性：

resizeMode：图片适用的模式cover、contain、stretch

source：图片的引用地址

• 网络图片：{% raw %}source={{uri: 'http://www.appblog.cn/logo.png'}}{% endraw %}
• 本地图片：{% raw %}source={require('./appnlog.png')}{% endraw %}

注意：网络图片，你需要手动指定图片的尺寸！

关于图片的尺寸，React Native会自动进行选择。如果没有，则会选择最接近的尺寸进行缩放，但也至少缩放到比所需尺寸大出50%，以使图片看起来仍然足够清晰。这一切过程都是自动完成的，所以你不用操心自己去完成这些繁琐且易错的代码。

注意：如果你在添加静态图片资源的时候packager正在运行，则你需要重启packager以便能正确引入新添加的图片。React Native最新版本已经解决该问题。

React Native 图片组件处理的优势:

• iOS和Android一致的文件系统。
• 图片和JS代码处在相同的文件夹，组件可以直接包含自己所用的图片而不用单独去设置。
• 不需要全局命名，不用担心图片名字的冲突问题。
• 只有实际被用到（即被require）的图片才会被打包到App中。
• 在开发期间，增加和修改图片不需要重新编译，只要和修改js代码一样刷新模拟器或真机即可。
• 与访问网络图片相比，Packager可以得知图片大小，不需要在代码里再声明一遍尺寸。
• 可以通过npm来分发组件或库可以包含图片。

注意：为了使新的图片资源机制正常工作，require中的图片名字必须是一个静态字符串。

使用混合App的图片资源

如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（通过Xcode的asset类目或者Android的drawable文件夹打包）

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />

注意：这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸。

源码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';

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

var imgs = [
    'https://www.baidu.com/img/bd_logo1.png',
    'http://y0.ifengimg.com/ifeng/index/20150921/ifengLogo.png',
    'http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png'
];

class RNAPP extends Component {
    render() {
        return (
            <View style={[styles.flex,{marginTop:45}]}>
                <MyImage imgs={imgs}> </MyImage>
            </View>
        );
    }
}

class MyImage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
            imgs: this.props.imgs,
        };
    }

    //source={{uri: this.state.imgs[this.state.count]}}  //网络图片
    //source={require('./rnapp.png')}  //本地图片

    render() {
        return(
            <View style={[styles.flex,{alignItems:'center'}]}>
                <View style={styles.imageLayout}>
                    <Image style={styles.image}
                        resizeMode="contain"
                        source={{uri: this.state.imgs[this.state.count]}}
                        />
                </View>

                <View style={styles.btnLayout}>
                    <TouchableOpacity onPress={this.goPreview.bind(this)}>
                        <View style={styles.btn}>
                            <Text>上一张</Text>
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={this.goNext.bind(this)}>
                        <View style={styles.btn}>
                            <Text>下一张</Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }

    goPreview() {
        var count=this.state.count;
        count--;
        if(count >= 0){
            this.setState({
                count: count,
            });
        }
    }

    goNext() {
        var count=this.state.count;
        count++;
        if(count < this.state.imgs.length){
            this.setState({
                count: count,
            });
        }
    }
}

const styles = StyleSheet.create({
    flex:{
        flex:1,
    },
    btnLayout:{
        flexDirection:'row',
        marginTop:20,
        justifyContent:'center',
    },
    btn:{
        width:60,
        height:30,
        borderColor:'#0089FF',
        borderWidth:1,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:3,
        marginRight:20,
    },
    imageLayout:{
      borderWidth:1,
        width:300,
        height:200,
        borderRadius:5,
        borderColor:'#ccc',
        justifyContent:'center',
        alignItems:'center',
    },
    image:{
        height:150,
        width:200,
    }
});

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