ReactNative学习十六-View属性及Style

1.View属性方法介绍

View属性方法介绍如下:

序号 名称 属性Or方法 类型 说明

1

accessibilityLabel 属性 string

2

accessible

属性

bool

当为true时,表示该元素是可以进行访问,

认情况下所有可触摸的元素控件都是可以访问的

3

onAccessibilityTap 方法

function

该当accessible为true的时候并且用户对控件View做了一个Tap(轻轻的触摸或者点击)的手势

4

onLayout 方法

function

当组件的布局发生变动的时候,会自动调用下面的方法

:{nativeEvent: { layout: {x,y,width,height}}}。

该事件当重新计算布局的时候会立即进行触发,不过界面可能不会立即刷新,

特别当布局动画正在加载中的时候。

5

onMagicTap 方法

function

当accessible为true的时候,当用户双指点击(Magic Tap)的时候,进行触发

其他的一些方法如下(下面很多是关于事件响应者链的,基本都是比较简单的,就不着重讲解的,有兴趣大家都可以去测试一下):

onMoveShouldSetResponder,onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,

onResponderReject,onResponderRelease,sans-serif; font-size:14px"> onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,sans-serif; font-size:14px"> pointerEvents enum('Box-none','none','Box-only','auto')(触摸事件是否可以进行穿透控件View);

removeClippedSubviews:该控件由于进行优化性能,尤其在一些滑动控件上面。该属性生效的要求如下:首先子视图的内容非常多,

已经超过父容器,并且子视图和父容器视图都有overflow:hidden风格样式。

【注】关于上面一些方法的具体使用,后面在讲到事件响应者的时候会进行着重讲解。

2.View风格Style介绍

在React Native中的Style风格布局,其实和CSS样式有很多相似的地方,这边介绍一下:

Style标签 说明 Style标签 说明
FlexBox 弹性布局(详细点击了解)

transforms

动画属性(详细点击了解)
backfaceVisibility enum('visible','hidden')定义界面翻转的

时候是否可见

backgroundColor 背景颜色
borderColor 边框颜色,这边几个就是代表上下左右变宽的颜色borderTopColor,borderRightColor,

borderBottomColor,borderLeftColor

borderRadius 边框圆角大小,其他几个是上下左右边框的圆角.borderTopLefTradius,borderTopRighTradius,

borderBottomLefTradius,borderBottomrighTradius

borderStyle 边框线的风格,这个和CSS样式一样的

,enum('solid','dotted','dashed')

borderWidth 边框宽度,另外四个是上下左右的边框宽度:borderTopWidth,borderRightWidth,borderBottomWidth,borderLeftWidth
opacity 设置透明度 overflow 设置内容超过容器显示还是隐藏
elevation 高度,设置Z轴,可以产生立体效果

下面是几个特殊的属性,这边直接介绍所有平台通用以及只在Android平台有效果属性

①.testID (全平台)

可以根据该testID在测试的时候定位该View

②:accessibilityComponentType(android平台)

定义是否该UI组件和原生组件一致化处理

③.accessibilityLiveRegion enum('none','polite','assertive') (android平台)

该当View发生更新时候的,是否需要通过用户,不过该只对Android4.4以及以上的平台设备有效果

④.collapsable (android平台)

布局合并优化使用

⑤.importantForAccessibility enum('auto','yes','no','no-hide-descendants') (android平台)

设置视图响应事件等级

⑥.needsOffscreenAlphaCompositing (android平台)

设置View是否需要渲染和半透明度效果处理的先后次序。

⑦.renderToHardwareTextureAndroid (android)

设置是否需要GPU进行渲染

转载出处:http://www.lcode.org/

相关文章

react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接...
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc ...