@mpxjs/core 2.9.58 → 2.9.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.9.58",
+  "version": "2.9.59",
   "description": "mpx runtime core",
   "keywords": [
     "miniprogram",
@@ -19,7 +19,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.58",
+    "@mpxjs/utils": "^2.9.59",
     "lodash": "^4.1.1",
     "miniprogram-api-typings": "^3.10.0"
   },
@@ -31,6 +31,7 @@
     "@react-navigation/native-stack": "^6.9.26",
     "react": "*",
     "react-native": "*",
+    "react-native-safe-area-context": "^4.10.1",
     "vue": "^2.7.10",
     "vue-demi": "^0.14.6",
     "vue-i18n": "^8.27.2",
@@ -63,6 +64,9 @@
     },
     "@ant-design/react-native": {
       "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
     }
   },
   "publishConfig": {
@@ -81,5 +85,5 @@
     "url": "https://github.com/didi/mpx/issues"
   },
   "sideEffects": false,
-  "gitHead": "49fe4c4bc46ff4bf87cd8adde37981d4b4134aa7"
+  "gitHead": "aa001c11cc7b21772fc6f9f5bcdd13118fc6d67c"
 }

package/src/platform/builtInMixins/styleHelperMixin.ios.js

@@ -1,4 +1,4 @@
-import { isObject, isArray, dash2hump, isFunction, isEmptyObject } from '@mpxjs/utils'
+import { isObject, isArray, dash2hump, isFunction } from '@mpxjs/utils'
 import { Dimensions } from 'react-native'
 
 function concat (a, b) {
@@ -110,6 +110,7 @@ export default function styleHelperMixin (type) {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, show) {
+        // todo 每次返回新对象会导致react memo优化失效，需要考虑优化手段
         const result = []
         const classMap = {}
         if (type === 'page' && isFunction(global.__getAppClassMap)) {
@@ -118,11 +119,14 @@ export default function styleHelperMixin (type) {
         if (isFunction(this.__getClassMap)) {
           Object.assign(classMap, this.__getClassMap())
         }
-        if ((staticClass || dynamicClass) && !isEmptyObject(classMap)) {
+        if (staticClass || dynamicClass) {
           const classString = concat(staticClass, stringifyDynamicClass(dynamicClass))
-          classString.split(' ').forEach((className) => {
+          classString.split(/\s+/).forEach((className) => {
             if (classMap[className]) {
               result.push(classMap[className])
+            } else if (this.props[className]) {
+              // externalClasses必定以数组形式传递下来
+              result.push(...this.props[className])
             }
           })
         }

package/src/platform/createApp.ios.js

@@ -40,7 +40,7 @@ function createAppInstance (appData) {
 export default function createApp (option, config = {}) {
   const appData = {}
 
-  const { NavigationContainer, createNavigationContainerRef, createNativeStackNavigator } = global.__navigationHelper
+  const { NavigationContainer, createNavigationContainerRef, createNativeStackNavigator, SafeAreaProvider } = global.__navigationHelper
   // app选项目前不需要进行转换
   const { rawOptions, currentInject } = transferOptions(option, 'app', false)
   const defaultOptions = filterOptions(spreadProp(rawOptions, 'methods'), appData)
@@ -114,13 +114,13 @@ export default function createApp (option, config = {}) {
         if (currentState === 'active') {
           global.__mpxAppCbs.show.forEach((cb) => {
             cb(options)
-            global.__mpxAppFocusedState.value = 'show'
           })
-        } else if (currentState === 'background') {
+          global.__mpxAppFocusedState.value = 'show'
+        } else if (currentState === 'inactive') {
           global.__mpxAppCbs.hide.forEach((cb) => {
             cb()
-            global.__mpxAppFocusedState.value = 'hide'
           })
+          global.__mpxAppFocusedState.value = 'hide'
         }
       })
 
@@ -138,17 +138,20 @@ export default function createApp (option, config = {}) {
       }
     }, [])
 
-    return createElement(NavigationContainer,
-      {
-        ref: navigationRef,
-        onStateChange,
-        onUnhandledAction
-      },
-      createElement(Stack.Navigator,
+    return createElement(SafeAreaProvider,
+      null,
+      createElement(NavigationContainer,
         {
-          initialRouteName: firstPage
+          ref: navigationRef,
+          onStateChange,
+          onUnhandledAction
         },
-        ...pageScreens
+        createElement(Stack.Navigator,
+          {
+            initialRouteName: firstPage
+          },
+          ...pageScreens
+        )
       )
     )
   })

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

@@ -1,8 +1,8 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../../observer/effect'
 import { watch } from '../../../observer/watch'
-import { reactive, set } from '../../../observer/reactive'
+import { reactive, set, del } from '../../../observer/reactive'
 import { hasOwn, isFunction, noop, isObject, error, getByPath, collectDataset } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
 import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE } from '../../../core/innerLifecycle'
@@ -185,6 +185,12 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
         return props.id
       },
       enumerable: true
+    },
+    props: {
+      get () {
+        return propsRef.current
+      },
+      enumerable: true
     }
   })
 
@@ -271,8 +277,12 @@ const triggerResizeEvent = (mpxProxy) => {
   }
 }
 
