Image组件的常见属性
-
属性方法
- onLoad(function):当图片加载成功后,回调该方法
- onLoadStart(function):当图片开始加载的时候调用该方法
- onLoadEnd(function):当图片加载失败回调该方法,不会管图片加载成功还是失败
- onLayout(function):当 Image 布局发生变化会调用该方法,调用代码
- 1
- 2
- resizeMode:缩放比例,(包含可选参数’cover’, ‘contain’, ‘stretch’),当该图片的尺寸超过布局的尺寸时,会根据设置 Mode 进行缩放或剪裁图片
- source{uri:string}:进行标记图片引用,该参数可以为一个网络
url地址
或者 一个本地路径
-
样式属性
- FlexBox:支持弹性盒子风格
- Transforms:支持属性动画
- backgroundcolor:背景颜色
- borderColor:边框颜色
- borderWidth:边框宽度
- borderRadius:边框圆角
- overflow:设置图片尺寸超过容器可以设置显示或隐藏(‘visible’, ‘hidden’)
- tintColor:颜色设置
- opacity:设置透明度(取值范围0.0(全透明)~ 1.0(不透明))
Image组件的介绍和使用
- Image 在开发中是经常接触到的组件,通过它,我们可以展示需要展示的图片资源,在 React Native 中该组件可以通过多种方式价值啊图片资源
-
在介绍几种加载图片资源的方式之前,先确定一下图片的样式,如下
- 1
- 2
- 3
- 4
- 5
-
从当前RN项目中加载图片资源,和 html 一样,我们需要将图片放到 RN 项目中,这边我创建了个 img 文件夹,里面包含了需要使用到的图片资源
- 不设置尺寸的情况下,默认会根据图片资源的大小来展示图片
- 1
- 2
效果:
- 我们可以通过设置尺寸或者改变 Image 的填充模式来改变所展示的图片样式,这边就先约束宽高,后面会具体介绍怎么改变图片的填充模式
- 1
- 2
- 3
效果:
- 不设置尺寸的情况下,默认会根据图片资源的大小来展示图片
-
加载APP中的图片资源
-
以iOS为例,我们根据原生的开发习惯把图片放到 images.xcassets 中,这样在编译链接完成后,会将里面的图片统一打包以供使用
-
如果是Android的话,需要打开目录 android/app/src/res/ ,将图片按照安卓原生开发习惯将不同大小的图片方便放进四个文件夹内
-
完成了图片的导入,最好重新运行模拟器,以确保图片已经正确打包,然后就是使用图片的时候了
-
- 1
- 2
- 3
- 4
效果:
- 加载来自网络的图片,图片是我在淘宝上随便拿的图片网络地址,比较大,按照默认的填充方式,会将超出的部分剪裁掉(
注意:大括号内的是 uri 不是 url
)
- 1
- 2
- 3
效果:
Image组件填充效果试验场
- 看完了上面的内容,相信应该对 Image 的使用已经了解的差不多了吧,这里继续为各位见解 Image 的几种填充模式,改变 Image组件 的填充模式,需要使用到
resizeMode属性
,它包含了3个可选参数,下面就以加载网络图片为例 -
先加载网络图片,并设置样式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
效果:
- cover(
默认
):图片居中显示且不拉伸图片,超出的部分剪裁掉
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
效果:
- contain:容器完全容纳图片,图片等比例进行拉伸
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
效果:
- stretch:图片被拉伸至与容器大小一致,可能会发生变形
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
效果:
Image组件模拟使用场景
-
开发中,我们经常将图片作为背景,然后再其上面添加其他组件以丰富项目内容,让项目更美观,那在React Native中,很简单就可以做到
- 依旧以上面网络图片为例,但是先来修改下样式,看起来跟美观一些
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
效果:
- 接下来,我们就直接在 Image组件 上添加一个 Text组件
- 1
- 2
- 3
- 4
效果:
- 可以看出,Text组件 确实是盖在 Image组件上,所以在React Native中,将图片作为背景就是这么简单,并不需要进行太复杂的操作
- 依旧以上面网络图片为例,但是先来修改下样式,看起来跟美观一些
Image组件综合小项目
-
现在我们就结合前面的一下教程,用最通俗的方式做一个简单的QQ消息模块界面
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
Image组件的常见属性
-
属性方法
- onLoad(function):当图片加载成功后,回调该方法
- onLoadStart(function):当图片开始加载的时候调用该方法
- onLoadEnd(function):当图片加载失败回调该方法,不会管图片加载成功还是失败
- onLayout(function):当 Image 布局发生变化会调用该方法,调用代码
- 1
- 2
- resizeMode:缩放比例,(包含可选参数’cover’, ‘contain’, ‘stretch’),当该图片的尺寸超过布局的尺寸时,会根据设置 Mode 进行缩放或剪裁图片
- source{uri:string}:进行标记图片引用,该参数可以为一个网络
url地址
或者 一个本地路径
-
样式属性
- FlexBox:支持弹性盒子风格
- Transforms:支持属性动画
- backgroundcolor:背景颜色
- borderColor:边框颜色
- borderWidth:边框宽度
- borderRadius:边框圆角
- overflow:设置图片尺寸超过容器可以设置显示或隐藏(‘visible’, ‘hidden’)
- tintColor:颜色设置
- opacity:设置透明度(取值范围0.0(全透明)~ 1.0(不透明))
Image组件的介绍和使用
- Image 在开发中是经常接触到的组件,通过它,我们可以展示需要展示的图片资源,在 React Native 中该组件可以通过多种方式价值啊图片资源
-
在介绍几种加载图片资源的方式之前,先确定一下图片的样式,如下
- 1
- 2
- 3
- 4
- 5
-
从当前RN项目中加载图片资源,和 html 一样,我们需要将图片放到 RN 项目中,这边我创建了个 img 文件夹,里面包含了需要使用到的图片资源
- 不设置尺寸的情况下,默认会根据图片资源的大小来展示图片
- 1
- 2
效果:
- 我们可以通过设置尺寸或者改变 Image 的填充模式来改变所展示的图片样式,这边就先约束宽高,后面会具体介绍怎么改变图片的填充模式
- 1
- 2
- 3
效果:
- 不设置尺寸的情况下,默认会根据图片资源的大小来展示图片
-
加载APP中的图片资源
-
以iOS为例,我们根据原生的开发习惯把图片放到 images.xcassets 中,这样在编译链接完成后,会将里面的图片统一打包以供使用
-
如果是Android的话,需要打开目录 android/app/src/res/ ,将图片按照安卓原生开发习惯将不同大小的图片方便放进四个文件夹内
-
完成了图片的导入,最好重新运行模拟器,以确保图片已经正确打包,然后就是使用图片的时候了
-
- 1
- 2
- 3
- 4
效果:
- 加载来自网络的图片,图片是我在淘宝上随便拿的图片网络地址,比较大,按照默认的填充方式,会将超出的部分剪裁掉(
注意:大括号内的是 uri 不是 url
)
- 1
- 2
- 3
效果:
Image组件填充效果试验场
- 看完了上面的内容,相信应该对 Image 的使用已经了解的差不多了吧,这里继续为各位见解 Image 的几种填充模式,改变 Image组件 的填充模式,需要使用到
resizeMode属性
,它包含了3个可选参数,下面就以加载网络图片为例 -
先加载网络图片,并设置样式
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
效果:
- cover(
默认
):图片居中显示且不拉伸图片,超出的部分剪裁掉
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
效果:
- contain:容器完全容纳图片,图片等比例进行拉伸
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
效果:
- stretch:图片被拉伸至与容器大小一致,可能会发生变形
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
效果:
Image组件模拟使用场景
-
开发中,我们经常将图片作为背景,然后再其上面添加其他组件以丰富项目内容,让项目更美观,那在React Native中,很简单就可以做到
- 依旧以上面网络图片为例,但是先来修改下样式,看起来跟美观一些
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
效果:
- 接下来,我们就直接在 Image组件 上添加一个 Text组件
- 1
- 2
- 3
- 4
效果:
- 可以看出,Text组件 确实是盖在 Image组件上,所以在React Native中,将图片作为背景就是这么简单,并不需要进行太复杂的操作
- 依旧以上面网络图片为例,但是先来修改下样式,看起来跟美观一些
Image组件综合小项目
-
现在我们就结合前面的一下教程,用最通俗的方式做一个简单的QQ消息模块界面单元格
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
效果: