Image组件的使用

Posted 2020-08-09 玉思盈蝶

     // 注意图片放置的目录问题

    <Image source = {require(‘./img/logo.png‘)} style = {styles4.imageStyle}/>

注意要导入组件:

import React, { Component } from ‘react‘;
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
    Image  // 图片组件
} from ‘react-native‘;

backgroundColor: ‘transparent‘  // 去除背景色

renderImages() {
  return (
    <View>
      <Image
        style={styles.icon}
        source={require(‘./icon.png‘)}
      />
      <Image
        style={styles.logo}
        source={{uri: ‘http://facebook.github.io/react/img/logo_og.png‘}}
      />
    </View>
  );
}

属性#

onLayout function #

当元素挂载或者布局改变的时候调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}.

onLoad function #

加载成功完成时调用此回调函数。

onLoadEnd function #

加载结束后，不论成功还是失败，调用此回调函数。

onLoadStart function #

加载开始时调用。

resizeMode enum(‘cover‘, ‘contain‘, ‘stretch‘) #

决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。

• cover: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
• contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白
• stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。

source {uri: string}, number #

uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。

style style #

Flexbox...

Transforms...

resizeMode Object.keys(ImageResizeMode)

backgroundColor string

borderColor string

borderWidth number

borderRadius number

overflow enum(‘visible‘, ‘hidden‘)

tintColor string

opacity number

testID string #

一个唯一的资源标识符，用来在自动测试脚本中标识这个元素。

iosaccessibilityLabel string #

当用户与图片交互时，读屏器（无障碍功能）会朗读的文字。

iosaccessible bool #

当此属性为真的时候，表示这个图片是一个启用了无障碍功能的元素。

iosblurRadius number #

blurRadius(模糊半径)：为图片添加一个指定半径的模糊滤镜。

ioscapInsets {top: number, left: number, bottom: number, right: number} #

当图片被缩放的时候，capInsets指定的角上的尺寸会被固定而不进行缩放，而中间和边上其他的部分则会被拉伸。这在制作一些可变大小的圆角按钮、阴影、以及其它资源的时候非常有用（译注：这就是常说的九宫格或者.9图。了解更多信息，可以参见苹果官方文档

iosdefaultSource {uri: string} #

一个静态图片，当最终的图片正在下载的过程中时显示（loading背景图）。

iosonError function #

当加载错误的时候调用此回调函数，参数为{nativeEvent: {error}}

iosonProgress function #

在加载过程中不断调用，参数为{nativeEvent: {loaded, total}}

方法#

static getSize(uri: string, success: (width: number, height: number) => void, failure: (error: any) => void) #

在显示图片前获取图片的宽高(以像素为单位)。如果图片地址不正确或下载失败,此方法也会失败。

要获取图片的尺寸,首先需要加载或下载图片(同时会被缓存起来)。这意味着理论上你可以用这个方法来预加载图片,虽然此方法并没有针对这一用法进行优化,而且将来可能会换一些实现方案使得并不需要完整下载图片即可获取尺寸。所以更好的预加载方案是使用下面那个专门的预加载方法。

static prefetch(url: string) #

预加载一个远程图片(将其下载到本地磁盘缓存)。