react-native APP Image加载图片

react-native APP Image加载图片
*react-native APP Image加载图片共有3中方法:
1.加载外部资源的图片(网络图片)

 <Image style={{width:100,height:100}} source={{uri:'https://facebook.github.io/react/img/logo_og.png'}} />

2. 加载本项目图片
2.1 android
在android/app/src/main/res/drawable目录中加入你需要的图片。

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

记住uri对应的图片名称是不包含后缀的。需要重新打包APP,这样图片能够被正确加载并且显示出来。
2.2 ios
——————自己百度,啦啦啦—————————————————
2.3 android和ios均适用
这里写图片描述
在源文件的根目录新建文件夹app,具体看上图。
images.js中写法
这里写图片描述
在pages中的引用:

import LocalImg from '../images'
<Image style={styles.logoimg} 
  source={LocalImg['logo']}
/>

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

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

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

发布了22 篇原创文章 · 获赞 32 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览