react native Image 控件显示图片方式总结
来源:互联网 发布:淘宝上新速度 编辑:程序博客网 时间:2024/04/30 19:28
React Native 每一个控件都能让人把玩半天,每一个都能让你玩的泪流满面,这里总结一下Image控件的几种使用方式,不用想也是踩着坑过来的。
1. 打开Android 项目中的图片
Android 项目中的图片房子draw文件夹中,比如ico.png
<Image source={{uri: "ico", isStatic: true}} />
isStatic 代表是是否是静态文件,默认false
2. 打开js文件夹下面的图片
比如图片放在react-core/images/ico.png
<Image source={require('../images/ico.png')} />
相对路径下面的,一定要写对路径地址,还有就是要写上.png图片类型
3. 打开网络图片-url
比如图片地址为:http://xx.xx.xx/ico.png
4. 打开js对象中的本地文件
这个有点蛋疼,很多时候我们要对象造数据,数据里面如果有本地的图片地址,比如var data={ src:'../images/ico.png', type: "1" };
这个时候要显示使用Image显示这个图片
<Image source={require(data.src)} />
就会报错,提示图片找不到,这个时候黑科技就来了,需要这样写:
var data={ src:require('../images/ico.png'), type: "1" };<Image source={data.src} />
不要问我为什么,对于一个Android开发人员来说,JS真是有容乃大,各种感觉不可思议的用法已经让我刮目相看。
总结完毕,如果一个功能你使用了React Native,那么恭喜你选择了困难模式,反正我已经在这条踩坑的路上,越走越远,越陷越深。
2 0
- react native Image 控件显示图片方式总结
- React Native--Image控件
- React Native Image 总结
- react native Image全屏显示
- Image图片在控件中的显示方式
- React Native控件之Image组件讲解
- Image控件显示图片
- react native图片显示问题
- react-native image 设置默认图片
- React Native Image使用网络图片
- react-native APP Image加载图片
- react-native laoding native image for android 加载静态图片
- Image 控件显示二进制图片
- react-native试玩(7)-图片控件
- React Native 的图片加载方式
- React-native之显示一张图片
- react-native无法显示图片的解决办法
- React Native实现图片文本混合显示
- CentOS6.5下Tomcat搭建Solr5.4.0集群
- pb
- Java 日期处理 Date 、Calendar 和TimeZone类
- 实用代码
- UVA 11354Bond(MST+LCA)
- react native Image 控件显示图片方式总结
- 8 线程、死锁
- CentOs 关机注意事项
- Angular $q 完全指南
- JavaEE命名服务与JNDI
- 在linux环境上如何部署SolrCloud
- QT backgound-image 与 bord-image
- iotjs移植到openwrt
- iOS UIAppearance 全局设置详解