[TOC]

概述

作为创建 UI 时最基础的组件，View 是一个支持 Flexbox 布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，View 都会直接对应一个平台的原生视图，无论它是 UIView、div还是 android.view.View。下面的例子创建了一个 View，包含了两个有颜色的方块和一个自定义的组件，并且设置了一个内边距：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class ViewColoredBoxesWithText extends Component {
  render() {
    return (
      <View
        style={{
          flexDirection: "row",
          height: 100,
          padding: 20
        }}
      >
        <View style={{ backgroundColor: "blue", flex: 0.3 }} />
        <View style={{ backgroundColor: "red", flex: 0.5 }} />
        <Text>Hello World!</Text>
      </View>
    );
  }
}

合成触摸事件

关于触摸事件的文章参考：https://github.com/kmagiera/react-native-gesture-handler

用于 View 响应属性 (例如, onResponderMove), 合成触摸事件采用以下的格式:

nativeEvent

  • changedTouches - 从上一次事件以来的触摸事件数组。
  • identifier - 触摸事件的 ID。
  • locationX - 触摸事件相对元素位置的 X 坐标。
  • locationY - 触摸事件相对元素位置的 Y 坐标。
  • pageX - 触摸事件相对根元素位置的 X 坐标。
  • pageY - 触摸事件相对根元素位置的 Y 坐标。
  • target - 接收触摸事件的元素 ID.
  • timestamp - 触摸事件的时间标记，用来计算速度.
  • touches - 屏幕上所有当前触摸事件的数组.

查看 Props

  • onStartShouldSetResponder //设置这个视图是否要响应 touch start 事件。
  • accessibilityLabel //设置当用户与此元素交互时，“读屏器”（对视力障碍人士的辅助功能）阅读的文字
  • accessibilityHint
  • hitSlop //定义触摸事件在距离视图多远以内时可以触发的。
  • nativeID
  • onAccessibilityTap
  • onLayout
  • onMagicTap
  • onAccessibilityEscape
  • onMoveShouldSetResponder // 设置这个视图是否要响应 touch move 事件
  • onMoveShouldSetResponderCapture //如果父视图想要阻止子视图响应 touch move 事件时，它就应该设置这个方法并返回 true
  • onResponderGrant
  • onResponderMove
  • onResponderReject
  • onResponderRelease
  • onResponderTerminate
  • onResponderTerminationRequest
  • accessible
  • onStartShouldSetResponder // 设置这个视图是否要响应 touch start 事件。
  • onStartShouldSetResponderCapture // 如果父视图想要阻止子视图响应 touch start 事件，它就应该设置这个方法并返回 true。
  • pointerEvents
  • removeClippedSubviews
  • style
  • testID
  • accessibilityLiveRegion
  • collapsable
  • importantForAccessibility
  • needsOffscreenAlphaCompositing
  • renderToHardwareTextureAndroid
  • accessibilityRole
  • accessibilityStates
  • accessibilityViewIsModal
  • accessibilityElementsHidden
  • accessibilityIgnoresInvertColors
  • shouldRasterizeIOS

pointerEvents

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

  • auto：视图可以作为触控事件的目标。
  • none：视图不能作为触控事件的目标。
  • box-none：视图自身不能作为触控事件的目标，但其子视图可以。类似于你在 CSS 中这样设置:
1
2
3
4
5
6
.box-none {
     pointer-events: none;
}
.box-none * {
     pointer-events: all;
}
  • ‘box-only’:视图自身可以作为触控事件的目标，但其子视图不能。类似于你在 CSS 中这样设置:
1
2
3
4
5
6
.box-only {
     pointer-events: all;
}
.box-only * {
     pointer-events: none;
}

因为pointerEvents 不影响布局和外观，我们选择不将pointerEvents放到style中。不管如何，在某些平台，我们需要实现一个className类。是否使用style是一个平台的实现细节。