自我成长——Touchable组件Touchable组件 rn有提供一些比较基础的触摸组件，比如Touchable组件

Touchable组件

rn有提供一些比较基础的触摸组件，比如Touchable组件

TouchableWithoutFeedback：这个组件在点击后没有任何的视觉反馈，并且只支持一个子节点（不能为0 && 不能>1），并且该组件不支持加style样式。
```
<TouchableWithoutFeedback onPress={onPress}>
     <View style={styles.button}>
          <Text>click me！</Text>
     </View>
</TouchableWithoutFeedback>
```
delayLongPress: 从 onPressIn 开始，到 onLongPress 被调用的延迟。单位:毫秒

delayPressIn: 从触摸操作开始到 onPressIn 被调用的延迟。单位:毫秒

delayPressOut:从触摸操作结束开始到 onPressOut 被调用的延迟。单位:毫秒

disabled:如果设为 true，则禁止此组件的一切交互

hitSlop:这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset变得更大。 注意： 触摸范围不会超过父视图的边界，也不会影响原先和本组件层叠的视图（保留原先的触摸优先级）

pressRetentionOffset:在当前视图不能滚动的前提下指定这个属性，可以决定当手指移开多远距离之后，会不再激活按钮。但如果手指再次移回范围内，按钮会被再次激活。只要视图不能滚动，你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。

还有一些常用的事件：

onBlur onFocus onLayout onLongPress onPress onPressIn onPressOut
TouchableOpacity：当使用这个组件并点击时，组件的透明度会根据你设置的activeOpacity而变化，其中activeOpacity这个值的设定范围在0～1之间，默认值为0.2

并且该组件还有一些Apple Tv限定的属性：
- enabled: 如果为"true"，则启用动画效果。默认为"true"。
- shiftDistanceX: X轴的位移距离默认值2.0.
- shiftDistanceY: Y轴的位移距离默认值 2.0.
- tiltAngle: 倾斜角默认值0.05.
- magnification: 放大默认值 1.0.
- pressMagnification: 点击区域放大默认值 1.0.
- pressDuration: 点击持续时间默认值0.3.
- pressDelay: 点击延时默认值 0.0.
```
<TouchableOpacity
          style={styles.button}
          onPress={this.onPress}
          activeOpacity={0.8}>
      <Text>click me！</Text>
</TouchableOpacity>
```
TouchableHighlight：点击改组件时，不仅透明度会变低，还可以设置底层颜色，使得视图变暗或变亮。

onHideUnderlay：底层颜色被隐藏的时候调用

onShowUnderlay：底层颜色被显示的时候调用

underlayColor：底层颜色
```
<TouchableHighlight
  activeOpacity={0.8}
  underlayColor="red"
  onPress={() => alert('Click Yesssss!')}>
  <MyComponent />
</TouchableHighlight>;
```
TouchableNativeFeedback（仅限Android平台） ：该组件利用原生状态来渲染触摸的反馈，其点击显示的背景可以通过background属性来自定义。

该属性在Android5.0以后可实现点击展示水波纹动效

属性：

background:决定在触摸反馈的时候显示什么类型的背景

useForeground: 当想要在水波纹效果，并且不被背景遮盖住的时候，可以设置为true（该属性使用前需要先通过调用TouchableNativeFeedback.canUseNativeForeground() 查看是否支持，并且需要Android版本>=6.0）

方法：

static SelectableBackground(rippleRadius: ?number):

static SelectableBackgroundBorderless(rippleRadius: ?number):

static Ripple(color: string, borderless: boolean, rippleRadius: ?number):
```
<TouchableNativeFeedback
        onPress={() => {
          alert('Click Yesssss!')
        }}
        //设置背景为水波纹效果，颜色为红色，borderless：true则会涟漪到视图范围外
        background={TouchableNativeFeedback.Ripple('red', true)}>
     <View style={styles.touchable}>
         <Text style={styles.text}>TouchableNativeFeedback</Text>
     </View>
</TouchableNativeFeedback>
```
ps：TouchableOpacity和TouchableHighlight属性都继承自TouchableWithoutFeedback