react native 深坑之战 Android篇——image组件

869 查看

先来点实际的:

image组件加载图片的7种方式:

image组件加载图片主要通过source属性来设置,现在我们来看一下source的几种写法:


(1)官方文档本地图片常规方式1:source={require(“一个RN项目里的相对路径”)}


(2)官方文档网络图片常规方式2:source={require(“一个url网络路径”)}


(3)使用drawable文件夹下面的资源文件:source={uri:”文件名”}。这里的文件名是不带后缀的,所以…你懂的。


(4)使用网络图片方式2:source={uri:”图片的url网络路径"}


(5)官方使用网络base64文件流 source={uri:’data:数据类型;base64,base64数据’,scale: 值} //这个办法没有亲测过,但是文档的例子是这么写的。


(6)使用android fileURI路径:source={uri:‘file///fileURI’}


(7)使用 android contentURI :source={uri:’content://……...’}


后面的有待补充.................................


image的gif动态图支持:


    image组件并不是直接支持动态gif图,需要在外面套上一个View方能正常播放,否则,只显示第一帧~!


神坑1:大部分1帧gif图会报错;少部分2帧GIF图会报错,原因不明,报错内容:../../....gif,¥#%……&error ??(额,大概就是这样的)


image 布局:  

(1)image的flex:


其实对flex弹性盒子支持并不好,貌似直接使用完全无效(这个毛病很多组件都有),需要在父级加一层view,flex操作view,image自己控制好自己在view里面的位置,SO,尽量设宽高,不然.......呵呵


(2)image用做背景图:


尽量不要使用宽度为1的图片拉伸来得到一个背景.......原因同上,你又要开始计算宽高,又要动态赋值,这次加上view都不行了(原因不明),父级加上view用flex完全没用,

SO,总结下来就是,不管你用什么办法,你都得确定image里面图片的宽高,不然.....再次呵呵

这里补充一下,image设宽高有两种:style属性或者source属性:source={uri:uri,width:x,heigh:y}


剩下的,暂时没遇到或者忘了,大家有遇到的快快留言

今天7/18,自从上周五升级了0.29.1之后,所有的GIF图都挂了,原因不明,就是显示空白,也不报错,检查了2天,如果哪个朋友有填过这个坑,请马上联系我,非常非常非常非常非常的感谢!

下午三点半,Android的GIF支持解决,原因是0.29版剥离了fresco支持库。导入即可