/*  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组件的更多相关文章

  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. 使用class-dump

    [使用class-dump] 对于未加壳的Mach-O文件,class-dump可以从Mach-O的section中还原出objc代码的头文件.下面做一些关键演示,以及对关键问题进行说明. 1.标准用 ...

  2. Linux GCC编译警告:Clock skew detected. 错误解决办法

    今天在虚拟机上用GCC编译一个程序的时候,出现了下面的错误: make: warning: Clock skew detected. Your build may be incomplete 试了ma ...

  3. 【bzoj2947】[Poi2000]促销

    2947: [Poi2000]促销 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 181  Solved: 120[Submit][Status][D ...

  4. css常见问题解决方法

    设置方法: div内的img和span都需要设置vertical-align:middle; 解决inline-block的空格: http://www.w3cplus.com/css/fightin ...

  5. 运用alarm系统调用检测网络是否断开

    比如对于一个Server/Client程序,Client会每隔一定时间(比如TIME_OUT_CLIENT)会向Server发送“CheckConnect”信息,Server收到这个信息会调用回调函数 ...

  6. sed陷阱

    sed陷阱:   sed -i 后不要紧跟字母, 否则会产生一个新的备份文件(在原文件后多出来一个字母) // 正确写法 /usr/bin/sed -i "/PREFIX=/d" ...

  7. Maven——继承和聚合

    实际项目中,可能正要构建一个大型的系统,但又不想一遍又一遍的重复同样的依赖元素,这种情况是经常出现的.不过还好,maven提供了继承机制,项目可以通过parent元素使用继承,可以避免这种重复.当一个 ...

  8. jsp-MySQL连接池

    1.将数据库驱动程序的JAR文件放在Tomcat的 common/lib 中: mysql-connector-java-5.1.18-bin.jar 下载地址:https://yunpan.cn/c ...

  9. C#中特殊的string类型

                                                                                  string C#有string关键字,在翻 ...

  10. TensorFlow安装教程

    Windows7 安装TensorFlow(本人试了好多方法后的成果):https://www.cnblogs.com/bxyan/p/6869237.html Linux: sudo pip ins ...