-
图像组件
在ReactNative，像是一个组件用于显示图片的效果相同的ImageView控件在开发Android系统。它可以用来显示网络图片，静态资源，临时的本地图片，并在本地磁盘上的图片（如相册）。图像组件的适当使用可以更直观、更直观的对用户交流信息。
映像组件加载项目中的静态资源。
静态资源在这里指的是图片、JS部分加载非Android、iOS原生应用程序资源文件下加载的图像资源，我们通过要求（相对于图片文件的文件目录路径）为图像文件，并设置它的源属性可以是图像components.as如下
<图像
样式=图像}
表示当前目录/父目录。
源= {需要（'。 / reactlo。png）}
>
需要注意的一点是，上述要求不能使用字符串拼接路径，否则将加载错误。
加载本地图片资源
本土资源描述这里指冲，或纹理目录在res目录当我们开发的Android，iOS和相应的资源目录下，加载图片资源与项目资源的负载，以Android为例，加载文件下的drawable如下
<图像
源= { { } } 'launcher_icon的URI：
样式：宽度：38，高度：38 }
>）；
除了通过上面的方法加载它之外，还可以使用以下方式
<图像
源= { nativeimagesource（{
安卓：'launcher_icon，
宽度：96，
身高：96
} }）
>
nativeimagesource可以指定图像的宽度和高度，如果在同一时间在风格样式属性的图像组件设置宽度和高度，最终的宽度与高标准的风格。在绘制图像资源默认情况下是它装的，如果你想在mipmap的资源负载，它可以如下
<图像
源= { nativeimagesource（{
安卓：'mipmap / launcher_icon，
宽度：96，
身高：96
} }）
>
通过以上方法，我们可以加载图片，如果新的图像添加到重新编译和运行的需要，否则就不是有效的。
加载网络图片
<图像
源= { { URI：'https： / /脸谱网。GitHub。IO / / / lo_og IMG反应。png} }
样式：宽度：38，高度：38 }
>）；
我们需要注意的是，加载Web图片时，我们需要指定样式的宽度和高度，否则将不会显示图片（默认宽度和高度不设置为0）。
图像组件的共性
风格：
宽度：设置图片的宽度。
高度：设置图片的高度
带：设置边框的宽度
边框颜色：设置边框的颜色
背景颜色：设置背景颜色（一些图片背景透明，通常用于此属性）
不透明：不透明，值介于0和1, 1之间是不透明的，0是透明的。
TintColor: coloring the picture, this property is used more. 例如，当点击时，黑白图片通常会被转换成其他彩色图片。此时可以使用此属性。
blurradius套照片模糊半径，可以模糊
defaultsource设置默认图片，图片加载，在网络成功的图片显示（iOS支持）。
源
在上面，我们引入了源属性来加载不同的图像资源，但仍然有一个没有提到它可以接收一个数组作为参数，它可以自动加载与组件的宽度和高度相匹配的宽的和高的图片。
<图像
样式：Flex：1 } }
源= {
{ URI：'https： / /脸谱网。GitHub。IO / / / lo_small IMG反应。PNG，宽度：38，高度：38 }，
{ URI：'https： / /脸谱网。GitHub。IO / / / lo_small_2x IMG反应。PNG，宽度：76，高度：76 }，
Uri：'https： / /脸谱网。GitHub。IO / / / lo_og IMG反应。PNG，宽度：400，高度：400 }
} }
>
resizemode
此属性用于设置图片的缩放模式，相应的值如下所示
封面：保持图片的宽度和高度比例，直到宽度和高度等于容器视图的大小（参照下图）。
包含：在保持图片宽度与高度比例的前提下缩放图片，直到宽度和高度小于容器视图的大小。
拉伸：拉伸图片，不要保持宽度与高度之比，直到宽度和高度刚好填满容器为止。
中心不在中间伸展。
重复：重复图片直到容器被填满。图片将保持原来的大小。
支持GIF和WebP格式图片在Android
Android是不是由GIF和WebP格式的默认支持。你需要添加相应的依赖在build.gradle文件需要。
依赖{
如果你的应用程序支持Android版本/冰淇淋三明治（API级别14）
compile'com。脸谱网。壁画：动画基地支持：1.0.1
动画GIF支持
compile'com。脸谱网。壁画：动画：1.0.1
WebP支持 / /，包括动画WebP
compile'com。脸谱网。壁画：动画WebP：1.0.1
compile'com。脸谱网。壁画：webpsupport：1.0.1
WebP支持 / /，没有动画
compile'com。脸谱网。壁画：webpsupport：1.0.1
}
如果你使用混淆器同时使用GIF，你需要去proguard-rules.pro添加以下规则
保持类{ com.facebook.imagepipeline.animated.factory.animatedfactoryimpl
公共animatedfactoryimpl（com.facebook.imagepipeline.bitmaps.platformbitmapfactory，com。脸谱网。imagepipeline。核心。executorsupplier）；
}
背景
这个组件是图像组件的一个扩展，它支持嵌套组件。如果一个文本显示在一个图片上，它可以实现如下
<背景
风格= { {宽度：100，高度：100，背景颜色：'transparent} }
源= { { URI：'https： / /脸谱网。GitHub。IO / / / lo_og IMG反应。png} }
>
反应
实现效果图如下。一般来说，我们可以嵌套activityindicator提示用户的图片被加载，当加载完成，控制隐藏。
网络图片加载监视器
对于网络图像的加载，reactnative提供了大量的图片的加载周期监控属性。
OnLoadStart：打电话的时候，画面开始负荷
onLoad：调用图片加载完成时，这幅画是在这个时候成功加载
OnLoadEnd：负载的结束后，执行的回调函数，无论是成功或失败，不像onload。
该方法的使用如下
<图像
源= { { URI：'https： / /脸谱网。GitHub。IO / / / lo_og IMG反应。png} }
风格= { { { styles.base，溢出：'visible} } }
（onloadstart = {）= console.log（'onloadstart）}
onload = {（事件）= console.log（'onload）}
（onloadend = {）= console.log（'onloadend）}
>
对于iOS，还提供的负载调度回调函数，取得的进展
<图像
样式=图像}
进步= {（事件）= > {
console.log（'onprogress）
this.setstate（{
进展：math.round（100×event.nativeevent.loaded /事件。nativeevent。总）
} }
所加载的图像的大小可以通过参数event.nativeevent.loaded获得，和图片的总大小可以通过event.nativeevent.total。
不仅如此，reactnative还提供预装图像功能的预取（网址：字符串），可下载图片到磁盘缓存
无功prefetchtask = image.prefetch（'https： / /脸谱网。GitHub。IO / / / lo_og IMG反应。png）；
（（prefetchtask。然后）= > {
在这里，设置，显示图像组件。组件在这个时候使用预加载的图片信息。
console.log（'loading图片成功）
{错误}，
console.log（'loading图片失败）
}）
好吧，今天这里介绍。如果有一个可以纠正错误的地方，再次谢谢你。一些例子的源代码，可以去GitHub在线预览，也可以学习其他组件下载项目。
源代码门户
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。