Feat rn pagecontainer

docs-vitepress/guide/rn/application-api.md

@@ -477,6 +477,28 @@ Mpx 框架默认会使用 `ReactNative.AppState.addEventListener('change', callb
 在需要将 RN 应用嵌入到现有的 NA 应用中时，可能会出现AppState触发时机异常的情况（例如从 RN 页面跳转到 NA 页面时），此时可以将 disableAppStateListener 设置为 true 来禁用框架内部对 AppState 的监听。但需要在合适的时机手动调用 setAppShow() 与 setAppHide() 方法来进行驱动以确保对应的钩子能正常触发。
 
 
+### page-container {#page-container}
+
+#### mpx.config.rnConfig.disableSwipeBack
+
+```ts
+(options: { disable: boolean }) => void
+```
+
+禁用或启用 iOS 页面左滑手势返回，主要用于 DRN（混合容器）等场景。
+
+当页面内使用 `page-container` 组件时，框架会在容器显示时自动调用此方法禁用手势返回，以防止用户左滑时触发页面返回而非关闭容器；容器关闭或组件销毁时会再次调用以恢复。
+
+在纯 RN 环境下，框架通过 React Navigation 的 `gestureEnabled` 选项自动处理手势返回的禁用与恢复，无需配置此项。
+
+```javascript
+// 示例（DRN 场景）
+mpx.config.rnConfig.disableSwipeBack = ({ disable }) => {
+  // 调用 NA 提供的方法控制手势返回
+  NativeModules.NavigationModule.setSwipeBackEnabled(!disable)
+}
+```
+
 ### 自定义设置底部虚拟按键区高度 {#custom-bottom-bar-height}
 
 #### mpx.config.rnConfig.getBottomVirtualHeight

docs-vitepress/guide/rn/component.md

@@ -5,7 +5,7 @@
 ### 目录概览 {#directory-overview}
 
 - #### 基础组件
-**容器组件**：[view](#view) · [scroll-view](#scroll-view) · [swiper](#swiper) · [swiper-item](#swiper-item) · [movable-area](#movable-area) · [movable-view](#movable-view) · [root-portal](#root-portal) · [sticky-section](#sticky-section) · [sticky-header](#sticky-header) · [cover-view](#cover-view)
+**容器组件**：[view](#view) · [scroll-view](#scroll-view) · [swiper](#swiper) · [swiper-item](#swiper-item) · [movable-area](#movable-area) · [movable-view](#movable-view) · [page-container](#page-container) · [root-portal](#root-portal) · [sticky-section](#sticky-section) · [sticky-header](#sticky-header) · [cover-view](#cover-view)
 
 **媒体组件**：[image](#image) · [video](#video) · [canvas](#canvas)
 
@@ -768,6 +768,80 @@ API
 视图容器。
 功能同 [image 组件](#image)
 
+### page-container
+
+页面容器。可在页面内创建一个覆盖于页面之上的子页面容器，常用于实现弹出层、抽屉等交互效果。
+
+属性
+
+| 属性名 | 类型 | 默认值 | 说明 |
+| ----- | ---- | ----- | ---- |
+| show | boolean | `false` | 是否显示容器 |
+| duration | number | `300` | 动画时长，单位毫秒 |
+| z-index | number | `100` | z-index 层级 |
+| overlay | boolean | `true` | 是否显示遮罩层 |
+| position | string | `bottom` | 弹出位置，可选值为 `top`、`bottom`、`right`、`center` |
+| round | boolean | `false` | 是否显示圆角，仅 `position` 为 `top` 或 `bottom` 时生效 |
+| close-on-slide-down | boolean | `false` | 是否在下滑时关闭容器，仅 `position` 为 `bottom` 时生效 |
+| overlay-style | string | | 自定义遮罩层样式 |
+| custom-style | string | | 自定义容器样式 |
+
+事件
+
+| 事件名 | 说明 |
+| ----- | ---- |
+| bindbeforeenter | 进入前触发 |
+| bindenter | 进入时触发 |
+| bindafterenter | 进入后触发 |
+| bindbeforeleave | 离开前触发 |
+| bindleave | 离开时触发 |
+| bindafterleave | 离开后触发 |
+| bindclickoverlay | 点击遮罩层时触发 |
+| bindclose | RN 环境特有事件，容器关闭时触发，用于同步 `show` 状态到父组件，`event.detail = { value: false }` |
+
+> [!tip] 注意
+>
+> - 在 RN 环境下，当容器显示时会禁用页面手势返回（iOS 左滑返回），并拦截系统返回事件，触发 `bindclose` 事件而非直接返回上一页。因此必须监听 `bindclose` 事件并将 `show` 同步设置为 `false`，否则无法正常关闭容器。
+> - 为什么需要 `bindclose`？特殊场景：在微信小程序中 `show={{a}}` 在关闭`page-container`后，a会变为false（类似wx:model的效果）,所以需要bindclose来模拟此效果
+
+示例
+
+```html
+<template>
+  <view>
+    <button bindtap="openContainer">打开容器</button>
+    <page-container
+      show="{{show}}"
+      position="bottom"
+      round="{{true}}"
+      bindclose="onClose"
+    >
+      <view style="height: 300px; padding: 20px;">
+        <text>容器内容</text>
+      </view>
+    </page-container>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { createPage } from '@mpxjs/core'
+
+createPage({
+  data: {
+    show: false
+  },
+  methods: {
+    openContainer() {
+      this.show = true
+    },
+    onClose() {
+      this.show = false
+    }
+  }
+})
+</script>
+```
+
 
 ## 自定义组件 {#custom-component}
 

packages/core/@types/index.d.ts

@@ -433,6 +433,19 @@ export interface RnConfig {
    * @returns Promise<boolean> Resolves 为 true 表示权限获取成功，false 表示失败。
    */
   cameraPermission?: () => Promise<boolean>
+
+  /**
+   * 禁用或启用 iOS 页面左滑手势返回。
+   *
+   * 当 `page-container` 组件显示时，框架会调用此方法禁用手势返回，以防止与容器交互冲突；
+   * 容器关闭或销毁时会再次调用以恢复。
+   *
+   * 主要用于 DRN（混合容器）等场景，在纯 RN 环境下框架会通过 React Navigation 的
+   * `gestureEnabled` 选项自动处理，无需配置此项。
+   *
+   * @param options.disable true 表示禁用手势返回，false 表示恢复
+   */
+  disableSwipeBack?: (options: { disable: boolean }) => void
 }
 
 interface MpxConfig {

packages/webpack-plugin/lib/platform/template/wx/component-config/index.js

@@ -42,6 +42,7 @@ const wxs = require('./wxs')
 const fixComponentName = require('./fix-component-name')
 const customBuiltInComponent = require('./custom-built-in-component')
 const rootPortal = require('./root-portal')
+const pageContainer = require('./page-container')
 const stickyHeader = require('./sticky-header')
 const stickySection = require('./sticky-section')
 
@@ -142,6 +143,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     rootPortal({ print }),
+    pageContainer({ print }),
     stickyHeader({ print }),
     stickySection({ print }),
     defaultCatchAllComponentConfig()

packages/webpack-plugin/lib/platform/template/wx/component-config/page-container.js

@@ -0,0 +1,19 @@
+const TAG_NAME = 'page-container'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-page-container'
+    },
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-page-container'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-page-container'
+    }
+  }
+}

packages/webpack-plugin/lib/platform/template/wx/component-config/unsupported.js

@@ -13,7 +13,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'audio', 'match-media', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print