专栏首页刘望舒React Native组件(二)View组件解析

React Native组件(二)View组件解析

前言

了解了RN的组件的生命周期后,我们接着来学习RN的具体的组件。View组件是最基本的组件,也是首先要掌握的组件,这一篇我们来学习View组件。

1.概述

View组件是RN中最基本的组件,绝大部分的组件都继承了View组件的属性,所以学习其他组件前,要首先掌握View组件。 View组件是一个支持Flexbox布局、样式、一些触摸处理的容器,它可以放到其它的组件里,也可以有任意多个任意类型的子组件。View组件对应着多个平台的视图,比如Android的View以及iOS的UIView。 由于View组件的属性非常多,这里主要介绍一些常用的属性。

2.style属性

style属性作为组件属性中的一种,它包含了多种属性,这里对它们意义进行讲解。

2.1 Flexbox

View组件的Flexbox属性这里就不再介绍了,详细请看React Native探索(四)Flexbox布局详解这一篇文章。正是因为View组件提供了Flexbox属性,因此,继承了View组件的其他组件也都具有Flexbox属性。

2.2 shadow相关 (iOS)

View组件提供了四种阴影属性如下表:

设置View组件的阴影属性并没有什么意义,在View组件中定义这些样式是为了让继承它的组件去各自实现这些效果,比如Text组件。需要注意的是只有iOS平台能使用shadow属性。

2.3 elevation (Android)

elevation取值为number。Android平台没有shadow来设置阴影,但是,可以用elevation属性来间接的设置阴影。它使用Android原生的 elevation API来设置组件的高度,这样就会在界面上呈现出阴影的效果,此属性仅支持Android 5.0及以上版本。

在iOS平台运行如上代码,效果为:

在Android平台运行效果则为:

很明显,elevation的效果远远不及shadow,这时我们可以采用第三方库react-native-shadow。

2.4 border相关

borderStyle的取值为 enum(‘solid’, ‘dotted’, ‘dashed’),用来设置边框的风格,三个值分别对应着实线边框、点状边框和虚线边框,默认值为solid。 除了可以设置边框的风格,还可以用定义边框的颜色和边框的圆角。边框的颜色设置有borderColor、borderTopColor 、borderRightColor 、borderBottomColor 、borderLeftColor,取值都为string,通常情况下用borderColor就足够了。 边框的圆角设置有borderRadius 、borderTopLeftRadius 、borderTopRightRadiu、borderBottomLeftRadius 、borderBottomRightRadius,取值为number。

上面的例子用到了border相关的属性。需要注意的是,如果不设置borderRadius,borderStyle的dotted和dashed的取值会无效,效果如下图所示。

2.5 transform

transform的取值为:

[{perspective: number},{rotate: string},{rotateX: string},{rotateY: string},{rotateZ: string},{scale: number},{scaleX: number},{scaleY: number},{translateX: number},{translateY: number},{skewX: string},{skewY: string}]

transform的取值总的来说,共分为四种类型:translate、scale、rotate和skew,分别用来设置View组件的平移、缩放、旋转和倾斜。

View组件用transform属性的效果不是很明显,绝大部分组件都继承了View组件的transform属性,比如Text。我们改写2.4小节中的例子,将textStyle改为如下代码:

运行效果如下:

对于translate、scale、rotate的效果,Android开发者会非常熟悉,那么rotate和skew有什么区别呢?再来修改textStyle:

运行效果如下:

从两个图的效果可以看出,rotate和skew的区别就是:rotate在旋转的同时,不会改变Text组件的形态,而skew则随着倾斜角度的改变,Text组件的形态也会发生相应的变化。如果我们加大skew的倾斜角度,比如60deg,Text组件的形态则会变为下图的效果。

2.6 overflow (iOS)

overflow取值为enum(‘visible’, ‘hidden’)。它用来定义当View组件的子组件的宽高超过View组件宽高时的行为,默认值为hidden,即隐藏超出的部分。overflow只在iOS平台有效,在Android平台即使设置overflow为visible,呈现的还会是hidden的效果。

2.7 backgroundColor

backgroundColor取值为string。它用来设定背景颜色,默认的颜色为非常浅的灰色,只有Text和TextInput组件继承了父组件的背景颜色,其他的组件都要设置自己的背影颜色。

2.8 opacity

opacity 的取值为0到1,当值为0时,表示组件完全透明,而值为1时,则表示组件完全不透明。

3.属性

3.1 触摸事件回调函数

触摸事件回调函数用来处理用户的触摸屏幕操作,一般情况下,触摸事件都是在其他组件中完成的。关于触摸事件是一个比较大的知识点,这里只介绍这些触摸事件回调函数的作用。

  • onStartShouldSetResponder: 触摸事件为touchDown时,是否申请成为事件响应者,接收触摸事件。如果返回true,则表示组件需要成为事件响应者。
  • onStartShouldSetResponderCapture:触摸事件为touchDown时,是否要拦截此事件,阻止子组件接收该事件,如果返回true,则表示要进行拦截。
  • onMoveShouldSetResponder : 触摸事件为TouchMove时,是否申请成为事件响应者,接收触摸事件。如果返回true,则表示组件需要成为事件响应者。
  • onMoveShouldSetResponderCapture :触摸事件为TouchMove时,是否要拦截此事件,阻止子组件接收该事件。
  • onResponderGrant: 申请成为事件响应者成功,组件开始接收触摸事件 。
  • onResponderReject: 申请成为事件响应者失败,其他组件正在进行事件处理 。
  • onResponderMove:触摸手指移动的事件(TouchMove)。
  • onResponderTerminationRequest:在组件成为事件响应者期间,其他组件申请成为响应者,返回为true,则表示同意释放响应者角色。
  • onResponderTerminate:如果组件释放响应者角色,会回调该函数,通知组件事件响应处理被终止了。这个回调也会发生在系统直接终止组件的事件处理,例如用户在触摸操作过程中,突然来电话的情况。
  • onResponderRelease:表示触摸完成(touchUp)的时候的回调,表示用户完成了本次的触摸交互。

