Teaset框架中的Overlay浮层组件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00614/article/details/148756208

Teaset框架中的Overlay浮层组件详解

teaset A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control. 项目地址: https://gitcode.com/gh_mirrors/te/teaset

什么是Overlay浮层？

在React Native开发中，Overlay浮层是一种非常重要的UI组件概念。它允许开发者在现有界面之上叠加显示额外的内容，类似于网页中的模态框或弹出层。Teaset框架中的Overlay组件提供了一套完整的解决方案，让开发者能够轻松实现各种浮层效果。

Overlay的核心优势

三维界面管理：将传统的二维平面界面扩展为三维层次结构
代码解耦：浮层代码可以与主体页面代码完全分离
丰富的动画效果：内置多种动画过渡效果
类型多样：支持普通浮层、抽屉式浮层、弹出式浮层和气泡式浮层

Overlay静态方法详解

show方法

Overlay.show(overlayView)

显示一个浮层视图，参数overlayView为浮层视图组件，通常使用Overlay.View或其子类组件。返回一个唯一的key值，可用于后续操作该浮层。

hide方法

Overlay.hide(key)

隐藏指定key值的浮层视图。

Overlay组件类型

1. Overlay.View基础浮层

基础浮层组件，所有其他类型浮层的基类。

核心属性：

modal：是否为模态浮层（默认为false）
animated：是否启用动画（默认为false）
overlayOpacity：背景遮罩透明度（0-1）
autoKeyboardInsets：键盘弹出时是否自动调整

常用事件：

onAppearCompleted：浮层完全显示后触发
onDisappearCompleted：浮层完全隐藏后触发
onCloseRequest：用户尝试关闭浮层时触发

2. Overlay.PullView抽屉式浮层

具有拖拉效果的浮层，常用于侧边菜单或底部操作栏。

特有属性：

side：弹出方向（top/bottom/left/right）
rootTransform：根组件转换动画类型
containerStyle：容器样式

3. Overlay.PopView弹出式浮层

具有缩放动画效果的浮层，适合需要强调的提示或操作。

特有属性：

type：动画类型（zoomOut/zoomIn/custom）
customBounds：自定义动画起始位置和大小

4. Overlay.PopoverView气泡式浮层

带箭头指向的气泡浮层，常用于工具提示或上下文菜单。

特有属性：

fromBounds：气泡指向的目标区域
direction：弹出方向
showArrow：是否显示箭头
align：对齐方式

实战示例

基础模态浮层

let overlayView = (
  <Overlay.View
    style={{alignItems: 'center', justifyContent: 'center'}}
    modal={true}
    overlayOpacity={0.5}
  >
    <View style={{backgroundColor: '#fff', padding: 40, borderRadius: 15}}>
      <Text>这是一个模态浮层</Text>
    </View>
  </Overlay.View>
);
Overlay.show(overlayView);

底部抽屉浮层

let overlayView = (
  <Overlay.PullView side='bottom'>
    <View style={{height: 300, backgroundColor: '#fff'}}>
      <Text>底部抽屉内容</Text>
    </View>
  </Overlay.PullView>
);
Overlay.show(overlayView);

图片放大效果

imageRef.measureInWindow((x, y, width, height) => {
  let overlayView = (
    <Overlay.PopView
      type='custom'
      customBounds={{x, y, width, height}}
    >
      <Image source={imageSource} style={{flex: 1}} />
    </Overlay.PopView>
  );
  Overlay.show(overlayView);
});