@mpxjs/core 2.10.7-beta.2 → 2.10.7-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.7-beta.2",
+  "version": "2.10.7-beta.5",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",

package/src/platform/createApp.ios.js

@@ -9,8 +9,7 @@ import { watch } from '../observer/watch'
 import { createElement, memo, useRef, useEffect } from 'react'
 import * as ReactNative from 'react-native'
 import { initAppProvides } from './export/inject'
-import { NavigationContainer, createNativeStackNavigator, SafeAreaProvider, GestureHandlerRootView } from './env/navigationHelper'
-import { innerNav } from './env/nav'
+import { NavigationContainer, createNativeStackNavigator, SafeAreaProvider } from './env/navigationHelper'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
@@ -56,40 +55,23 @@ export default function createApp (options) {
   const pages = currentInject.getPages() || {}
   const firstPage = currentInject.firstPage
   const Stack = createNativeStackNavigator()
-  const withHeader = (wrappedComponent, { pageConfig = {} }) => {
-      return ({ navigation, ...props }) => {
-        return createElement(GestureHandlerRootView,
-        {
-          style: {
-            flex: 1
-          }
-        },
-        createElement(innerNav, {
-          pageConfig: pageConfig,
-          navigation
-        }),
-        createElement(wrappedComponent, { navigation, ...props })
-      )
-    }
-  }
   const getPageScreens = (initialRouteName, initialParams) => {
     return Object.entries(pages).map(([key, item]) => {
       // const options = {
       //   // __mpxPageStatusMap 为编译注入的全局变量
       //   headerShown: !(Object.assign({}, global.__mpxPageConfig, global.__mpxPageConfigsMap[key]).navigationStyle === 'custom')
       // }
-      const pageConfig = Object.assign({}, global.__mpxPageConfig, global.__mpxPageConfigsMap[key])
       if (key === initialRouteName) {
         return createElement(Stack.Screen, {
           name: key,
-          component: withHeader(item, { pageConfig }),
+          component: item,
           initialParams
           // options
         })
       }
       return createElement(Stack.Screen, {
         name: key,
-        component: withHeader(item, { pageConfig })
+        component: item
         // options
       })
     })

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

@@ -10,15 +10,13 @@ export function init (Mpx) {
     show: [],
     hide: [],
     error: [],
-    rejection: [],
-    lazyLoad: []
+    rejection: []
   }
   global.__navigationHelper = navigationHelper
   if (global.i18n) {
     Mpx.i18n = createI18n(global.i18n)
   }
   initGlobalErrorHandling()
-  initGlobalLazyLoadHandling()
 }
 
 function initGlobalErrorHandling () {
@@ -65,13 +63,3 @@ function initGlobalErrorHandling () {
     require('promise/setimmediate/rejection-tracking').enable(rejectionTrackingOptions)
   }
 }
-
-function initGlobalLazyLoadHandling () {
-  global.onLazyLoadError = function (error) {
-    if (global.__mpxAppCbs?.lazyLoad?.length) {
-      global.__mpxAppCbs.lazyLoad.forEach((cb) => {
-        cb(error)
-      })
-    }
-  }
-}

package/src/platform/env/nav.js

@@ -1,11 +1,11 @@
 import { createElement, useState, useMemo } from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { StatusBar, processColor, TouchableOpacity, Image, View, StyleSheet, Text } from 'react-native'
+import * as ReactNative from 'react-native'
 import Mpx from '../../index'
 
 function convertToHex (color) {
   try {
-    const intColor = processColor(color)
+    const intColor = ReactNative.processColor(color)
     if (intColor === null || intColor === undefined) {
       return null
     }
@@ -34,7 +34,7 @@ export function useInnerHeaderHeight (pageconfig) {
   }
 }
 
-const styles = StyleSheet.create({
+const styles = ReactNative.StyleSheet.create({
   header: {
     elevation: 3
   },
@@ -76,7 +76,8 @@ const validBarTextStyle = (textStyle) => {
     return NavColor.White
   }
 }
-export function innerNav ({ pageConfig, navigation }) {
+export function innerNav ({ props, navigation }) {
+  const { pageConfig } = props
   const [innerPageConfig, setPageConfig] = useState(pageConfig || {})
   navigation.setPageConfig = (config) => {
     const newConfig = Object.assign({}, innerPageConfig, config)
@@ -85,7 +86,7 @@ export function innerNav ({ pageConfig, navigation }) {
   const isCustom = innerPageConfig.navigationStyle === 'custom'
   const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
   // 状态栏的颜色
-  const statusBarElement = createElement(StatusBar, {
+  const statusBarElement = createElement(ReactNative.StatusBar, {
     translucent: true,
     backgroundColor: 'transparent',
     barStyle: (navigationBarTextStyle === NavColor.White) ? 'light-content' : 'dark-content' // 'default'/'light-content'/'dark-content'
@@ -100,28 +101,28 @@ export function innerNav ({ pageConfig, navigation }) {
 
   // 回退按钮与图标
   const backElement = stackLength + beforeStackLength > 1
-  ? createElement(TouchableOpacity, {
+  ? createElement(ReactNative.TouchableOpacity, {
     style: [styles.backButton],
     onPress: () => { navigation.goBack() }
-  }, createElement(Image, {
+  }, createElement(ReactNative.Image, {
     source: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg==' },
     // 回退按钮的颜色与设置的title文案颜色一致
     style: [styles.backButtonImage, { tintColor: navigationBarTextStyle }]
   }))
   : null
 
-  return createElement(View, {
+  return createElement(ReactNative.View, {
       style: [styles.header, {
           paddingTop: safeAreaTop,
           backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
         }]
       },
       statusBarElement,
-      createElement(View, {
+      createElement(ReactNative.View, {
         style: styles.headerContent,
         height: titleHeight
       }, backElement,
-      createElement(Text, {
+      createElement(ReactNative.Text, {
         style: [styles.title, { color: navigationBarTextStyle }],
         numberOfLines: 1
       }, innerPageConfig.navigationBarTitleText?.trim() || ''))

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

@@ -0,0 +1,17 @@
+import { createNativeStackNavigator } 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 {
+  createNativeStackNavigator,
+  NavigationContainer,
+  useHeaderHeight,
+  StackActions,
+  GestureHandlerRootView,
+  PortalHost,
+  SafeAreaProvider,
+  useSafeAreaInsets
+}

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

@@ -15,8 +15,8 @@ import {
   KeyboardAvoidContext,
   RouteContext
 } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
-import { PortalHost, useSafeAreaInsets } from '../env/navigationHelper'
-import { useInnerHeaderHeight } from '../env/nav'
+import { PortalHost, useSafeAreaInsets, GestureHandlerRootView } from '../env/navigationHelper'
+import { innerNav, useInnerHeaderHeight } from '../env/nav'
 
 const ProviderContext = createContext(null)
 function getSystemInfo () {
@@ -419,22 +419,6 @@ function usePageStatus (navigation, pageId) {
   }, [navigation])
 }
 
-function usePagePreload (route) {
-  const name = route.name
-  useEffect(() => {
-    setTimeout(() => {
-      const preloadRule = global.__preloadRule || {}
-      const { packages } = preloadRule[name] || {}
-      if (packages?.length > 0) {
-        const downloadChunkAsync = mpxGlobal.__mpx.config?.rnConfig?.downloadChunkAsync
-        if (typeof downloadChunkAsync === 'function') {
-          callWithErrorHandling(() => downloadChunkAsync(packages))
-        }
-      }
-    }, 800)
-  }, [])
-}
-
 const RelationsContext = createContext(null)
 
 const checkRelation = (options) => {
@@ -463,6 +447,8 @@ function getLayoutData (headerHeight) {
   const isLandscape = screenDimensions.height < screenDimensions.width
   const bottomVirtualHeight = isLandscape ? screenDimensions.height - windowDimensions.height : ((screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight) || 0)
   return {
+    x: 0,
+    y: headerHeight,
     left: 0,
     top: headerHeight,
     // 此处必须为windowDimensions.width，在横屏状态下windowDimensions.width才符合预期
@@ -493,15 +479,11 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     }
     const headerHeight = useInnerHeaderHeight(currentPageConfig)
     navigation.layout = getLayoutData(headerHeight)
+    const onLayout = () => {
+      // 当用户处于横屏或者竖屏状态的时候，需要进行layout修正
+      navigation.layout = getLayoutData(headerHeight)
+    }
 
-    useEffect(() => {
-      const dimensionListener = ReactNative.Dimensions.addEventListener('change', ({ screen }) => {
-        navigation.layout = getLayoutData(headerHeight)
-      })
-      return () => dimensionListener?.remove()
-    }, [])
-
-    usePagePreload(route)
     usePageStatus(navigation, currentPageId)
 
     const withKeyboardAvoidingView = (element) => {
@@ -524,38 +506,49 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     }
     // android存在第一次打开insets都返回为0情况，后续会触发第二次渲染后正确
     navigation.insets = useSafeAreaInsets()
-    return withKeyboardAvoidingView(
-      createElement(ReactNative.View,
-        {
-          style: {
-            flex: 1,
-            backgroundColor: currentPageConfig?.backgroundColor || '#fff',
-            // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
-            overflow: 'hidden'
-          },
-          ref: rootRef
-        },
-        createElement(RouteContext.Provider,
+    return createElement(GestureHandlerRootView,
+      {
+        style: {
+          flex: 1
+        }
+      },
+      createElement(innerNav, {
+        props: { pageConfig: currentPageConfig },
+        navigation
+      }),
+      withKeyboardAvoidingView(
+        createElement(ReactNative.View,
           {
-            value: routeContextValRef.current
+            style: {
+              flex: 1,
+              backgroundColor: currentPageConfig?.backgroundColor || '#fff',
+              // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
+              overflow: 'hidden'
+            },
+            ref: rootRef,
+            onLayout
           },
-          createElement(IntersectionObserverContext.Provider,
+          createElement(RouteContext.Provider,
             {
-              value: intersectionObservers.current
+              value: routeContextValRef.current
             },
-            createElement(PortalHost,
-              null,
-              createElement(WrappedComponent, {
-                ...props,
-                navigation,
-                route,
-                id: currentPageId
-              })
+            createElement(IntersectionObserverContext.Provider,
+              {
+                value: intersectionObservers.current
+              },
+              createElement(PortalHost,
+                null,
+                createElement(WrappedComponent, {
+                  ...props,
+                  navigation,
+                  route,
+                  id: currentPageId
+                })
+              )
             )
           )
         )
-      )
-    )
+      ))
   }
 }
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
@@ -625,6 +618,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     })
 
     usePageEffect(proxy, pageId)
+
     useEffect(() => {
       proxy.mounted()
       return () => {