# Touchable

- category: Components
- chinese: 可点击容器
- type: 基本

---

## 设计思路
Touchable 通常用于定义带 press 事件的容器，例如按钮等。

## API

| 属性          | 说明                                                                                                                                      | 类型        | 默认值 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------ |
| onPress       | 点击事件                                                                                                                                  | function(e) |        |
| onLongPress   | 长按事件，仅 native                                                                                                                       | function(e) |        |
| activeStyle   | 手指按下时的样式                                                                                                                          | object      |        |
| style         | 样式                                                                                                                                      | object      |        |
| rippleEnabled | 是否在安卓端启用水波纹效果，水波纹效果只对 `backgroundColor` 的改变有效, 对 `backgroundImage` 线性渐变无效。且组件必须监听 onPress 事件。 | false       |

注意: 水波纹效果是安卓 Material Design 设计规范中的基础动效，具备安卓端特性， iOS 端不支持。


使用示例：

<img src="https://img.alicdn.com/tfs/TB1jBDccSBYBeNjy0FeXXbnmFXa-335-186.gif" width="200" />

```javascript
<Touchable
  style={styles.btn}
   activeStyle={styles.btnActive}
   rippleEnabled={true}
    onPress={()=>{}}
>
  <Text style={styles.btnText}>Hello Nuke</Text>
</Touchable>

const styles ={
  btn: {
    height:88,
    backgroundColor:'#ffffff',
    color:'#f44336',
    borderWidth:2,
    borderStyle:'solid',
    borderColor:'#f44336',
    justifyContent:'center',
    alignItems:'center'
  },
  btnText:{
    color:'#f44336',
  },
  btnActive: {
    backgroundColor:'#f44336'
  }
}
```

## 其他
- bug、建议联系 <a href="dingtalk://dingtalkclient/action/sendmsg?dingtalk_id=kjwo3w5">@翊晨</a>
- 钉钉交流群

<img src="https://img.alicdn.com/tfs/TB101EESpXXXXXFXpXXXXXXXXXX-1122-1362.jpg" width="260" />