react-native APP Image加载图片

本文介绍了在React-Native应用中加载图片的三种方法:1) 加载网络图片;2) 加载本地资源图片,包括在Android的drawable目录和iOS的相应位置添加图片;3) 加载SD卡中的图片,需要指定file://前缀和权限。同时提供了一个在images.js中管理和在pages中引用图片的例子。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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进行加载,当然你还需要加入对应的权限。这样图片就能正确加载了。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值