一个用于显示多种不同类型图片的React组件,包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册)等

一:属性

1:onLayout function

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

2:onLoad function

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

3:onLoadEnd function

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

4:onLoadStart function

加载开始时调用。

5:resizeMode enum('cover', 'contain', 'stretch')

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

6:cover: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白。

7:contain: 在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)。译注:这样图片完全被包裹在容器中,容器中可能留有空白

8:stretch: 拉伸图片且不维持宽高比,直到宽高都刚好填满容器。

9:source {uri: string}, number

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

10:testID string

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

11:(ios)accessibilityLabel string

当用户与图片交互时,读屏器(无障碍功能)会朗读的文字。

12:(ios)accessible bool

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

13:(ios)blurRadius number

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

14:(ios)capInsets {top: number, left: number, bottom: number, right: number}

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

15:(ios)defaultSource {uri: string}

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

16:(ios)onError function

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

17:(ios)onProgress function

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

二:属性

1:FlexBox 支持弹性盒子风格

2:Transforms 支持属性动画

3:resizeMode 设置缩放模式

4:backgroundColor 背景颜色

5:borderColor 边框颜色

6:borderWidth 边框宽度

7:borderRadius 边框圆角

8:overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')

9:tintColor 颜色设置

10:opacity 设置不透明度0.0(透明)-1.0(完全不透明)

11:alignSelf:center 代表在当前的布局中居中

12:flexDirection:row 这个属性代表是以横向布局

三:方法

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

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

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

2:static prefetch(url: string) #

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

三:实例代码

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Alert,
Image
} from 'react-native'; class ReactNativeProject extends Component {
render() {
return (
<View style={styles.container}>
<Image style={styles.imageTopStyle} source={{uri:"http://f1.diyitui.com/18/ac/88/89/c4/1b/ed/86/be/1c/46/62/79/1e/85/f1.jpg"}}/> <Image style={styles.imageCenterStyle} source={require('./img/myimage.png')}/> <Image style={styles.imageCenterStyle} source={require('image!myicon')}/>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: 1,
marginTop:64
},
imageTopStyle:{
marginTop:20,
marginRight:20,
marginLeft:20,
height:100,
width:100,
resizeMode:'cover'
},
imageCenterStyle:
{
marginRight:10,
marginTop:20,
height:50,
width:50
}
}); AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

效果图:

注意:上面三张分别对应加载三种图片的方式,第一种是加载网络图,第二种是加载项目文件的图,第三种是加载iOS项目里面的图;

上面这种就是加载项目里面的图片,如果在虚拟器新增加这张图时,记得把终端服务重启一下,否则会报错;

上面这种是加载Xcode里面的xcassets的图片,要重新运行XCode才会有效果;

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;

React Native知识4-Image组件的更多相关文章

  1. React Native知识5-Touchable类组件

    React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...

  2. React Native知识

    http://www.cnblogs.com/wujy/tag/React%20Native/    React Native知识12-与原生交互 React Native知识11-Props(属性) ...

  3. React Native 项目常用第三方组件汇总

    React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...

  4. React Native知识6-NavigatorIOS组件

    NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面.本组件并非由Facebook官方开发组维护.这一组件的开发完全由社区主导.如果纯js的方案能够满足你的需求的话,那 ...

  5. React Native知识2-Text组件

    Text用于显示文本的React组件,并且它也支持嵌套.样式,以及触摸处理.在下面的例子里,嵌套的标题和正文文字会继承来自styles.baseText的fontFamily字体样式,不过标题上还附加 ...

  6. React Native知识12-与原生交互

    一:原生传递参数给React Native 1:原生给React Native传参 原生给JS传数据,主要依靠属性. 通过initialProperties,这个RCTRootView的初始化函数的参 ...

  7. React Native知识1-FlexBox 布局内容

    一:理论知识点 1:什么是FlexBox布局? 弹性盒模型(The Flexible Box Module),又叫Flexbox,意为“弹性布局”,旨在通过弹性的方式来对齐和分布容器中内容的空间,使其 ...

  8. React Native知识10-ListView组件

    ListView - 一个核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表.最基本的使用方式就是创建一个ListView.DataSource数据源,然后给它传递一个普通的数据数组,再使用数据 ...

  9. React Native知识9-ScrollView组件

    一个包装了平台的ScrollView(滚动视图)的组件,同时还集成了触摸锁定的“响应者”系统. 记住ScrollView必须有一个确定的高度才能正常工作,因为它实际上所做的就是将一系列不确定高度的子组 ...

  10. React Native知识7-TabBarIOS组件

    一:简介 两个TabBarIOS和TabBarIOS.Item组件可以实现页面Tab切换的功能,Tab页面切换的架构在应用开发中还是非常常见的.如:腾讯QQ,淘宝,美团外卖等等 二:TabBarIOS ...

随机推荐

  1. Windows下使用Dev-C++开发基于pthread.h的多线程程序

    一.下载Windows版本的pthread 目前最新版本是:pthreads-w32-2-9-1-release.zip. 二.解压pthread到指定目录      我选择的目录是:E:\DEV-C ...

  2. Java 8新特性-3 Lambda 表达式

    在 Java 8 之前,匿名内部类,监听器和事件处理器的使用都显得很冗长,代码可读性很差. 在Java 8 之前使用匿名内部类: 例如 interface ITestPrint{ public voi ...

  3. 附录A 编译安装Hadoop

    A.1  编译Hadoop A.1.1  搭建环境 第一步安装并设置maven 1.  下载maven安装包 建议安装3.0以上版本(由于Spark2.0编译要求Maven3.3.9及以上版本),本次 ...

  4. Robot Framework自动化测试 ---视频与教程免费分享

    当我第一次使用Robot Framework时,我是拒绝的.我跟老大说,我拒绝其实对于习惯了代码的自由,所以讨厌这种“填表格”式的脚本.老大说,Robot Framework使用简单,类库丰富,还可以 ...

  5. ASP.NET 实现站内信功能(点对点发送,管理员群发)

    正好这段时间在研究这个功能,还是得感谢这位大神,没有他的引路,我就不可能把站内信做出来. http://www.cnblogs.com/grenet/archive/2010/03/08/168065 ...

  6. Wave - 花たん 音乐

    Wave 歌手:花たん 所属专辑:Flower 間違えて宇宙終わって(宇宙因为一个错误而终结了) 青信号はいつも通り(通行的灯号一如往常的) 飛んでまた止まって(又再停止传播) また 飛びそうだ(然后 ...

  7. android获得ImageView图片的等级

    android获得ImageView图片的等级问题 要实现的功能如下图,点击分享能显示选中与不选中状态,然后发送是根据状态来实现具体分享功能. 在gridview中有5个子项,每个子元素都有两张图片A ...

  8. 1.Java网络编程之概述

    黑马程序员_毕向东_Java基础视频教程第23天-01-网络编程(概述)学习笔记 网络通讯三要素: 1.IP地址 I.网络中设备的标识  II.不易记忆,可用主机名 www 万维网组织,baidu主机 ...

  9. PHP之验证码的实现

    简单的用PHP实现验证码: ?php /** *制作验证码 *1.启动session *2.设定标头 *3.创建画布 *4.创建颜色 *5.创建随机数并放到画布上 *6.将得到的若干随机数放入sess ...

  10. HTML基础知识汇总

    前言 一直想总结一下,苦于没有时间,正好看到了一个总结了不错的博客,我就在他的基础上进行一下测试并总结,原博地址:http://www.cnblogs.com/wanghzh/p/5805587.ht ...