---
name: "PageContainer"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "PageContainer - 页面容器"
---

## PageContainer

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

### 描述

页面容器，用于从屏幕边缘或底部弹出半屏/全屏内容，支持遮罩、圆角、进入离开动画及生命周期回调。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `show` | `boolean` | 否 | `false` | 是否显示容器组件 |
| `duration` | `number` | 否 | `300` | 动画时长，单位毫秒 |
| `zIndex` | `number` | 否 | `100` | z-index 层级 |
| `overlay` | `boolean` | 否 | `true` | 是否显示遮罩层 |
| `position` | `"top" \| "bottom" \| "right" \| "center"` | 否 | `"bottom"` | 弹出位置 |
| `round` | `boolean` | 否 | `false` | 是否显示圆角 |
| `overlayStyle` | `string \| any` | 否 | - | 自定义遮罩层样式 |
| `customStyle` | `string \| any` | 否 | - | 自定义弹出层样式 |
| `onBeforeEnter` | `(event: any) => void` | 否 | - | 进入前触发 |
| `onEnter` | `(event: any) => void` | 否 | - | 进入中触发 |
| `onAfterEnter` | `(event: any) => void` | 否 | - | 进入后触发 |
| `onBeforeLeave` | `(event: any) => void` | 否 | - | 离开前触发 |
| `onLeave` | `(event: any) => void` | 否 | - | 离开中触发 |
| `onAfterLeave` | `(event: any) => void` | 否 | - | 离开后触发 |
| `onClickOverlay` | `(event: any) => void` | 否 | - | 点击遮罩层时触发 |

### 示例代码

#### 基础用法

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

export default function BasicPageContainer() {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Button onClick={() => setShow(true)}>从顶部弹出</Button>
      <PageContainer
        show={show}
        position="top"
        overlay={false}
        onClickOverlay={() => setShow(false)}
      >
        <View style={{ height: '200px', padding: '20px' }}>
          <Button onClick={() => setShow(false)}>关闭</Button>
        </View>
      </PageContainer>
    </View>
  );
}
```

#### 从底部弹出带遮罩

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

export default function BottomPageContainer() {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Button onClick={() => setShow(true)}>打开底部弹层</Button>
      <PageContainer
        show={show}
        position="bottom"
        round
        overlay
        duration={300}
        onClickOverlay={() => setShow(false)}
      >
        <View
          style={{
            minHeight: '300rpx',
            padding: '40rpx',
            backgroundColor: '#fff',
          }}
        >
          <Text style={{ fontSize: '32rpx', marginBottom: '20rpx' }}>
            底部弹层内容
          </Text>
          <Button onClick={() => setShow(false)}>关闭</Button>
        </View>
      </PageContainer>
    </View>
  );
}
```

#### 自定义样式与生命周期

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

export default function LifecyclePageContainer() {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Button onClick={() => setShow(true)}>打开自定义弹层</Button>
      <PageContainer
        show={show}
        position="bottom"
        round
        overlay
        zIndex={200}
        duration={400}
        overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.5)' }}
        customStyle={{ backgroundColor: '#f5f5f5' }}
        onBeforeEnter={() => console.log('进入前')}
        onEnter={() => console.log('进入中')}
        onAfterEnter={() => console.log('进入后')}
        onBeforeLeave={() => console.log('离开前')}
        onLeave={() => console.log('离开中')}
        onAfterLeave={() => console.log('离开后')}
        onClickOverlay={() => setShow(false)}
      >
        <View style={{ padding: '40rpx', minHeight: '300rpx' }}>
          <Text style={{ fontSize: '32rpx' }}>自定义样式弹层</Text>
          <Button onClick={() => setShow(false)} style={{ marginTop: '20rpx' }}>
            关闭
          </Button>
        </View>
      </PageContainer>
    </View>
  );
}
```