React Native---Image组件

React Native

Image组件

Image组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源

Image组件的基本用法

1. 从当前项目中加载图片

<View style={styles.container}>
     <Text>1. 从项目中加载图片</Text>
     <Image source={require('./img/icon.png')} style={styles.imageStyle}></Image>
</View>

该图片资源文件的查找和JS模块相似，会根据填写的图片路径相对于当前的JS文件路径进行搜索。

2. 加载使用APP中的图片

<Text>2. 从APP资源包中加载图片</Text>
<Image source={{uri: 'bd_logo1'}} style={styles.imageStyle}></Image>

使用已经打包在APP中的图片资源(Android中的drawable和mipmap)

3. 加载来自网络的图片

<Text>3. 从网络中加载图片</Text>
<Image source={{uri: 'https://www.baidu.com/img/bd_logo1.png'}} style={{width: 526, height: 296}}></Image>

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

设置图片为背景

<ImageBackground source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={styles.imageStyle}>
    <Text style={{marginTop:50,backgroundColor:'red '}}></Text>
</ImageBackground>

设置背景图片需要使用ImageBackground控件。

设置样式

imageStyle: {
   width: 160,
   height: 160,
   resizeMode:'cover',
   borderRadius: 30
}

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

常见属性

onLayout(function)

    当Image布局发生改变的，会进行调用该方法，调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.

onLoad (function)

    当图片加载成功之后，回调该方法

onLoadEnd (function)

    当图片加载失败回调该方法，该不会管图片加载成功还是失败

onLoadStart (fcuntion)

    当图片开始加载的时候调用该方法

resizeMode

    缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片

source{uri:string}

    进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

样式风格属性

FlexBox  支持弹性盒子风格

Transforms  支持属性动画

backgroundColor 背景颜色

borderColor     边框颜色

borderWidth 边框宽度

borderRadius  边框圆角

overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')

tintColor  颜色设置

opacity 设置不透明度0.0(透明)-1.0(完全不透明)

图片列表

图片列表

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

// 导入json数据
var BadgeData = require('./BadgeData.json');

// 引入包
var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');

// 定义一些全局的变量
var cols = 3;
var boxW = 100;
var vMargin = (width - cols * boxW) / (cols + 1);
var hMargin = 25;

type Props = {};
export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                {/*返回6个包*/}
                {this.renderAllBadge()}
            </View>
        );
    }

    renderAllBadge() {
        // 定义一个数组(装所有的包)
        var allBadge = [];
        // 遍历json数据
        for (var i = 0; i < BadgeData.data.length; i++) {
            // 取出单独的数据对象
            var badge = BadgeData.data[i];

            allBadge.push(
                <View key={i} style={styles.outViewStyle}>
                    <Image source={{uri: badge.icon}} style={styles.ImageStyle}/>
                    <Text style={styles.maintextStyle}>
                        {badge.title}
                    </Text>
                </View>
            );
        }

        return allBadge;

    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection:'row',
        flexWrap:'wrap',
        // justifyContent:"space-around",
        // alignItems: 'flex-start',
        backgroundColor: '#F5FCFF',
    },
    outViewStyle: {
        width: boxW,
        height: boxW,
        backgroundColor:'gray',
        marginLeft:vMargin,
        marginTop:hMargin,
        alignItems:'center'
    },
    ImageStyle: {
        width:80,
        height:80
    },
    maintextStyle: {

    }
});

注意: 使用uri的方式加载图片的时候，不需要加图片的后缀，尤其是加载项目内的图片时。

resizeMethod

当图片的实际尺寸和容器样式不一致时，决定以怎样的策略来调整图片的尺寸默认为auto。

- auto: 使用启发式算法来在resize和scale中自动决定。

- resize: 在图片解码之前，使用软件算法对其在内存中的数据进行修改。当图片尺寸比容器尺寸大得多时，应该优先使用此选项。

- scale: 对图片进行缩放。和resize相比，scale速度更快（一般有硬件加速），而且图片质量更优。在图片尺寸比容器尺寸小或者只是稍大一点时，应该优先使用此选项。