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

    <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) #

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

Image组件的使用的更多相关文章

  1. ExtJS 4.2 评分组件

    上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...

  2. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  3. react-router 组件式配置与对象式配置小区别

    1. react-router 对象式配置 和 组件式配置    组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...

  4. Angular2入门系列教程3-多个组件,主从关系

    上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...

  5. Angular2入门系列教程2-项目初体验-编写自己的第一个组件

    上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...

  6. .NET Core 首例 Office 开源跨平台组件(NPOI Core)

    前言 最近项目中,需要使用到 Excel 导出,找了一圈发现没有适用于 .NET Core的,不依赖Office和操作系统限制的 Office 组件,于是萌生了把 NPOI 适配并移植到 .NET C ...

  7. .NetCore中的日志(1)日志组件解析

    .NetCore中的日志(1)日志组件解析 0x00 问题的产生 日志记录功能在开发中很常用,可以记录程序运行的细节,也可以记录用户的行为.在之前开发时我一般都是用自己写的小工具来记录日志,输出目标包 ...

  8. BootStrap_02之全局样式及组件

    1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...

  9. ExtJS 4.2 组件介绍

    目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...

  10. ExtJS 4.2 组件的查找方式

    组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...

随机推荐

  1. ArcGIS水文分析实战教程(15)库容和淹没区计算

    库容和淹没区计算 的基本流程 要计算库容就必须先计算出该集水区面积,并且通过不同的水位计算出淹没区,并利用淹没区去裁剪DEM数据,将水面与下垫面的体积计算出来,这就是水库的库容.由于有了前面的基础,这 ...

  2. grep匹配命令

    关于匹配的实例: 统计所有包含“48”字符的行有多少行 grep -c "48" demo.txt   不区分大小写查找“May”所有的行) grep -i "May&q ...

  3. 【高维前缀和】8.15B. 组合数

    题目分析 没有接触过高维前缀和的话会有一点抽象

  4. 下一代容器技术podman简介

    PODMAN主要由红帽发起和推动,是下一代的容器技术,包括如下三个模块:Podman,Skopeo和Buildah这三个工具都是符合OCI计划下的工具(github/containers).主要是由R ...

  5. 步骤五 · 4-9 解决getElementsByClassName()兼容性 未解决

    前端零基础入门 2019版 / 步骤五 · 4-9 解决getElementsByClassName()兼容性

  6. 【EXE报错】win10运行C#程序保存报错:HTTP 无法注册URL ,进程不具有此命名空间的访问权限

    在win10系统运行C#程序出现以下报错 异常信息 [1]异常信息:HTTP 无法注册 URL http://+:13000/Core/Real/HandheldService/.进程不具有此命名空间 ...

  7. 诊断和修复Web测试记录器(Web Test Recorder)问题

    http://www.cnblogs.com/oscarxie/articles/1045430.html Database LoadTest2010 script C:\Program Files ...

  8. 并发编程入门(三): 使用C++11实现无锁stack(lock-free stack)

    前几篇文章,我们讨论了如何使用mutex保护数据及使用使用condition variable在多线程中进行同步.然而,使用mutex将会导致一下问题: 等待互斥锁会消耗宝贵的时间 - 有时候是很多时 ...

  9. 【线性代数】4-3:最小二乘近似(Least Squares Approximations)

    title: [线性代数]4-3:最小二乘近似(Least Squares Approximations) categories: Mathematic Linear Algebra keywords ...

  10. Solr6.0环境搭建

    感谢TTTTTTTTT丶的分享. 转载地址: 点击打开链接 准备工作: 目前最新版本6.0.下载solr 6.0:Solr6.0下载 JDK8 下载jdk1.8:jdk1.8[solr6.0是基于jd ...