---
name: "View"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "View - 用于页面布局的元素"
---

## View

> [VERSION] @ray-js/ray >= 0.5.10

### 描述

用于页面布局的容器组件，支持 flex 布局、自定义样式等，是构建页面的基础块级元素。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `hoverClassName` | `string` | 否 | `"none"` | 指定按下去的样式类；为 none 时没有点击态效果 |
| `hoverStartTime` | `number` | 否 | `20` | 按住后多久出现点击态，单位毫秒 |
| `hoverStayTime` | `number` | 否 | `70` | 手指松开后点击态保留时间，单位毫秒 |
| `hoverable` | `boolean` | 否 | `true` | 是否启用可触摸响应的 hover 样式 |

### 示例代码

#### 基础用法

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function BasicView() {
  return (
    <View
      style={{
        height: '120rpx',
        backgroundColor: '#e67d1b',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}
      onTouchStart={() => console.log('touch start')}
      onTouchEnd={() => console.log('touch end')}
      onClick={() => console.log('click')}
    >
      <Text style={{ color: '#fff' }}>点击容器</Text>
    </View>
  );
}
```

#### Flex 布局

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function FlexView() {
  return (
    <View
      style={{
        display: 'flex',
        flexDirection: 'row',
        width: '100%',
      }}
    >
      <View
        style={{
          flex: 1,
          height: '120rpx',
          backgroundColor: '#e67d1b',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          marginRight: '10rpx',
        }}
        onClick={() => console.log('A')}
      >
        <Text style={{ color: '#fff' }}>A</Text>
      </View>
      <View
        style={{
          flex: 1,
          height: '120rpx',
          backgroundColor: '#e67d1b',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        onClick={() => console.log('B')}
      >
        <Text style={{ color: '#fff' }}>B</Text>
      </View>
    </View>
  );
}
```

#### Hover 点击态

```tsx
import React from 'react';
import { View, Text } from '@ray-js/ray';

export default function HoverView() {
  return (
    <View style={{ padding: '20rpx' }}>
      <View
        hoverable
        style={{
          height: '100rpx',
          backgroundColor: '#e67d1b',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          marginBottom: '20rpx',
        }}
      >
        <Text style={{ color: '#fff' }}>hoverable（按下透明度降低）</Text>
      </View>
      <View
        hoverable
        hoverClassName="custom-hover"
        hoverStartTime={100}
        hoverStayTime={300}
        style={{
          height: '100rpx',
          backgroundColor: '#1890ff',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        <Text style={{ color: '#fff' }}>
          自定义 hover（延迟 100ms 出现，保留 300ms）
        </Text>
      </View>
    </View>
  );
}
```