Image组件
/* Image
* 用于显示图片的组件,包括网络图片,静态资源
* 常用性能:
* resizeMode 图片适应模式 cover , contain , stretch
* source 图片的引用地址
*
* iOS支持的属性: onLoad , onLoadEnd ,onLoadStart, onProgress
*
* 练习:显示两张图片,分别是网络图片,静态资源
* https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512489433426&di=fcc41e3d4a372da2f5098d0f121d5224&imgtype=0&src=http%3A%2F%2Fimg1c.xgo-img.com.cn%2Fpics%2F1538%2Fa1537493.jpg
*
* */ export default class App extends Component<> {
render() {
return (
<View style={styles.container}>
<View style={styles.net}>
<Image
style={styles.netImage}
source={{url:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512489433426&di=fcc41e3d4a372da2f5098d0f121d5224&imgtype=0&src=http%3A%2F%2Fimg1c.xgo-img.com.cn%2Fpics%2F1538%2Fa1537493.jpg"}}
/>
</View>
<View style={styles.local}>
<Image
style={styles.localImage}
source={require("image!图片的名字")}//固定写法image! 在叹号后面写"图片的名字"
/>
</View>
</View> );
}
} var styles = StyleSheet.create({
container:{
flex:1,
margin:25,
alignItems:"center"
},
net:{
marginTop:30,
width:300,
height:300,
justifyContent:"center",
alignItems:"center",
backgroundColor:"cyan"
},
netImage:{
width:280,
height:200,
backgroundColor:"gray"
},
local:{
marginTop:30,
width:300,
height:300,
justifyContent:"center",
alignItems:"center",
backgroundColor:"yellow"
},
localImage:{
width:280,
height:200,
backgroundColor:"gray"
}, });
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个方面介绍组 ...
随机推荐
- matlab GPU 操作
从Matlab2013版本开始,matlab将可以直接调用gpu进行并行计算,而不再需要安装GPUmat库.这一改动的好处是原有的matlab内置函数都可以直接运用,只要数据格式是gpuArray格式 ...
- Java实现多线程
Java中实现多线程有两种手段: 继承Thread类(此类为多线程的操作类),而且必须明确地重写Thread类中的run()方法,此方法为线程的主题 实现Runnable接口 Thread类和Runa ...
- Subscript & Inheritance
[Subscript] 1.subscript的定义: 2.Subscript的使用: 3.可以定义多维subscript: 多维Subscript的使用: [Inheritance] 1.overr ...
- linux单用户模式修改密码
Linux使用版本: Centos 7 救援模式: 1,在虚拟机设置里查看光驱是否开启启动,要保证设置状态里的两个选项都已选择. 2,先将Centos系统关机,然后在VMware左侧选中这台虚拟机并右 ...
- Ant工具 ant的安装与配置 ant作用
原文出自:http://blog.csdn.net/zhuche110/article/details/2663904点击打开链接 Ant是一种基于Java的build工具.理论上来说,它有些类似于( ...
- ubuntu下源码方式安装php5.4
一.安装前准备 下载php-5.4.13.tar.gz最新版本放到/user/src目录下 二.安装 因为在安装php过程中,会依赖安装很多库,为了不让你反复安装,建议按步骤操作 安装autoconf ...
- libevent源码深度剖析十二
libevent源码深度剖析十二 ——让libevent支持多线程 张亮 Libevent本身不是多线程安全的,在多核的时代,如何能充分利用CPU的能力呢,这一节来说说如何在多线程环境中使用libev ...
- tomcat的配置文件有那些
配置文件一般都在conf文件夹里,主要有server.xml,context.xml,tomcat_user.xml,web.xml四个常用配置文件,server主要是服务器设置的,例如端口设置,路径 ...
- Python04 range()方法的使用、turtle.textinput()方法和write()的使用、turtle.numinput()的使用
1 range() 方法的使用 1.1 range方法介绍 range方法会返回一个range类型的对象,该对象会根据range方法的参数产生一些列整型数据 技巧01:range方法有三个参数,第一个 ...
- sqLSERVER 计划缓存
在这一期的性能调优培训里,我想详细谈下SQL Server里计划缓存及其副作用.在上一周你已经学到,每个提交给SQL Server的逻辑查询会编译成物理执行计划.那个执行计划然后会被缓存,即被称为计划 ...