Android React Native加载图片资源的正确姿势

阅读: 评论:0

Android React Native加载图片资源的正确姿势

Android React Native加载图片资源的正确姿势

在这篇文章中Android React Native的使用细节问题提到了 图片使用的问题,也提到了无论用哪种方法都不能加载app内部的图片资源的问题,当时的代码是这样子的

 <Image source={ require('image!icon') } />

在官方文档中也是这么写的Image

但是在另一个页文档中却与其相矛盾的,Images,估计这页文档刚加入不久

也就是说正确的app内部图片加载姿势应该如下

<Image style={{width:100,height:100}} source={{uri:'icon'}} />

当然图片要存在res的drawable目录下,记住uri对应的图片名称是不包含后缀的。这样图片能够被正确加载并且显示出来。

该文章中还提到加载静态图片资源(该方式还存在问题,加载不进来

我在index.android.js同目录下扔了一张名为icon.png的图片,然后使用该方式加载

<Image style={{width:100,height:100}} source={require('./icon.png')}/>

结果是图片并没有加载进来,但是也不报错。姑且不理会它,反正目前版本还不稳定,等正式稳定下来再说。总之现在去学React Native就是一个填坑的过程。

再如果要加载手机存储卡上的图片资源,其方式也很简单,假设我现在要加载sdcard根目录下的icon.png。对应的代码如下

  <Image style={{width:100,height:100}} source={{uri:'file:///sdcard/icon.png'}} />

可以看到使用了file://加上文件的路径/sdcard/icon.png进行加载,当然你还需要加入对应的权限。这样图片就能正确加载了。

网络图片就不说了,之前那篇文章中就已经提到了

  <Image style={{width:100,height:100}} source={{uri:'.png'}} />

也就是说,目前为止就是静态资源加载不了,这也是个bug,将来的某个版本肯定会修复的,临时的解决方法见

打开node_modulesreact-nativeLibrariesImageresolveAssetSource.js文件,将

function getScaledAssetPath(asset) {var scale = pickScale(asset.scales, ());var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';var assetDir = getBasePath(asset);return assetDir + '/' + asset.name + scaleSuffix + '.' + pe;
}

修改为

function getScaledAssetPath(asset) {var scale = pickScale(asset.scales, ());var scaleSuffix = scale === 1 ? '' : '@' + scale + 'x';var assetDir = getBasePath(asset);//return assetDir + '/' + asset.name + scaleSuffix + '.' + pe;var imagePath = assetDir + '/' + asset.name + scaleSuffix + '.' + pe;if (imagePath[0] == "/" || imagePath[0] == "\") {imagePath = imagePath.substr(1);}return imagePath;
}

这时候你再使用

<Image style={{width:100,height:100}} source={require('./icon.png')}/>

就可以正常的加载并显示静态图片资源的了。

文章写作时,React Native Android的版本是0.14.2,开发环境为win 7 X64,相信不久的将来,这些问题都会被一一修复。

本文发布于:2024-01-28 01:19:45,感谢您对本站的认可!

本文链接:https://www.4u4v.net/it/17063759913794.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:姿势   加载   正确   资源   图片
留言与评论(共有 0 条评论)
   
验证码:

Copyright ©2019-2022 Comsenz Inc.Powered by ©

网站地图1 网站地图2 网站地图3 网站地图4 网站地图5 网站地图6 网站地图7 网站地图8 网站地图9 网站地图10 网站地图11 网站地图12 网站地图13 网站地图14 网站地图15 网站地图16 网站地图17 网站地图18 网站地图19 网站地图20 网站地图21 网站地图22/a> 网站地图23