RN中Image
2017-09-27 本文已影响134人
基本密码宋
RN中图片的使用
图片分为很多种
静态图片的加载
source={require('./icon_my_pic.png')} 写上路径进行调用
可以进行设置图片的宽高。
可以为你的图片设置resizeMode 这个是就是图片的一种呈现缩放方式
- cover 默认的 保持图片宽高比的前提下，对图片进行缩放。知道宽度或者高度大于或者等于容器的尺寸。
- contain 保持图片宽高比的前提下。图片的宽高不大于外部Image的宽高。
-
stretch 不保持图片的宽高
QQ截图20170926204952.png
比，进行对图片任意缩放。
- reapeat 在保证图片宽高比的情况下，对图片进行等比例的重复平铺图片，知道图片沾满这个容器。只有在ios上有效 android无效
- center 对图片进行居中，不回对图片进行其他的操作。
网络图片的加载
- 前提是必须要将图片设置宽和高 ，不然没办法完成渲染。
上代码
<Image
style={{width:100,height:100,top:50}}
source={{uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1506530199842&di=c8eade19712a7708cc1e97a1f9955fa7&imgtype=0&src=http%3A%2F%2Fpic2.ooopic.com%2F12%2F22%2F94%2F30b1OOOPIC5c.jpg'}}/>
