# TouchableView - 可点击视图组件

## 概述

`TouchableView` 是一个可点击的视图容器组件，基于 `TouchableWithoutFeedback` 封装，提供点击/长按等交互能力，并在按下时提供背景色反馈。

> 注意：尽量使用**单层** `TouchableView` 包裹交互区域，避免多层嵌套导致 responder 冲突/事件不符合预期。

## 基本信息

| 信息项 | 内容 |
|--------|------|
| 中文名称 | 可点击视图 |
| 描述 | 支持点击、长按交互的视图容器，按下时提供背景色反馈 |
| 位置 | `src/hyperOS/components/touchableView` |

## 导出

```ts
import { TouchableView, PressTypeEnum } from '.../touchableView';
```

## 类型定义

### PressTypeEnum

| 值 | 说明 |
| --- | --- |
| `list` | 使用列表按压色（`otherListPressed`） |
| `button` | 使用按钮按压色（`otherButtonPressed`） |

### TouchableViewProps

| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| **delayLongPress** | `number` | 否 | `100` | 长按触发延时（ms） |
| **delayPressIn** | `number` | 否 | `100` | 按下触发延时（ms） |
| **delayPressOut** | `number` | 否 | `100` | 抬起触发延时（ms） |
| **disabled** | `boolean` | 否 | `false` | 是否禁用交互 |
| **onLongPress** | `() => void` | 否 | - | 长按回调 |
| **onPress** | `() => void` | 否 | - | 点击回调 |
| **onPressOut** | `() => void` | 否 | - | 抬起回调（组件内部会先恢复按下态，再调用该回调） |
| **viewStyle** | `ViewStyle \| StyleProp<ViewStyle>` | 否 | `{}` | 容器样式（最终会以数组形式与按下态背景色合并） |
| **children** | `React.ReactNode` | 否 | - | 子节点 |
| **pressType** | `PressTypeEnum` | 否 | `PressTypeEnum.List` | 按压反馈类型 |
| **accessible** | `AccessibilityPropsType['accessible']` | 否 | - | 无障碍：是否可访问 |
| **accessibilityHint** | `AccessibilityPropsType['accessibilityHint']` | 否 | - | 无障碍：提示信息 |
| **accessibilityLabel** | `AccessibilityPropsType['accessibilityLabel']` | 否 | - | 无障碍：label |

> 说明：该组件会将 `props` 透传给 `TouchableWithoutFeedback`（内部同时会覆写/注入 `delay*`、`disabled`、`onPressIn`、`onPressOut`、无障碍相关 props）。

## 行为说明

- 按下时内部状态 `inPress=true`，容器背景色切换为按压色：
  - `pressType=list`：`colorToken.otherListPressed`
  - `pressType=button`：`colorToken.otherButtonPressed`
- 抬起时 `inPress=false`，并在最后调用 `onPressOut?.()`。

## 基础用法

```tsx
import React from 'react';
import { Text } from 'react-native';
import { TouchableView, PressTypeEnum } from '.../touchableView';

export const Example = () => (
  <TouchableView
    onPress={() => console.log('press')}
    onLongPress={() => console.log('long press')}
    pressType={PressTypeEnum.List}
  >
    <Text>点击我</Text>
  </TouchableView>
);
```

## 常见场景

### 列表项按压反馈

```tsx
<TouchableView pressType={PressTypeEnum.List} onPress={goDetail} viewStyle={styles.item}>
  {children}
</TouchableView>
```

### 按钮按压反馈

```tsx
<TouchableView pressType={PressTypeEnum.Button} onPress={submit} viewStyle={styles.button}>
  {children}
</TouchableView>
```