View

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

下面的例子创建了一个View,包含了两个有颜色的方块和一个自定义的组件,并且设置了一个内边距:

class ViewColoredBoxesWithText extends Component {

  render() {

    return (

      <View style={{flexDirection: 'row', height: 1, padding: 0.2}}>

        <View style={{backgroundColor: 'blue', flex: 0.3}} />

        <View style={{backgroundColor: 'red', flex: 0.5}} />

        <Text>Hello World!</Text>

      </View>

    );

  }

}

View设计初衷是要和StyleSheet搭配使用,这样可以是代码更清晰,性能更高,内联的样式也是可以使用的。

属性

billboarding?  PropTypes.oneOfType(['off', 'on'])

在桌面或者手机上运行时,View是否可以自动跟随你的运动旋转,在VR上无效。

这个属性会复写你用transform: [{rotate}]写的逻辑,因为这个是自动旋转的。

cursorVisibilitySlop?  PropTypes.oneOfType([PropTypes.number, EdgeInsetsPropType])

cursorVisbility='auto'表示指针在view可见之前离view有多远,默认是{top: 0, bottom: 0, left: 0, right: 0},这就是说鼠标指针只有在和view接触的时候才可见。

举个例子,让指针在view的上面或者下面10cm处就显示: cursorVisibilitySlop={'{{t'}op: 0.10, bottom: 0.10, left: 0, right: 0}}

hitSlop  PropTypes.oneOfType([PropTypes.number, EdgeInsetsPropType,])

定义了触摸事件离View有多远的距离,一般触摸目标的参考值是30-40点/像素密度,决定于像素值。

举个例子,如果一个触摸的View有20的触摸高度,可以用hitSlop={{top: 10, bottom: 10, left: 0,right: 0}}扩展到40。

触摸区域从来不会超出父组件的边界,如果触摸到两个重叠的View时,相邻组件的Z-idnex总是会优先考虑的,也就是说先根据Z-index判断哪个View在上面

onEnter?:   PropTypes.func

进入View的回调

onExit?:   PropTypes.func

退出View的回调

onHeadPose?:   PropTypes.func

注视View或者和view交互时的回调,传递的事件如下:

{nativeEvent: {

  headMatrix: headMatrixArray,

  viewMatrix: viewMatrixArray,

  target: target,

  source: source,

}

onHeadPoseCaptured?:   PropTypes.func
onInput?:   PropTypes.func

用户输入时的回调

onInputCaptured?:   PropTypes.func
onLayout  PropTypes.func

加载完之后回调,可以用下面的代码改变: {nativeEvent: { layout: {x, y, width, height}}}

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

onMove?:   PropTypes.func

在View内移动时的回调

pointerEvents  PropTypes.oneOf([ 'box-none', 'none', 'box-only', 'auto', ])

控制View是否成为触摸事件的目标。

  • 'auto':View可以成为触摸事件的目标。
  • 'none':View从不成为触摸事件的目标。
  • 'box-none':View不成为触摸事件的目标,但子View可以,就跟下面的CSS样式一样:
  • .box-none {

      pointer-events: none;

    }

    .box-none * {

      pointer-events: all;

    }

  • 'box-only':View可以成为触摸事件的目标,但子View不可以,就跟下面的CSS样式一样:
  • .box-only {

      pointer-events: all;

    }

    .box-only * {

      pointer-events: none;

    }

因为 pointerEvents 不影响布局, 所以我们单独提供了这个方法,并没有把 pointerEvents 放在style里面. 在有些平台上,我们需要把它声明成一个 class . 用不用 style 取决于平台.

style  style
      Layout Props...  查看左侧导航的"布局属性"
      Shadow Props...
      Transforms...  查看左侧导航的"三维坐标、变换"
      backgroundColor   color
      borderBottomLeftRadius   number
      borderBottomRightRadius   number
      borderBottomWidth   number
      borderColor   color
      borderLeftWidth   number
      borderRadius   number
      borderRightWidth   number
      borderTopLeftRadius   number
      borderTopRightRadius   number
      borderTopWidth   number
      borderWidth   number
      opacity   number
testID?:   PropTypes.string

端对端测试定位view的

将禁用 'layout-only view removal' 对 view的优化!