React Native组件学习之Image

765 查看

Demo展示

image.gif

上面是去加载网络图片，下面是加载本地图片

加载图片的几种方式

加载本地图片
- 从项目中加载图片（一般是会在项目根目录新建一个image文件夹，然后放入图片）
  
  <Image source={require('./image/ic_launcher.png')} style={{width: 40, height: 40}}/>
- 从APP中加载图片一（在Android目录一般会新建一个drawable文件夹）
  
  <Image source={require('image!ic_launcher')} style={{width: 40, height: 40}}/>
- 从APP中加载图片二（同上）
  
  <Image source={{uri: 'ic_launcher'}} style={{width: 40, height: 40}}/>

加载网络图片

<Image
        source={{uri: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png'}}
        style={{width: 300, height: 90}}/>

注意

1、在RN中，Image组件的默认大小是0，是不显示图片的，所以我们需要给定图片的宽高

2、require 中的图片名称必须为一个静态的字符串信息，不能在 require 中进行拼接

常用属性

resizeMode ：图片的适应模式。也就是图片的展示样式。有三种：cover（覆盖）、contain（包裹）、stretch（拉伸）
一般作图片背景的话，我们可以用cover模式，大部分情况都是用contain，至于拉伸的话，看具体需求，不过一张图片被拉伸了也就不好看了。

Demo实现

新建一个networkImage.js

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


class NetWorkImageComponent extends Component {


    constructor(props) {
        super(props);
        //通过props属性来获取传递过来的数据
        var imgUris = this.props.imgUris;
        this.state = {
            //初始化数据
            imgUris: imgUris,
            count: 0
        };
    }


    goNext(count) {

        count++;
        if (count < this.state.imgUris.length) {
            this.setState({
                count: count
            });
        }
    }

    goPrevious(count) {

        count--;
        if (count >= 0) {
            this.setState({
                count: count
            });
        }
    }


    render() {

        return (
            <View>
                <View style={styles.image}>
                    <Image style={styles.img}
                           source={{uri: this.state.imgUris[this.state.count]}}
                           resizeMode="contain">
                    </Image>
                </View>

                <View style={styles.btnContainer}>

                    <TouchableOpacity onPress={this.goPrevious.bind(this, this.state.count)}>
                        <View style={[styles.btn, {marginRight: 30}]}>
                            <Text>上一张</Text>
                        </View>

                    </TouchableOpacity>

                    <TouchableOpacity onPress={this.goNext.bind(this, this.state.count)}>

                        <View style={[styles.btn, {marginLeft: 30}]}>
                            <Text>下一张</Text>
                        </View>

                    </TouchableOpacity>
                </View>

            </View>
        );
    }

}

const styles = StyleSheet.create({

    image: {
        width: 250,
        height: 200,
        borderWidth: 1,
        borderColor: '#ccc',
        justifyContent: 'center',
        alignItems: 'center'
    },

    img: {
        width: 200,
        height: 150
    },

    btnContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        marginTop: 30
    },

    btn: {
        width: 80,
        height: 30,
        borderColor: '#0089FF',
        borderWidth: 1,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 10,
    }
});

module.exports = NetWorkImageComponent;

再创建一个localImage.js

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


class LocalImageComponent extends Component {


    render() {
        return (
            <View>
                <View style={styles.flex}>
                    <Image source={this.props.img}
                           style={styles.image}/>
                    <Text style={styles.text}>{this.props.text}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        marginTop: 20
    },

    flex: {
        justifyContent: 'center',
        alignItems: 'center'
    },

    image: {
        width: 45,
        height: 45

    },

    text: {
        fontSize: 13,
        fontWeight: 'bold',
        marginTop: 5
    }
});
module.exports = LocalImageComponent;

最后是主js文件

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

var NetWorkImageComponent = require('./networkImage');
var LocalImageComponent = require('./localImage');

var imgUris = ['http://vczero.github.io/ctrip/hua2.png',
    'http://vczero.github.io/ctrip/nian2.png',
    'http://b.hiphotos.baidu.com/zhidao/pic/item/a6efce1b9d16fdfafee0cfb5b68f8c5495ee7bd8.jpg',
    'http://pic47.nipic.com/20140830/7487939_180041822000_2.jpg'];

var imgPaths1 = [require('./image/one.png'), require('./image/two.png'),
    require('./image/three.png'), require('./image/four.png'),
    require('./image/five.png')];

var imgPaths2 = [require('./image/six.png'), require('./image/seven.png'),
    require('./image/eight.png'), require('./image/nine.png'),
    require('./image/ten.png')];

var imgTexts1 = ['美食', '电影', '酒店', 'KTV', '外卖'];
var imgTexts2 = ['优惠买单', '周边游', '休闲娱乐', '今日新单', '丽人'];


const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
    },
    localImgContainer: {
        flexDirection: 'row',

    },
    localItemImg: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});


var data1 = [];
var data2 = [];
for (var i in imgPaths1) {
    var localImg1 = (
        <View style={styles.localItemImg} key={i}>
            <LocalImageComponent img={imgPaths1[i]} text={imgTexts1[i]}/>
        </View>
    );
    data1.push(localImg1);
}

for (var j in imgPaths2) {
    var localImg2 = (
        // 加100为了与上面的数组的key不一样，可以加任意数
        <View style={styles.localItemImg} key={j + 100}>
            <LocalImageComponent img={imgPaths2[j]} text={imgTexts2[j]}/>
        </View>
    );
    data2.push(localImg2);
}


class RNStudyFive extends Component {

    render() {
        return (
            <View >    
                {/*加载网络图片*/}
                <View style={[styles.container, {marginTop: 40}]}>
                    <NetWorkImageComponent imgUris={imgUris}/>
                </View>

                {/*加载本地图片*/}
                <View style={{marginTop: 40}}>
                    <View style={[styles.localImgContainer]}>
                        {data1}
                    </View>
                    <View style={[styles.localImgContainer, {marginTop: 20}]}>
                        {data2}
                    </View>
                </View>
            </View>
        );
    }
}

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

好了，我们的Image组件就学习完了。

写在最后

当把这篇文章写完后，看着自己撸的代码，骤然间发现自己的代码写得好low。像其中的数据传递，文字和图片路径完全可以放在一个数组里面，当然最好的方式的是用json文件，还有，加载图片的方式，上文有提到过可以用uri的方式来加载，而代码中是用require的方式，不仅丑，而且重复了很多事情，最后一个就是加载下面的10个item项，这样加载不利于性能的提升。当然我们可以用listview来实现。后面肯定会去学习listview的。说这么多，我想表达的是对于新学一门语言时，刚开始肯定会做一些自己以后看起来很匪夷所思的事情，不过这也让我们看到了自己的成长过程，记录自己的成长的方法就是写博客了。好了。煽了一点情，继续学习RN中...。

欢迎各位拍砖啊!