大佬教程收集整理的这篇文章主要介绍了ReactNative Image组件使用详解,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
最近学习ReactNative感觉到挺有意思的,在学习的过程中,发现网上一些人写的文章内容过时了,这主要是ReactNative的版本升级太快,如果你现在看一篇16甚至15年写的文章,把知识点和官方文档对比下,会让你大跌眼镜。所以奉劝各位想学习ReactNative的同学,选择学习资料一定要以官方文档和官方demo为准,其他资料为辅。
在ReactNative中Image是用于显示图片的组件,和开发Android的时候ImageView控件相同的效果。它可以用来显示网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片(如相册)等。恰当的使用Image组件能更形象更直观的向用户传达信息。
在这里的静态资源指的是加载的js部分的图片,非android,ios原生应用下的资源文件,对于加载这种图片资源,我们通过require('图片文件相对本文件目录的的路径')引入图片文件,并将其设置到Image组件的source属性即可。如下
需要注意的一点是,上面require中不能用字符串拼接路径,否则会加载报错。
在此所说的原生资源指的我们开发android的时候再res目录下的drawable,或者mipmap目录。以及ios下对应的资源目录。对于加载这种图片资源和加载项目中的资源有点不一样,此处以android为例,如下加载drawable下的文件
);除了通过上面方式加载也可以通过下面方式
nativeImagesource中可以指定图片宽高,如果同时在image组件的样式属性style设置宽高的话,最终宽高是以style中宽高为准。在上面默认加载的是drawable下的图片资源,如果想加载mipmap中的资源,可以如下
通过上面方式,我们就可以加载图片了,如果是新加到drawable下的图片需要重新编译运行,否则是不生效的。
对于加载网络图片需要注意的一点就是,需要指定样式的宽和高,否则图片将不显示(不设置默认宽和高为0了)。
默认情况下Android是不支持GIF和WebP格式的。你需要在build.gradle文件中根据需要添加对应的依赖。
// For animated GIF support
compile 'com.facebook.fresco:animated-gif:1.0.1'
// For WebP support,including animated WebP
compile 'com.facebook.fresco:animated-webp:1.0.1'
compile 'com.facebook.fresco:webpsupport:1.0.1'
// For WebP support,without animations
compile 'com.facebook.fresco:webpsupport:1.0.1'
}
如果你在使用GIF的同时还使用了ProGuard,那么需要在proguard-rules.pro中添加如下规则
该组件是Image组件的扩展,它支持嵌套组件。如在图片上显示一个文本,则可以通过如下实现
实现效果图如下,一般的我们可以嵌套ActivityInDicator来提示用户图片正在加载,当加载完成隐藏此控件。
对于网络图片的加载,ReactNative提供了一些属性用于图片不同加载时期的监听。
使用方法如下
对于iOS,还提供了加载进度的回调函数onProgress
可以通过参数event.nativeEvent.loaded获取已经加载的大小,通过event.nativeEvent.@R_846_10586@l获取图片的总大小。
不仅如此,ReactNative还提供了预加载图片函数prefetch(url: String),它可以将图片下载到磁盘缓存
好了,今天就介绍到这里,文中若有错误的地方欢迎指正,再次感谢。文中一些示例源码,可前往GitHub在线预览,也可以下载项目学习其他组件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持菜鸟教程。
以上是大佬教程为你收集整理的ReactNative Image组件使用详解全部内容,希望文章能够帮你解决ReactNative Image组件使用详解所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。