React Native实战系列第七篇 — Image组件

2017-05-22 本文已影响735人撩课_叶建华

Snip20170522_9.png

一、前言

在开发中还有一个非常重要的组件Image，通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源。

二、Image组件的基本用法

2.1 从当前项目中加载图片

<View style={styles.container}>
        <Text style={styles.textMarginTop}>加载本地的图片</Text>
        <Image 
          source={require('./img/2.png')} 
          style={{width: 120, height: 120}}  />
</View>

该图片资源文件的查找和JS模块相似，该会根据填写的图片路径相对于当前的js文件路径进行搜索。
此外，React Naive的Packager会根据平台选择相应的文件，例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)，会分别根据android或者ios平台选择相应的文件。

2.2 加载使用APP中的图片

<View style={styles.container}>
       <Text style={styles.textMarginTop}>加载原生项目中的图片</Text>
       <Image
         source={{uri: 'icon_homepage_map'}} 
         style={{width: 50,height:50}}/>
</View>

使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹)，会自动根据机子的型号去加载对应的图片资源。

2.3 加载来自网络的图片

客户端的很多图片资源基本上都是实时通过网络进行获取的，写法和上面的加载本地资源图片的方式不太一样，这边一定需要指定图片的尺寸大小，实现如下：

<View style={styles.container}>
        <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} 
          style={{flex:1,width:200, height:100, 
          resizeMode: Image.resizeMode.cover}}/>
        <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}}
          style={{flex:1,width:200, height:100, 
          resizeMode: Image.resizeMode.contain}}/>
        <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}}
          style={{flex:1,width:200, height:100, 
          resizeMode: Image.resizeMode.stretch}}>
</View>

细心的同学可能已经注意到，我在上面用到了resizeMode这样一个属性，那么这个属性的作用相当于OC中设置图片的内容模式。

Image.resizeMode.cover：图片居中显示，没有被拉伸，超出部分被截断；
Image.resizeMode.contain：容器完全容纳图片，图片等比例进拉伸；
Image.resizeMode.stretch：图片被拉伸适应容器大小，有可能会发生变形。

2.4 设置图片为背景

 <Image 
   source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} 
   style={{flex:1,width:200, height:100, 
   resizeMode: Image.resizeMode.stretch}}>
           <Text style={{marginTop: 60, backgroundColor: 'red'}}>
            下面是背景图片
           </Text>
</Image>

三、Image组件的常见属性

3.1 属性方法

onLayout(function)
当Image布局发生改变的，会进行调用该方法，调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.
onLoad (function)
当图片加载成功之后，回调该方法
onLoadEnd (function)
当图片加载失败回调该方法，该不会管图片加载成功还是失败
onLoadStart (fcuntion)
当图片开始加载的时候调用该方法
resizeMode
缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片
source{uri:string}
进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

3.2 样式风格属性

FlexBox 支持弹性盒子风格
Transforms 支持属性动画
backgroundColor 背景颜色
borderColor 边框颜色
borderWidth 边框宽度
borderRadius 边框圆角
overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')
tintColor 颜色设置
opacity 设置不透明度0.0(透明)-1.0(完全不透明)

四、Image组件的小练习

通过一款包包的展示，总结前面所学的View，Text和今天的Image组件，具体代码如下:

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

// 导入本地的数据
const dataArr = require('./LocalData/data.json');


export default class XMGMain extends Component {
    render() {
        return (
            <View style={styles.container}>
                {this._renderItem()}
            </View>
        );
    }

    /**
     * 创建一个子盒子放入数组
     * @private
     */
    _renderItem() {
        // 1. 创建组件数组
        let itemArr = [];

        // 2. 遍历
        dataArr.forEach((value, index)=>{
            // 2.1 创建组件装入数组
            itemArr.push(
                <View key={index} style={styles.innerViewStyle}>
                    <Image source={{uri: value.icon}}  style={styles.imgStyle}/>
                    <Text>{value.name}</Text>
                </View>
            );
        });

        return itemArr;
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        /*设置主轴的方向*/
        flexDirection:'row',
        /*换行显示*/
        flexWrap:'wrap',
        justifyContent:'space-around',
    },

    innerViewStyle:{
        width: 100,
        height: 100,
        backgroundColor:'#e8e8e8',
        borderColor:'#ccc',
        borderWidth:1,

        /*主轴和侧轴居中*/
        justifyContent:'center',
        alignItems:'center',

        marginTop: 20
    },

    imgStyle:{
        width: 80,
        height: 80
    }
});


module.exports = XMGMain;

案例运行结果

长按图片-->识别图中二维码

近期正在把公众账号的文章转移到简书，如果要了解第一动态，请关注我的微信公众账号，带你从零到一的进行React Native开发实战，在其他文章中会有对应的code和资料发放！

React Native实战系列第七篇 — Image组件

一、前言

二、Image组件的基本用法

2.1 从当前项目中加载图片

2.2 加载使用APP中的图片

2.3 加载来自网络的图片

2.4 设置图片为背景

三、Image组件的常见属性

3.1 属性方法

3.2 样式风格属性

四、Image组件的小练习

猜你喜欢

热点阅读