Image组件的使用
// 注意图片放置的目录问题 <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 #
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组件的使用的更多相关文章
- ExtJS 4.2 评分组件
上一文章是扩展ExtJS自带的Date组件.在这里将创建一个评分组件. 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2上的一个RatingStar ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- react-router 组件式配置与对象式配置小区别
1. react-router 对象式配置 和 组件式配置 组件式配置(Redirect) ----对应---- 对象式配置(onEnter钩子) IndexRedirect -----对应-- ...
- Angular2入门系列教程3-多个组件,主从关系
上一篇 Angular2项目初体验-编写自己的第一个组件 好了,前面简单介绍了Angular2的基本开发,并且写了一个非常简单的组件,这篇文章我们将要学会编写多个组件并且有主从关系 现在,假设我们要做 ...
- Angular2入门系列教程2-项目初体验-编写自己的第一个组件
上一篇 使用Angular-cli搭建Angular2开发环境 Angular2采用组件的编写模式,或者说,Angular2必须使用组件编写,没有组件,你甚至不能将Angular2项目启动起来 紧接着 ...
- .NET Core 首例 Office 开源跨平台组件(NPOI Core)
前言 最近项目中,需要使用到 Excel 导出,找了一圈发现没有适用于 .NET Core的,不依赖Office和操作系统限制的 Office 组件,于是萌生了把 NPOI 适配并移植到 .NET C ...
- .NetCore中的日志(1)日志组件解析
.NetCore中的日志(1)日志组件解析 0x00 问题的产生 日志记录功能在开发中很常用,可以记录程序运行的细节,也可以记录用户的行为.在之前开发时我一般都是用自己写的小工具来记录日志,输出目标包 ...
- BootStrap_02之全局样式及组件
1.BootStrap指定的四种屏幕尺寸: ①超大PC屏幕--lg(large):w>=1200px: ②中等PC屏幕--md(medium):1200px>w>=992px: ③P ...
- ExtJS 4.2 组件介绍
目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...
- ExtJS 4.2 组件的查找方式
组件创建了,就有方法找到这些组件.在DOM.Jquery都有各自的方法查找元素/组件,ExtJS也有自己独特的方式查找组件.元素.本次从全局查找.容器内查找.form表单查找.通用组件等4个方面介绍组 ...
随机推荐
- SpringMVC问题整理
JSP页面无法获取ModelAndView里的值 自己搭的项目突然EL表达式取不到值了 不管是用 ${msg} 还是用JSTL的<c:out value="${msg}"/& ...
- 解决CMD控制台乱码问题
在cmd控制台中出现乱码情况如下 解决方式1 在控制台中输入 CHCP65001 按enter回车键查看 注:CHCP是一个计算机指令,能够显示或设置活动代码页编号. 代码页 描述6500 ...
- POJ1423 Big Number 暴力or斯特林公式??
好吧这题很水...可是我没想到正解... 题意:求n!有多少位. 正解:斯特林公式. 直接放代码... #include<cstdio> #include<iostream> ...
- jQuery系列(五):jQuery操作input的value值
表单控件是重中之重,因为一旦牵扯到数据交互,离不开form表单的使用,比如用户的注册登录功能等. jQuery操作表单控件的方法: $(selector).val()//设置值和获取值 1.实例代码 ...
- CentOS7遇到问题总结
问题1.保护多库版本:libstdc++-4.8.5-28.el7_5.1.i686 != libstdc++-4.8.5-28.el7.x86_64 错误:保护多库版本:libgcc-4.8.5-2 ...
- 执行jar包或执行其中的某个类
执行jar包,默认执行javafile中指定的main程序java -jar jar包例如 java -jar test.jar执行依赖其他jar包的class: java -cp .;E:\tool ...
- 安装conda后取消命令行前出现的base,取消每次启动自动激活conda的基础环境, 使用ubuntu 自带的Python环境
方法一: 退出base环境回到系统自带的环境 conda deactivate 方法二 1,通过将auto_activate_base参数设置为false实现: conda config --set ...
- 【Android】【踩坑日记】RecyclerView获取子View的正确姿势
开发过程中发现RecyclerView.getChildAt(position)为空的情况,但是明明这个position却没有越界. 解决办法:用recycler.getLayoutManager() ...
- golang——写文件和读文件
之前聊过,操作文件——读写文件,直接调用接口即可. 如果是一直写入操作,写入操作一直进行的,免不了会有,有时一大批数据过来,有时没有一条数据. 鉴于此场景,选择用select....channel 的 ...
- css background之设置图片为背景技巧
原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...