RN组件 - Image图片

Image，通过这个组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源。

一、Image组件的基本用法

1.1 从当前项目中加载图片

要往App中添加一个静态图片，只需把图片文件放在代码文件夹中某处，然后像下面这样去引用它：
<Image source={require('./my-icon.png')} /> 即:

            <View style={styles.container}>{/*从项目中加载图片*/}<Text>从项目中加载图片</Text>// 在imageStyle中指定宽高<Image source={require('./img/icon.png')} style={styles.imageStyle} />

该图片资源文件的查找和JS模块相似，该会根据填写的图片路径相对于当前的js文件路径进行搜索。

此外，React Naive的Packager会根据平台选择相应的文件，例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)，会分别根据android或者ios平台选择相应的文件。

你还可以使用@2x，@3x这样的文件名后缀，来为不同的屏幕精度提供图片。比如下面这样的代码结构：
.
├── button.js
└── img
├── check@2x.png
└── check@3x.png
并且button.js里有这样的代码：

<Image source={require('./img/check.png')} />
Packager会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说，iPhone 5s会使用check@2x.png，而Nexus 5上则会使用check@3x.png。如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。
注意：如果你添加图片的时候packager正在运行，可能需要重启packager以便能正确引入新添加的图片。

这样会带来如下的一些好处:

iOS和Android一致的文件系统。
图片和JS代码处在相同的文件夹，这样组件就可以包含自己所用的图片而不用单独去设置。
不需要全局命名。你不用再担心图片名字的冲突问题了。
只有实际被用到（即被require）的图片才会被打包到你的app。
现在在开发期间，增加和修改图片不需要重新编译了，只要和修改js代码一样刷新你的模拟器就可以了。
与访问网络图片相比，Packager可以得知图片大小了，不需要在代码里再声明一遍尺寸。
现在通过npm来分发组件或库可以包含图片了。
另一种写法:
```
// 错误
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />// 正确
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png');
<Image source={icon} />
```
1.2 加载使用APP中的图片

<Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
```
{/*从资源包中加载图片*/}<Text>2.从APP中加载图片</Text><Image source={{uri:'icon_a'}} style={styles.imageStyle} />
```
使用已经打包在APP中的图片资源(例如:xcode asset文件夹以及Android drawable文件夹)

注意：这一做法并没有任何安全检查。你需要自己确保图片在应用中确实存在，而且还需要指定尺寸。

为什么不在所有情况下都自动指定尺寸呢?
在浏览器中，如果你不给图片指定尺寸，那么浏览器会首先渲染一个0x0大小的元素占位，然后下载图片，在下载完成后再基于正确的尺寸来渲染图片。这样做的最大问题是UI会在图片加载的过程中上下跳动，使得用户体验非常糟糕。

在React Native中我们有意避免了这一行为。可以从已经打包好的应用资源文件中读取图片（使用require('image!x')语法）则无需指定尺寸，因为它们的尺寸在加载时就可以立刻知道。
```
{/*从资源包中加载图片--另一种方式*/}
<Text>4.从APP中加载图片</Text>
<Image source={require('image!icon_a')} style={styles.imageStyle} />
```
比如这样一个引用require('image!logo')的实际输出结果可能是：
```
{"__packager_asset":true,"isStatic":true,"path":"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png","uri":"logo","width":591,"height":573}
```
1.3 加载来自网络的图片

客户端的很多图片资源基本上都是实时通过网络进行获取的，写法和上面的加载本地资源图片的方式不太一样，这边一定需要指定图片的尺寸大小，实现如下：
```
{/*从网络中加载图片*/}<Text>3.从网络中加载图片</Text><Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}style={styles.imageStyle} />
```
1.4 设置图片为背景

