React Native之基础篇Image
来源:互联网 发布:浙江省政府数据平台 编辑:程序博客网 时间:2024/06/03 21:56
今天讲一下Image,其实在React Native里面Image的使用方式多种多样啊。现在贴一下代码来讲解一下
<Image source={{ uri: i }} style={{ height: array[key] * (width - _getWidth(45)) / 2, width: (width - _getWidth(45)) / 2, resizeMode: 'cover' }} />
其中的source里面有俩种使用方式一种是这个网络图片的,这个就没什么好说吧。uri加上连接。
其中讲另一个问题就是require('../../img/company.png')的这个方式记住了- -这个东西里面的连接和require是不能分开的。如果分开了聚会报错了。
所以你想要给image设置底图应该使用三目运算法去解决。比如这样把
<Image source={i?{ uri: i }:require('../../img/company.png')} style={{ height: array[key] * (width - _getWidth(45)) / 2, width: (width - _getWidth(45)) / 2, resizeMode: 'cover' }} />
那么就这样设置简单的。然后Image里面的resizeMode是一个比较经常使用到的地方有这些属性'cover',' contains ','stretch','repeat','center'
cover:在保持图片宽高比的前提下缩放图片,直到宽度和高度都大于等容器视图的尺寸(如果容器有padding内衬的话,则相应减去)译注:这样图片完全覆盖甚至超出容器,容器中不留任何空白
contain:在保持图片宽高比的前提下缩放图片,直到宽度和高度都小于等于容器视图的尺寸(如果容器有padding内衬的话,则相应减去)译注:这样图片完全被包裹在容器中,容器中可能留空空白
stretch:拉伸图片而不维持宽高比,直到宽高都刚好填满容器。
repeat:重复平铺图片直到填满容器图片会维持原始尺寸。
center:居中不拉伸
其中图片,还有这些函数
onLayout 函数
当元素挂载或者布局改变的时候调用,参数为:{nativeEvent: {layout: {x, y, width, height}}}。
onLoad 函数
加载成功完成时调用此回调函数。
onLoadEnd 函数
加载结束后,不论成功还是失败,调用这个回调函数。
onLoadStart 函数
加载开始时调用
然后呢里面还可以设置borderWidth这个东西就是设置边框之流的。那么圆角也是必然靠他的。
当元素挂载或者布局改变的时候调用,参数为:{nativeEvent: {layout: {x, y, width, height}}}。
onLoad 函数
加载成功完成时调用此回调函数。
onLoadEnd 函数
加载结束后,不论成功还是失败,调用这个回调函数。
onLoadStart 函数
加载开始时调用
然后呢里面还可以设置borderWidth这个东西就是设置边框之流的。那么圆角也是必然靠他的。
1 0
- React Native之基础篇Image
- 基础篇章:React Native 之 Image 的讲解
- 基础篇章:React Native 之 Image 的讲解
- 基础篇章:React Native之 Image 的讲解
- React Native 组件之Image
- React-Native之手势基础篇
- React Native控件之Image组件讲解
- React Native 学习之Image组件
- React-native 之Image的使用
- React Native组件源码分析之Image
- React Native 基础篇
- React-Native之最基础
- React native Image组件
- React Native--Image控件
- React Native Image 总结
- react-native-image-picker
- react-native-image-picker
- react-native-image-picker
- JavaScript | 鼠标悬停动态弹出浮动窗口显示图片 | clientX, clientY, scrollLeft, scrollTop
- Mac电脑使用:Mac电脑如何用自带的Safari浏览器,一键翻译英文网页为中文网页
- 第94篇ES之图像识别OCR及识别的文字ES检索
- canvas中的缩放示例
- Ubuntu下PHP+MySQL+Apache+PHPStorm的安装和配置
- React Native之基础篇Image
- Storm的启动命令
- 用PHP实现一个关于德州扑克算法的程序(一):发牌
- 二叉树的最大结点
- 【精华篇】C语言入门级练习20题(一):
- mysql索引的使用及优化方法
- 9本Java程序员必读的书
- 路由器逆向分析------在Linux上安装IDA Pro
- 并行编程中的“锁”难题