美文网首页React Native相关iOS学习笔记iOS Developer
React Native从入门到深入三、组件的讲解(1) Vie

React Native从入门到深入三、组件的讲解(1) Vie

作者: Zax_Smile | 来源:发表于2016-08-29 14:06 被阅读222次

一.View的作用:

作为创建UI时最基础的组件,View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器,并且它可以放到其它的视图里,也可以有任意多个任意类型的子视图。不论在什么平台上,View都会直接对应一个平台的原生视图,无论它是UIView、还是android.view.View。

二。View与样式的关联

View与样式的关联分为内联式和外联式。View的设计初衷是和StyleSheet搭配使用,这样可以使代码更清晰并且获得更高的性能。尽管内联样式也同样可以使用。

三。属性

3.1基本属性

Flexbox...  弹性布局

ShadowPropTypesIOS#style...

Transforms... 动画

backfaceVisibilityenum('visible', 'hidden')  

backgroundColor  背景颜色

borderColor  边框颜色

borderTopColor 

borderRightColor

borderBottomColor

borderLeftColor

borderRadius

borderTopLeftRadius

borderTopRightRadius

borderBottomLeftRadius

borderBottomRightRadius

borderStyleenum('solid', 'dotted', 'dashed')

borderWidth

borderTopWidth

borderRightWidth

borderBottomWidth

borderLeftWidth

opacitynumber

overflowenum('visible', 'hidden')

androidelevationnumber

3.2交互属性

accessible 当此属性为true时,表示此视图时一个启用了无障碍功能的元素。默认情况下,所有可触摸操作的元素都是无障碍功能元素。

onAccessibilityTap    function#

当accessible为true时,如果用户对一个已选中的无障碍元素做了一个双击手势时,系统会调用此函数。(译注:此事件是针对残障人士,并非是一个普通的点击事件。如果要为View添加普通点击事件,请直接使用Touchable系列组件替代View,然后添加onPress函数)。

onLayout   function

当组件挂载或者布局变化的时候调用,参数为:

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

这个事件会在布局计算完成后立即调用一次,不过收到此事件时新的布局可能还没有在屏幕上呈现,尤其是一个布局动画正在进行中的时候。

onMagicTapfunction

当accessible为true时,如果用户做了一个双指轻触(Magic tap)手势,系统会调用此函数。

onMoveShouldSetResponder function

onMoveShouldSetResponderCapture function

onResponderGrant  function

对于大部分的触摸处理,你只需要用TouchableHighlight或TouchableOpacity包装你的组件

onResponderMove function

onResponderReject function

onResponderRelease function

onResponderTerminate function

onResponderTermination Requestfunction

onStartShouldSetResponder function

onStartShouldSetResponderCapture  function

pointerEventsenum('box-none', 'none', 'box-only', 'auto')

用于控制当前视图是否可以作为触控事件的目标。

auto:视图可以作为触控事件的目标。

none:视图不能作为触控事件的目标。

box-none:视图自身不能作为触控事件的目标,但其子视图可以

removeClippedSubviewsbool

这是一个特殊的性能相关的属性,由RCTView导出。在制作滑动控件时,如果控件有很多不在屏幕内的子视图,会非常有用。

要让此属性生效,首先要求视图有很多超出范围的子视图,并且子视图和容器视图(或它的某个祖先视图)都应该有样式overflow: hidden。

相关文章

网友评论

    本文标题:React Native从入门到深入三、组件的讲解(1) Vie

    本文链接:https://www.haomeiwen.com/subject/dfyxettx.html