<Image source={{uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg
'}} style={{flex:1,width:200, height:100, resizeMode: Image.resizeMode.stretch}}>

<Text style={{marginTop: 60, backgroundColor: 'red'}}>下面是背景图片</Text>

</Image>

通过嵌套来实现背景图片
开发者们常面对的一种需求就是类似web中的背景图（background-image）。要实现这一用例，只需简单地创建一个<Image>组件，然后把需要背景图的子组件嵌入其中即可。
```
return (<Image source={...}><Text>Inside</Text></Image>
);
```
示例代码:
```
import React, { Component } from 'react';
import {AppRegistry,StyleSheet,Text,View,Image
} from 'react-native';/*********** 背景图片示例****************/
export default class ImageDemoA extends Component {render() {return (<View style={styles.container}><Imagestyle={styles.backgroundImage}source={{uri:'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'}}><View style={styles.overlay}><Text style={styles.overlayHeader}>水果水果</Text><Text style={styles.overlaySubHeader}>有什么呢</Text></View></Image></View>);}
}const styles = StyleSheet.create({container: {flex: 1,flexDirection: 'row',backgroundColor: '#F5FCFF',paddingTop:30},image:{width:100,height:140,margin:6},backgroundImage:{flex:1,//背景图像的缩放类型: 包含(contain),拉伸(stretch)resizeMode:'cover'},overlay:{backgroundColor:'rgba(0,0,0,0.3)',alignItems:'center'},overlayHeader:{fontSize:33,fontFamily:'Helvetica Neue',fontWeight:'200',color:'#eae7ff',padding:10},overlaySubHeader:{fontSize:15,fontFamily:'Helvetica Neue',fontWeight:'200',color:'#eae7ff',padding:10,paddingTop:0}
});AppRegistry.registerComponent('ImageDemoA', () => ImageDemoA);
```
二、Image组件的常见属性

2.1 属性方法

onLayout(function)

当Image布局发生改变的，会进行调用该方法，调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.

onLoad (function)

当图片加载成功之后，回调该方法

onLoadEnd (function)

当图片加载失败回调该方法，该不会管图片加载成功还是失败

onLoadStart (fcuntion)

当图片开始加载的时候调用该方法

resizeMode

缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片

resizeMode这样一个属性，这个属性的作用相当于OC中设置图片的内容模式。

Image.resizeMode.cover：图片居中显示，没有被拉伸，超出部分被截断；

Image.resizeMode.contain：容器完全容纳图片，图片等比例进拉伸；

Image.resizeMode.stretch：图片被拉伸适应容器大小，有可能会发生变形。

source{uri:string}

进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

2.2 样式风格属性

FlexBox 支持弹性盒子风格

Transforms 支持属性动画

backgroundColor 背景颜色

borderColor 边框颜色

borderWidth 边框宽度

borderRadius 边框圆角

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

tintColor 颜色设置

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

iOS边框圆角的注意事项
请注意下列边框圆角样式目前在iOS的图片组件上还不支持：
borderTopLeftRadius
borderTopRightRadius
borderBottomLeftRadius
borderBottomRightRadius

最合适的相册图片
iOS会为同一张图片在相册中保存多个不同尺寸的副本。为了性能考虑，从这些副本中挑出最合适的尺寸显得尤为重要。对于一处200x200大小的缩略图，显然不应该选择最高质量的3264x2448大小的图片。如果恰好有匹配的尺寸，那么React Native会自动为你选好。如果没有，则会选择最接近的尺寸进行缩放，但也至少缩放到比所需尺寸大出50%，以使图片看起来仍然足够清晰。这一切过程都是自动完成的，所以你不用操心自己去完成这些繁琐且易错的代码。

资源属性是一个对象（object）
在React Native中，另一个值得一提的变动是我们把src属性改为了source属性，而且并不接受字符串，正确的值是一个带有uri属性的对象。

<Image source={{uri: 'something.jpg'}} />
深层次的考虑是，这样可以使我们在对象中添加一些元数据(metadata)。假设你在使用require('./my-icon.png')，那么我们就会在其中添加真实文件路径以及尺寸等信息（这只是举个例子，未来的版本中require的具体行为可能会变化）。此外这也是考虑了未来的扩展性，比如我们可能会加入精灵图（sprites）的支持：在输出{uri: ...}的基础上，我们可以进一步输出裁切信息{uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}，这样理论上就可以在现有的代码中无缝支持精灵图的切分。
对于开发者来说，则可以在其中标注一些有用的属性，例如图片的尺寸，这样可以使图片自己去计算将要显示的尺寸（而不必在样式中写死）。请在这一数据结构中自由发挥，存储你可能需要的任何图片相关的信息。

在主线程外解码图片
图片解码有可能会需要超过一帧的时间。在web上这是页面掉帧的一大因素，因为解码是在主线程中完成的。然而在React Native中，图片解码则是在另一线程中完成的。在实际开发中，一般对图片还没下载完成时的场景都做了处理（添加loading等），而图片解码时显示的占位符只占用几帧时间，并不需要你改动代码去额外处理。

RN组件 - Image图片相关推荐

Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
element upload预览_vue2.0 使用element-ui里的upload组件实现图片预览效果方法
1.首先我们在cli中引入element-ui 2.然后在具体的代码中放入uoload组件点击上传只能上传jpg/png文件,且不超过500kb 3.使用element-ui的upload组件中提 ...
weui上传组件的图片封装到formdata_自定义toast-ui富文本组件的图片黏贴上传
最近博客中用到了这个富文本组件,发现这组件的图片无法支持截图黏贴以及上传图片是一长串base64字符串,非常不方便,所以通过文档,自定义一个一下上传方式,效果如图其中,上传图片是调用组件自带的ho ...
RN 组件 Animated
RN 组件 Animated 可动画的视图包括View.Text.Image.createAnimatedComponent(自定义) 只会简单的,后面再更 constructor(props) {s ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
antd的联级选择器异步调用编辑回显_react-uplod-img 是一个基于 React antd组件的图片上传组件...
react-uplod-img 是一个基于 React antd组件的图片上传组件支持oss qiniu等服务端自定义获取签名,批量上传, 预览, 删除, 图片精确的尺寸限制排序等功能需要 re ...
C#-调用OCR组件识别图片文字
C#调用OCR组件识别图片文字图片识别的技术到几天已经很成熟了,只是相关的资料很少,为了方便在此汇总一下(C#实现),方便需要的朋友查阅,也给自己做个记号. 图片识别的用途:很多人用它去破解网站的验 ...
html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
vue中写svg组件svg图片加载不出来
vue中写svg组件svg图片加载不出来结构首先要安装3个插件:svg-sprite-loader,svgo,svgo-loader npm install svg-sprite-loader - ...

RN组件 - Image图片

RN组件 - Image图片相关推荐

最新文章

热门文章