3.2 pointerEvents

pointerEvents的取值为enum(‘box-none’, ‘none’, ‘box-only’, ‘auto’) 。它用来控制当前视图是否可以作为触控事件的目标。 在开发中,很多组件是被布局到手机界面上的,其中一些组件会遮盖住它的位置下方的组件,有一些场景需要被遮盖住的组件来处理事件。比如一个地图组件上覆盖了一个图像组件用来显示信息,但是我们不想这个图像组件影响用户的手指拖动地图的操作,这时就可以使用图像组件从View组件继承得到的pointerEvents属性来解决这个问题。 pointerEvents的取值含义如下所示:

  • none:组件自身不能作为触控事件的目标,交由父组件处理。
  • box-none:组件自身不能作为触控事件的目标,但其子组件可以。
  • box-only:组件自身可以作为触控事件的目标,但其子组件不能。
  • auto:组件可以作为触控事件的目标。

3.3 removeClippedSubviews

removeClippedSubviews的取值为bool。它的一个特殊的与性能优化相关的属性,通常在ListView和ScrollView中使用,当组件有很多子组件不在屏幕显示范围时,可以将removeClippedSubviews设置为true,允许释放不在显示范围子组件,从而优化了性能。需要注意的是,要想让此属性生效,要确保overflow属性为默认的hidden。

3.4 动画相关

needsOffscreenAlphaCompositing (Android) needsOffscreenAlphaCompositing的取值为bool,是Android平台独有的属性。它用来决定视图是否要先离屏渲染再进行半透明度处理,来确保颜色和混合效果正确。为了正确的显示透明表现而进行离屏渲染会带来极大的开销,对于非原生开发者来说很难调试,因此,它的默认值为false。

renderToHardwareTextureAndroid (Android) renderToHardwareTextureAndroid的取值为bool,同样是是Android平台独有的属性。它用来决定视图是否要把它本身(以及所有的子视图)渲染到一个GPU上的硬件纹理中。 在Android平台上,这对于只修改透明度、旋转、位移和缩放的动画和交互是很有用的:视图不必每次都重新绘制,显示列表也不需要重新执行,纹理可以被重用于不同的参数。负面作用是这会大量消耗显存,所以当交互/动画结束后应该把此属性设置回false。

shouldRasterizeIOS (iOS) shouldRasterizeIOS的取值为bool,是iOS平台独有的属性。它决定视图是否需要在被混合之前绘制到一个位图上。 这对于动画和交互来说是有很有用的,它不会修改这个组件的尺寸和它的子组件。举例来说,当我们移动一个静态视图的位置的时候,栅格化允许渲染器重用静态视图的缓存位图,并快速合成。 栅格化会导致离屏的绘图传递,位图会消耗内存。所以使用此属性需要进行充分的测试和评估。

还有一些View属性这里没有给出,比如RN为了方便失能人士使用手机而提供的相关属性等等,具体的属性请查看官方文档。

本文分享自微信公众号 - 刘望舒(liuwangshuAndroid),作者:刘望舒

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-06-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 知乎 Android 客户端组件化实践

    知乎 Android 客户端最早使用的是最常见的单工程 MVC 架构,所有业务逻辑都放在了主工程 Module 里,网络层和一些公共代码分别被抽成了一个 Mod...

    用户1269200
  • Flutter最佳入门方式:写一个计算器

    工作以来,我在学习新知识的时候,常常与在应试教育阶段被传授的方法作斗争——把书本的内容100%复制到脑中才算学会吗?不会被使用或者不常用的知识,花费大量功夫去记...

    用户1269200
  • React Native组件(三)Text组件解析

    前言 此前介绍了最基本的View组件,接下来就是最常用的Text组件,对于Text组件的一些常用属性,这篇文章会给出简单的例子以供学习。 1 概述 Text组...

    用户1269200
  • 浅谈Vue2中provide和inject使用

    上面这段话出自官方,内容也比较好理解,就是通常数据传递一层,我们使用prop就可以很好的解决,如果传递多层,再使用prop就不是很好的方案,这时需要provid...

    青年码农
  • Vue2.0子父组件通信

    1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child.vue的中创建props,然后创建一个名为message的属...

    疯狂的技术宅
  • React Native组件生命周期

    概述 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点。就像 Android 开发中组件 一样,Re...

    xiangzhihong
  • wx小程序的自定义组件

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invi...

    河湾欢儿
  • 组件库源码中这些写法你掌握了吗?

    答案:像iview源码中clickoutside引入了v-click-outside-x作为依赖,感兴趣的童鞋可以看文档链接

    树酱
  • Taro UI 2.0 发布:新增自定义主题功能,适配更多小程序

    转眼间,Taro UI 发布已有半年,在此期间,不断完善组件库的功能和特性,新增了许多组件和小工具,包括但不限于:

    京东技术
  • Vue 在父(子)组件引用其子(父)组件方法和属性

    <button @click="callChildMethod()">父组件调用子组件方法</button>

    授客

扫码关注云+社区

领取腾讯云代金券