-function usePageContext (mpxProxy) {
-  const { routeName } = useContext(routeContext) || {}
+function usePageContext (mpxProxy, instance) {
+  const { pageId } = useContext(routeContext) || {}
+
+  instance.getPageId = () => {
+    return pageId
+  }
 
   useEffect(() => {
     let unWatch
@@ -280,8 +290,8 @@ function usePageContext (mpxProxy) {
     const hasHideHook = hasPageHook(mpxProxy, [ONHIDE, 'hide'])
     const hasResizeHook = hasPageHook(mpxProxy, [ONRESIZE, 'resize'])
     if (hasShowHook || hasHideHook || hasResizeHook) {
-      if (hasOwn(pageStatusContext, routeName)) {
-        unWatch = watch(() => pageStatusContext[routeName], (newVal) => {
+      if (hasOwn(pageStatusContext, pageId)) {
+        unWatch = watch(() => pageStatusContext[pageId], (newVal) => {
           if (newVal === 'show' || newVal === 'hide') {
             triggerPageStatusHook(mpxProxy, newVal)
           } else if (/^resize/.test(newVal)) {
@@ -298,27 +308,23 @@ function usePageContext (mpxProxy) {
 }
 
 const pageStatusContext = reactive({})
-function setPageStatus (routeName, val) {
-  set(pageStatusContext, routeName, val)
-}
+let pageId = 0
 
-function usePageStatus (navigation, route) {
+function usePageStatus (navigation, pageId) {
   let isFocused = true
-  setPageStatus(route.name, '')
+  set(pageStatusContext, pageId, '')
   useEffect(() => {
-    setPageStatus(route.name, 'show')
     const focusSubscription = navigation.addListener('focus', () => {
-      setPageStatus(route.name, 'show')
+      pageStatusContext[pageId] = 'show'
       isFocused = true
     })
     const blurSubscription = navigation.addListener('blur', () => {
-      setPageStatus(route.name, 'hide')
+      pageStatusContext[pageId] = 'hide'
       isFocused = false
     })
-
     const unWatchAppFocusedState = watch(global.__mpxAppFocusedState, (value) => {
       if (isFocused) {
-        setPageStatus(route.name, value)
+        pageStatusContext[pageId] = value
       }
     })
 
@@ -326,6 +332,7 @@ function usePageStatus (navigation, route) {
       focusSubscription()
       blurSubscription()
       unWatchAppFocusedState()
+      del(pageStatusContext, pageId)
     }
   }, [navigation])
 }
@@ -362,7 +369,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
       proxy.propsUpdated()
     }
 
-    usePageContext(proxy)
+    usePageContext(proxy, instance)
 
     useEffect(() => {
       if (proxy.pendingUpdatedFlag) {
@@ -387,13 +394,15 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   }))
 
   if (type === 'page') {
-    const { Provider } = global.__navigationHelper
+    const { Provider, useSafeAreaInsets } = global.__navigationHelper
     const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
     const Page = ({ navigation, route }) => {
-      usePageStatus(navigation, route)
+      const currentPageId = useMemo(() => ++pageId, [])
+      usePageStatus(navigation, currentPageId)
 
       useLayoutEffect(() => {
         navigation.setOptions({
+          headerShown: pageConfig.navigationStyle !== 'custom',
           headerTitle: pageConfig.navigationBarTitleText || '',
           headerStyle: {
             backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
@@ -402,18 +411,25 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
         })
       }, [])
 
+      const insets = useSafeAreaInsets()
+      const safeAreaPadding = {
+        paddingTop: insets.top,
+        paddingLeft: insets.left
+      }
+
       return createElement(Provider,
         null,
         createElement(ReactNative.View,
           {
             style: {
+              ...pageConfig.navigationStyle === 'custom' && safeAreaPadding,
               ...ReactNative.StyleSheet.absoluteFillObject,
               backgroundColor: pageConfig.backgroundColor || '#ffffff'
             }
           },
           createElement(routeContext.Provider,
             {
-              value: { routeName: route.name }
+              value: { pageId: currentPageId }
             },
             createElement(defaultOptions,
               {