React-Native开发五 React Native 的Image组件

1 Image组件介绍

RN中Image组件主要用于加载图片，可加载静态图片，网络图片，以及原生图片，本地文件系统中图片资源
官方参考https://facebook.github.io/react-native/docs/image#resizemode

2 Image组件功能

加载图片一般使用Image的source属性
1 加载静态图片
静态图片是指js下的图片资源，例如放在源码下的res的目录
加载静态图片主要方式是：使用Image的source属性，使用require来指定路径

<Image source={require(image_path)}/>

注意，这里的path一般是相对路径，起点是当前js文件所在的路径

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

const image_path1 = '../../res/img/qiqiu.jpg';

export default class ImageDemo extends Component{

    render(){
        return (
            <View>
                <Image source={require(image_path1)}/>
            </View>
        );
    }

}

加载本地图片资源可以不指定大小，默认以图片资源大小。
效果如下：
这里写图片描述
2 加载网络图片
加载网络图片资源主要用到source的uri属性

<Image source={{uri:image_url}} style={{width:size,height:size}}/>

注意，加载网络图片必须制定image的大小，否则无法加载

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

const image_path1 = '../../res/img/qiqiu.jpg';
const imgae_url = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531544047510&di=c76803f98e7e5e7b86ef403716ecd670&imgtype=0&src=http%3A%2F%2Fs8.sinaimg.cn%2Fmw690%2F006LDoUHzy7auXu0wVp67%26690';

export default class ImageDemo extends Component{

    render(){
        return (
            <View>
                <Image source={require(image_path1)} }/>
                <Image source={{uri:imgae_url}} style={{width:200,height:200,margin:5}}/>
            </View>
        );
    }

}

效果如下：
这里写图片描述

3 加载Android IOS原生图片
加载原生图片是指能加载Android中drawable中的图片，也能加载IOS中的图片，这里以一张在Android中drawable中qiqiu.jpg

<Image source={{uri:image_native_path}} style={{width:100,height:100}}/>

注意，加载原生图片也必须制定大小，并且需要重新运行react-native run android

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

const image_path1 = '../../res/img/qiqiu.jpg';
const imgae_url = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531544047510&di=c76803f98e7e5e7b86ef403716ecd670&imgtype=0&src=http%3A%2F%2Fs8.sinaimg.cn%2Fmw690%2F006LDoUHzy7auXu0wVp67%26690';
const image_native_1 = 'qiqiu';

export default class ImageDemo extends Component{

    render(){
        return (
            <View>
                <Image source={require(image_path1)} />
                <Image source={{uri:imgae_url}} style={{width:200,height:200,margin:5}}/>
                <Image source={{uri:image_native_1}} style={{width:100,height:100,margin:5}}/>
            </View>
        );
    }

}

效果如下：
这里写图片描述

3 Image图片加载技巧

1 图片缩放resizeMode
表示图片缩放模式
cover: 均匀缩放图像（保持图像的纵横比），使图像的尺寸（宽度和高度）等于或大于视图的相应尺寸（减去填充）。
contain: 均匀缩放图像（保持图像的纵横比），使图像的尺寸（宽度和高度）等于或小于视图的相应尺寸（减去填充）。
stretch: 独立缩放宽度和高度，这可能会改变图片的宽高比
repeat: 重复图像以覆盖视图的框架。图像将保持其大小和纵横比，除非它大于视图，在这种情况下，它将被均匀缩小以使其包含在视图中。IOS支持，Android不支持
center: 使图像沿两个维度居中。如果图像大于视图，请将其均匀缩小以使其包含在视图中。

默认属性是cover