@mpxjs/core 2.10.3-beta.5 → 2.10.4

package/LICENSE

@@ -0,0 +1,433 @@
+                              Apache License
+
+                        Version 2.0, January 2004
+
+                     http://www.apache.org/licenses/
+
+
+
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+
+
+
+1. Definitions.
+
+
+
+
+   "License" shall mean the terms and conditions for use, reproduction,
+
+   and distribution as defined by Sections 1 through 9 of this document.
+
+
+
+
+   "Licensor" shall mean the copyright owner or entity authorized by
+
+   the copyright owner that is granting the License.
+
+
+
+
+   "Legal Entity" shall mean the union of the acting entity and all
+
+   other entities that control, are controlled by, or are under common
+
+   control with that entity. For the purposes of this definition,
+
+   "control" means (i) the power, direct or indirect, to cause the
+
+   direction or management of such entity, whether by contract or
+
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+
+   outstanding shares, or (iii) beneficial ownership of such entity.
+
+
+
+
+   "You" (or "Your") shall mean an individual or Legal Entity
+
+   exercising permissions granted by this License.
+
+
+
+
+   "Source" form shall mean the preferred form for making modifications,
+
+   including but not limited to software source code, documentation
+
+   source, and configuration files.
+
+
+
+
+   "Object" form shall mean any form resulting from mechanical
+
+   transformation or translation of a Source form, including but
+
+   not limited to compiled object code, generated documentation,
+
+   and conversions to other media types.
+
+
+
+
+   "Work" shall mean the work of authorship, whether in Source or
+
+   Object form, made available under the License, as indicated by a
+
+   copyright notice that is included in or attached to the work
+
+   (an example is provided in the Appendix below).
+
+
+
+
+   "Derivative Works" shall mean any work, whether in Source or Object
+
+   form, that is based on (or derived from) the Work and for which the
+
+   editorial revisions, annotations, elaborations, or other modifications
+
+   represent, as a whole, an original work of authorship. For the purposes
+
+   of this License, Derivative Works shall not include works that remain
+
+   separable from, or merely link (or bind by name) to the interfaces of,
+
+   the Work and Derivative Works thereof.
+
+
+
+
+   "Contribution" shall mean any work of authorship, including
+
+   the original version of the Work and any modifications or additions
+
+   to that Work or Derivative Works thereof, that is intentionally
+
+   submitted to Licensor for inclusion in the Work by the copyright owner
+
+   or by an individual or Legal Entity authorized to submit on behalf of
+
+   the copyright owner. For the purposes of this definition, "submitted"
+
+   means any form of electronic, verbal, or written communication sent
+
+   to the Licensor or its representatives, including but not limited to
+
+   communication on electronic mailing lists, source code control systems,
+
+   and issue tracking systems that are managed by, or on behalf of, the
+
+   Licensor for the purpose of discussing and improving the Work, but
+
+   excluding communication that is conspicuously marked or otherwise
+
+   designated in writing by the copyright owner as "Not a Contribution."
+
+
+
+
+   "Contributor" shall mean Licensor and any individual or Legal Entity
+
+   on behalf of whom a Contribution has been received by Licensor and
+
+   subsequently incorporated within the Work.
+
+
+
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+
+   this License, each Contributor hereby grants to You a perpetual,
+
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+
+   copyright license to reproduce, prepare Derivative Works of,
+
+   publicly display, publicly perform, sublicense, and distribute the
+
+   Work and such Derivative Works in Source or Object form.
+
+
+
+
+3. Grant of Patent License. Subject to the terms and conditions of
+
+   this License, each Contributor hereby grants to You a perpetual,
+
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+
+   (except as stated in this section) patent license to make, have made,
+
+   use, offer to sell, sell, import, and otherwise transfer the Work,
+
+   where such license applies only to those patent claims licensable
+
+   by such Contributor that are necessarily infringed by their
+
+   Contribution(s) alone or by combination of their Contribution(s)
+
+   with the Work to which such Contribution(s) was submitted. If You
+
+   institute patent litigation against any entity (including a
+
+   cross-claim or counterclaim in a lawsuit) alleging that the Work
+
+   or a Contribution incorporated within the Work constitutes direct
+
+   or contributory patent infringement, then any patent licenses
+
+   granted to You under this License for that Work shall terminate
+
+   as of the date such litigation is filed.
+
+
+
+
+4. Redistribution. You may reproduce and distribute copies of the
+
+   Work or Derivative Works thereof in any medium, with or without
+
+   modifications, and in Source or Object form, provided that You
+
+   meet the following conditions:
+
+
+
+
+   (a) You must give any other recipients of the Work or
+
+       Derivative Works a copy of this License; and
+
+
+
+
+   (b) You must cause any modified files to carry prominent notices
+
+       stating that You changed the files; and
+
+
+
+
+   (c) You must retain, in the Source form of any Derivative Works
+
+       that You distribute, all copyright, patent, trademark, and
+
+       attribution notices from the Source form of the Work,
+
+       excluding those notices that do not pertain to any part of
+
+       the Derivative Works; and
+
+
+
+
+   (d) If the Work includes a "NOTICE" text file as part of its
+
+       distribution, then any Derivative Works that You distribute must
+
+       include a readable copy of the attribution notices contained
+
+       within such NOTICE file, excluding those notices that do not
+
+       pertain to any part of the Derivative Works, in at least one
+
+       of the following places: within a NOTICE text file distributed
+
+       as part of the Derivative Works; within the Source form or
+
+       documentation, if provided along with the Derivative Works; or,
+
+       within a display generated by the Derivative Works, if and
+
+       wherever such third-party notices normally appear. The contents
+
+       of the NOTICE file are for informational purposes only and
+
+       do not modify the License. You may add Your own attribution
+
+       notices within Derivative Works that You distribute, alongside
+
+       or as an addendum to the NOTICE text from the Work, provided
+
+       that such additional attribution notices cannot be construed
+
+       as modifying the License.
+
+
+
+
+   You may add Your own copyright statement to Your modifications and
+
+   may provide additional or different license terms and conditions
+
+   for use, reproduction, or distribution of Your modifications, or
+
+   for any such Derivative Works as a whole, provided Your use,
+
+   reproduction, and distribution of the Work otherwise complies with
+
+   the conditions stated in this License.
+
+
+
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+
+   any Contribution intentionally submitted for inclusion in the Work
+
+   by You to the Licensor shall be under the terms and conditions of
+
+   this License, without any additional terms or conditions.
+
+   Notwithstanding the above, nothing herein shall supersede or modify
+
+   the terms of any separate license agreement you may have executed
+
+   with Licensor regarding such Contributions.
+
+
+
+
+6. Trademarks. This License does not grant permission to use the trade
+
+   names, trademarks, service marks, or product names of the Licensor,
+
+   except as required for reasonable and customary use in describing the
+
+   origin of the Work and reproducing the content of the NOTICE file.
+
+
+
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+
+   agreed to in writing, Licensor provides the Work (and each
+
+   Contributor provides its Contributions) on an "AS IS" BASIS,
+
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+
+   implied, including, without limitation, any warranties or conditions
+
+   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+
+   PARTICULAR PURPOSE. You are solely responsible for determining the
+
+   appropriateness of using or redistributing the Work and assume any
+
+   risks associated with Your exercise of permissions under this License.
+
+
+
+
+8. Limitation of Liability. In no event and under no legal theory,
+
+   whether in tort (including negligence), contract, or otherwise,
+
+   unless required by applicable law (such as deliberate and grossly
+
+   negligent acts) or agreed to in writing, shall any Contributor be
+
+   liable to You for damages, including any direct, indirect, special,
+
+   incidental, or consequential damages of any character arising as a
+
+   result of this License or out of the use or inability to use the
+
+   Work (including but not limited to damages for loss of goodwill,
+
+   work stoppage, computer failure or malfunction, or any and all
+
+   other commercial damages or losses), even if such Contributor
+
+   has been advised of the possibility of such damages.
+
+
+
+
+9. Accepting Warranty or Additional Liability. While redistributing
+
+   the Work or Derivative Works thereof, You may choose to offer,
+
+   and charge a fee for, acceptance of support, warranty, indemnity,
+
+   or other liability obligations and/or rights consistent with this
+
+   License. However, in accepting such obligations, You may act only
+
+   on Your own behalf and on Your sole responsibility, not on behalf
+
+   of any other Contributor, and only if You agree to indemnify,
+
+   defend, and hold each Contributor harmless for any liability
+
+   incurred by, or claims asserted against, such Contributor by reason
+
+   of your accepting any such warranty or additional liability.
+
+
+
+
+END OF TERMS AND CONDITIONS
+
+
+
+
+APPENDIX: How to apply the Apache License to your work.
+
+
+
+
+   To apply the Apache License to your work, attach the following
+
+   boilerplate notice, with the fields enclosed by brackets "{}"
+
+   replaced with your own identifying information. (Don't include
+
+   the brackets!)  The text should be enclosed in the appropriate
+
+   comment syntax for the file format. We also recommend that a
+
+   file or class name and description of purpose be included on the
+
+   same "printed page" as the copyright notice for easier
+
+   identification within third-party archives.
+
+
+
+
+Copyright (C) 2017 Beijing Didi Infinity Technology and Development Co.,Ltd. All rights reserved.
+
+
+
+
+Licensed under the Apache License, Version 2.0 (the "License");
+
+you may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at
+
+
+
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+
+
+
+Unless required by applicable law or agreed to in writing, software
+
+distributed under the License is distributed on an "AS IS" BASIS,
+
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+
+See the License for the specific language governing permissions and
+
+limitations under the License.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.3-beta.5",
+  "version": "2.10.4",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.10.2",
+    "@mpxjs/utils": "^2.10.4",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -109,5 +109,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
+  "gitHead": "c877bcebc894c75fe107f7b997cee5b494932e43"
 }

