PageContainer

版本要求:
@ray-js/ray≥0.5.10

描述

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

属性

属性类型必填默认值说明
showboolean否false是否显示容器组件
durationnumber否300动画时长，单位毫秒
zIndexnumber否100z-index 层级
overlayboolean否true是否显示遮罩层
position"top" | "bottom" | "right" | "center"否bottom弹出位置
roundboolean否false是否显示圆角
overlayStylestring | any否-自定义遮罩层样式
customStylestring | any否-自定义弹出层样式
否-进入前触发
否-进入中触发
否-进入后触发
否-离开前触发
否-离开中触发
否-离开后触发
否-点击遮罩层时触发

合法值

position
值说明最低版本
top从顶部弹出-
bottom从底部弹出-
right从右侧弹出-
center在屏幕中央显示-

示例代码

基础用法

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>
  );
}

从底部弹出带遮罩

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>
  );
}

自定义样式与生命周期

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>
  );
}