package/src/dynamic/vnode/render.js

@@ -144,7 +144,7 @@ export default function _genVnodeTree (astData, contextScope, options) {
     node.attrsList.forEach((attr) => {
       if (attr.name === 'class' || attr.name === 'style') {
         // class/style 的表达式为数组形式，class/style的计算过程需要放到逻辑层，主要是因为有逻辑匹配的过程去生成 vnodeTree
-        const helper = attr.name === 'class' ? stringify.stringifyClass : stringify.stringifyStyle
+        const helper = attr.name === 'class' ? stringify.c : stringify.s
         let value = ''
         if (attr.__exp) {
           let valueArr = evalExps(attr.__exp)

package/src/platform/builtInMixins/index.js

@@ -1,4 +1,4 @@
-import { isReact } from '@mpxjs/utils'
+import { isReact, isWeb } from '@mpxjs/utils'
 import pageStatusMixin from './pageStatusMixin'
 import proxyEventMixin from './proxyEventMixin'
 import renderHelperMixin from './renderHelperMixin'
@@ -27,7 +27,7 @@ export default function getBuiltInMixins ({ type, rawOptions = {} }) {
       i18nMixin(),
       relationsMixin(type)
     ]
-  } else if (__mpx_mode__ === 'web') {
+  } else if (isWeb) {
     bulitInMixins = [
       proxyEventMixin(),
       refsMixin(),

package/src/platform/createApp.ios.js

@@ -7,6 +7,7 @@ import Mpx from '../index'
 import { createElement, memo, useRef, useEffect } from 'react'
 import * as ReactNative from 'react-native'
 import { initAppProvides } from './export/inject'
+import { NavigationContainer, createStackNavigator, SafeAreaProvider } from './env/navigationHelper'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
@@ -31,8 +32,6 @@ function filterOptions (options, appData) {
 
 export default function createApp (options) {
   const appData = {}
-
-  const { NavigationContainer, createStackNavigator, SafeAreaProvider } = global.__navigationHelper
   // app选项目前不需要进行转换
   const { rawOptions, currentInject } = transferOptions(options, 'app', false)
   initAppProvides(rawOptions.provide, rawOptions)

package/src/platform/env/index.ios.js

@@ -1,5 +1,6 @@
 import { isFunction, isNumber, isString } from '@mpxjs/utils'
 import { createI18n } from '../builtInMixins/i18nMixin'
+import * as navigationHelper from './navigationHelper'
 
 export function init (Mpx) {
   global.__mpx = Mpx
@@ -9,6 +10,7 @@ export function init (Mpx) {
     error: [],
     rejection: []
   }
+  global.__navigationHelper = navigationHelper
   if (global.i18n) {
     Mpx.i18n = createI18n(global.i18n)
   }

package/src/platform/env/navigationHelper.android.js

@@ -0,0 +1,17 @@
+import { createStackNavigator } from '@react-navigation/stack'
+import { NavigationContainer, StackActions } from '@react-navigation/native'
+import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
+import { useHeaderHeight } from '@react-navigation/elements'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+
+export {
+  createStackNavigator,
+  NavigationContainer,
+  useHeaderHeight,
+  StackActions,
+  GestureHandlerRootView,
+  PortalHost,
+  SafeAreaProvider,
+  useSafeAreaInsets
+}

package/src/platform/env/navigationHelper.ios.js

@@ -0,0 +1,17 @@
+import { createNativeStackNavigator as createStackNavigator } from '@react-navigation/native-stack'
+import { NavigationContainer, StackActions } from '@react-navigation/native'
+import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
+import { useHeaderHeight } from '@react-navigation/elements'
+import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { GestureHandlerRootView } from 'react-native-gesture-handler'
+
+export {
+  createStackNavigator,
+  NavigationContainer,
+  useHeaderHeight,
+  StackActions,
+  GestureHandlerRootView,
+  PortalHost,
+  SafeAreaProvider,
+  useSafeAreaInsets
+}

package/src/platform/patch/getDefaultOptions.ios.js

@@ -2,18 +2,21 @@ import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, crea
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../observer/effect'
 import { watch } from '../../observer/watch'
-import { reactive, set, del } from '../../observer/reactive'
-import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, dash2hump, callWithErrorHandling, wrapMethodsWithErrorHandling } from '@mpxjs/utils'
+import { del, reactive, set } from '../../observer/reactive'
+import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, dash2hump, callWithErrorHandling, wrapMethodsWithErrorHandling, error } from '@mpxjs/utils'
 import MpxProxy from '../../core/proxy'
 import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE, REACTHOOKSEXEC } from '../../core/innerLifecycle'
 import mergeOptions from '../../core/mergeOptions'
 import { queueJob, hasPendingJob } from '../../observer/scheduler'
 import { createSelectorQuery, createIntersectionObserver } from '@mpxjs/api-proxy'
-import { IntersectionObserverContext, RouteContext, KeyboardAvoidContext } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
 import MpxKeyboardAvoidingView from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view'
+import {
+  IntersectionObserverContext,
+  KeyboardAvoidContext,
+  RouteContext
+} from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
+import { PortalHost, useSafeAreaInsets, GestureHandlerRootView, useHeaderHeight } from '../env/navigationHelper'
 
-const windowDimensions = ReactNative.Dimensions.get('window')
-const screenDimensions = ReactNative.Dimensions.get('screen')
 const ProviderContext = createContext(null)
 function getSystemInfo () {
   const windowDimensions = ReactNative.Dimensions.get('window')
@@ -48,7 +51,7 @@ function createEffect (proxy, components) {
     if (tagName === 'block') return Fragment
     const appComponents = global.__getAppComponents?.() || {}
     const generichash = proxy.target.generichash || ''
-    const genericComponents = global.__mpxGenericsMap?.[generichash] || noop
+    const genericComponents = global.__mpxGenericsMap[generichash] || noop
     return components[tagName] || genericComponents(tagName) || appComponents[tagName] || getByPath(ReactNative, tagName)
   }
   const innerCreateElement = (type, ...rest) => {
@@ -445,6 +448,141 @@ const checkRelation = (options) => {
 
 // 临时用来存储安卓底部（iOS没有这个）的高度（虚拟按键等高度）根据第一次进入推算
 let bottomVirtualHeight = null
+export function PageWrapperHOC (WrappedComponent) {
+  return function PageWrapperCom ({ navigation, route, pageConfig = {}, ...props }) {
+    const rootRef = useRef(null)
+    const keyboardAvoidRef = useRef(null)
+    const intersectionObservers = useRef({})
+    const currentPageId = useMemo(() => ++pageId, [])
+    const routeContextValRef = useRef({
+      navigation,
+      pageId: currentPageId
+    })
+    const currentPageConfig = Object.assign({}, global.__mpxPageConfig, pageConfig)
+    if (!navigation || !route) {
+      // 独立组件使用时要求传递navigation
+      error('Using pageWrapper requires passing navigation and route')
+      return null
+    }
+    usePageStatus(navigation, currentPageId)
+    useLayoutEffect(() => {
+      navigation.setOptions({
+        title: pageConfig.navigationBarTitleText?.trim() || '',
+        headerStyle: {
+          backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
+        },
+        headerTintColor: pageConfig.navigationBarTextStyle || 'white'
+      })
+
+      // TODO 此部分内容在native-stack可删除，用setOptions设置
+      if (__mpx_mode__ !== 'ios') {
+        ReactNative.StatusBar.setBarStyle(pageConfig.barStyle || 'dark-content')
+        ReactNative.StatusBar.setTranslucent(true) // 控制statusbar是否占位
+        ReactNative.StatusBar.setBackgroundColor('transparent')
+      }
+    }, [])
+
+    const headerHeight = useHeaderHeight()
+    const onLayout = () => {
+      const screenDimensions = ReactNative.Dimensions.get('screen')
+      if (__mpx_mode__ === 'ios') {
+        navigation.layout = {
+          x: 0,
+          y: headerHeight,
+          width: screenDimensions.width,
+          height: screenDimensions.height - headerHeight
+        }
+      } else {
+        if (bottomVirtualHeight === null) {
+          rootRef.current?.measureInWindow((x, y, width, height) => {
+            // 沉浸模式的计算方式
+            bottomVirtualHeight = screenDimensions.height - height - headerHeight
+            // 非沉浸模式（translucent=true）计算方式, 现在默认是全用沉浸模式，所以先不算这个
+            // bottomVirtualHeight = windowDimensions.height - height - headerHeight
+            navigation.layout = {
+              x: 0,
+              y: headerHeight,
+              width: screenDimensions.width,
+              height: height
+            }
+          })
+        } else {
+          navigation.layout = {
+            x: 0,
+            y: headerHeight, // 这个y值
+            width: screenDimensions.width,
+            // 后续页面的layout是通过第一次路由进入时候推算出来的底部区域来推算出来的
+            height: screenDimensions.height - bottomVirtualHeight - headerHeight
+          }
+        }
+      }
+    }
+    const withKeyboardAvoidingView = (element) => {
+      return createElement(KeyboardAvoidContext.Provider,
+        {
+          value: keyboardAvoidRef
+        },
+        createElement(MpxKeyboardAvoidingView,
+          {
+            style: {
+              flex: 1
+            },
+            contentContainerStyle: {
+              flex: 1
+            }
+          },
+          element
+        )
+      )
+    }
+
+    navigation.insets = useSafeAreaInsets()
+
+    return createElement(GestureHandlerRootView,
+      {
+        // https://github.com/software-mansion/react-native-reanimated/issues/6639 因存在此问题，iOS在页面上进行定宽来暂时规避
+        style: __mpx_mode__ === 'ios' && currentPageConfig?.navigationStyle !== 'custom'
+          ? {
+            height: ReactNative.Dimensions.get('screen').height - useHeaderHeight()
+          }
+          : {
+            flex: 1
+          }
+      },
+      withKeyboardAvoidingView(
+        createElement(ReactNative.View,
+          {
+            style: {
+              flex: 1,
+              backgroundColor: currentPageConfig?.backgroundColor || '#fff'
+            },
+            ref: rootRef,
+            onLayout
+          },
+          createElement(RouteContext.Provider,
+            {
+              value: routeContextValRef.current
+            },
+            createElement(IntersectionObserverContext.Provider,
+              {
+                value: intersectionObservers.current
+              },
+              createElement(PortalHost,
+                null,
+                createElement(WrappedComponent, {
+                  ...props,
+                  navigation,
+                  route,
+                  id: currentPageId
+                })
+              )
+            )
+          )
+        )
+      ))
+  }
+}
+
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   rawOptions = mergeOptions(rawOptions, type, false)
   const components = Object.assign({}, rawOptions.components, currentInject.getComponents())
@@ -580,138 +718,11 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   }
 
   if (type === 'page') {
-    const { PortalHost, useSafeAreaInsets, GestureHandlerRootView, useHeaderHeight } = global.__navigationHelper
-    const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
-    const Page = ({ navigation, route }) => {
-      const currentPageId = useMemo(() => ++pageId, [])
-      const intersectionObservers = useRef({})
-      const routeContextValRef = useRef({
-        pageId: currentPageId,
-        navigation
+    return (props) =>
+      createElement(PageWrapperHOC(defaultOptions), {
+        pageConfig: currentInject.pageConfig,
+        ...props
       })
-      usePageStatus(navigation, currentPageId)
-      useLayoutEffect(() => {
-        navigation.setOptions({
-          title: pageConfig.navigationBarTitleText?.trim() || '',
-          headerStyle: {
-            backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
-          },
-          headerTintColor: pageConfig.navigationBarTextStyle || 'white'
-        })
-
-        // TODO 此部分内容在native-stack可删除，用setOptions设置
-        if (__mpx_mode__ === 'android' || __mpx_mode__ === 'harmony') {
-          ReactNative.StatusBar.setBarStyle(pageConfig.barStyle || 'dark-content')
-          ReactNative.StatusBar.setTranslucent(true) // 控制statusbar是否占位
-          ReactNative.StatusBar.setBackgroundColor('transparent')
-        }
-      }, [])
-
-      const rootRef = useRef(null)
-      const keyboardAvoidRef = useRef(null)
-      const headerHeight = useHeaderHeight()
-      const onLayout = () => {
-        if (__mpx_mode__ === 'ios') {
-          navigation.layout = {
-            x: 0,
-            y: headerHeight,
-            width: windowDimensions.width,
-            height: screenDimensions.height - headerHeight
-          }
-        } else {
-          if (bottomVirtualHeight === null) {
-            rootRef.current?.measureInWindow((height) => {
-              // 沉浸模式的计算方式
-              bottomVirtualHeight = screenDimensions.height - height - headerHeight
-              // 非沉浸模式（translucent=true）计算方式, 现在默认是全用沉浸模式，所以先不算这个
-              // bottomVirtualHeight = windowDimensions.height - height - headerHeight
-              navigation.layout = {
-                x: 0,
-                y: headerHeight,
-                width: windowDimensions.width,
-                height: height
-              }
-            })
-          } else {
-            navigation.layout = {
-              x: 0,
-              y: headerHeight, // 这个y值
-              width: windowDimensions.width,
-              // 后续页面的layout是通过第一次路由进入时候推算出来的底部区域来推算出来的
-              height: screenDimensions.height - bottomVirtualHeight - headerHeight
-            }
-          }
-        }
-      }
-      const withKeyboardAvoidingView = (element) => {
-        return createElement(KeyboardAvoidContext.Provider,
-          {
-            value: keyboardAvoidRef
-          },
-          createElement(MpxKeyboardAvoidingView,
-            {
-              style: {
-                flex: 1
-              },
-              contentContainerStyle: {
-                flex: 1
-              }
-            },
-            element
-          )
-        )
-      }
-
-      navigation.insets = useSafeAreaInsets()
-
-      return createElement(GestureHandlerRootView,
-        {
-          // https://github.com/software-mansion/react-native-reanimated/issues/6639 因存在此问题，iOS在页面上进行定宽来暂时规避
-          style: __mpx_mode__ === 'ios' && pageConfig.navigationStyle !== 'custom'
-            ? {
-              height: ReactNative.Dimensions.get('screen').height - useHeaderHeight()
-            }
-            : {
-              flex: 1
-            }
-        },
-        withKeyboardAvoidingView(
-          createElement(ReactNative.View,
-            {
-              style: {
-                flex: 1,
-                backgroundColor: pageConfig.backgroundColor || '#ffffff'
-              },
-              ref: rootRef,
-              // 测试过了 键盘拉起后不会重新触发onLayout
-              onLayout
-            },
-            createElement(RouteContext.Provider,
-              {
-                value: routeContextValRef.current
-              },
-              createElement(IntersectionObserverContext.Provider,
-                {
-                  value: intersectionObservers.current
-                },
-                createElement(PortalHost,
-                  null,
-                  createElement(defaultOptions,
-                    {
-                      navigation,
-                      route,
-                      id: currentPageId
-                    }
-                  )
-                )
-              )
-            )
-          )
-        )
-      )
-      // todo custom portal host for active route
-    }
-    return Page
   }
   return defaultOptions
 }