@mpxjs/core 2.10.16 → 2.10.17-beta.13

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

@@ -1,37 +1,74 @@
-import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn } from '@mpxjs/utils'
-import { Dimensions, StyleSheet } from 'react-native'
+import { isObject, isArray, dash2hump, cached, isEmptyObject, hasOwn, getFocusedNavigation } from '@mpxjs/utils'
+import { StyleSheet, Dimensions } from 'react-native'
+import { reactive } from '../../observer/reactive'
 import Mpx from '../../index'
 
-const rawDimensions = {
-  screen: Dimensions.get('screen'),
-  window: Dimensions.get('window')
+global.__mpxAppDimensionsInfo = {
+  window: Dimensions.get('window'),
+  screen: Dimensions.get('screen')
 }
-let width, height
+global.__mpxSizeCount = 0
+global.__mpxPageSizeCountMap = reactive({})
 
-// TODO 临时适配折叠屏场景适配
-// const isLargeFoldableLike = (__mpx_mode__ === 'android') && (height / width < 1.5) && (width > 600)
-// if (isLargeFoldableLike) width = width / 2
+global.__GCC = function (className, classMap, classMapValueCache) {
+  if (!classMapValueCache.has(className)) {
+    const styleObj = classMap[className]?.(global.__formatValue)
+    styleObj && classMapValueCache.set(className, styleObj)
+  }
+  return classMapValueCache.get(className)
+}
 
-function customDimensions (dimensions) {
+let dimensionsInfoInitialized = false
+function useDimensionsInfo (dimensions) {
+  dimensionsInfoInitialized = true
   if (typeof Mpx.config.rnConfig?.customDimensions === 'function') {
     dimensions = Mpx.config.rnConfig.customDimensions(dimensions) || dimensions
   }
-  width = dimensions.screen.width
-  height = dimensions.screen.height
+  global.__mpxAppDimensionsInfo.window = dimensions.window
+  global.__mpxAppDimensionsInfo.screen = dimensions.screen
 }
 
-Dimensions.addEventListener('change', customDimensions)
+function getPageSize (window = global.__mpxAppDimensionsInfo.screen) {
+  return window.width + 'x' + window.height
+}
+
+Dimensions.addEventListener('change', ({ window, screen }) => {
+  const oldScreen = getPageSize(global.__mpxAppDimensionsInfo.screen)
+  useDimensionsInfo({ window, screen })
+
+  // 对比 screen 高宽是否存在变化
+  if (getPageSize(screen) === oldScreen) return
+
+  global.__classCaches?.forEach(cache => cache?.clear())
+
+  // 更新全局和栈顶页面的标记，其他后台页面的标记在show之后更新
+  global.__mpxSizeCount++
+
+  const navigation = getFocusedNavigation()
+
+  if (navigation) {
+    global.__mpxPageSizeCountMap[navigation.pageId] = global.__mpxSizeCount
+    if (hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
+      global.__mpxPageStatusMap[navigation.pageId] = `resize${global.__mpxSizeCount}`
+    }
+  }
+})
 
+// TODO: 1 目前测试鸿蒙下折叠屏screen固定为展开状态下屏幕尺寸，仅window会变化，且window包含状态栏高度
+// TODO: 2 存在部分安卓折叠屏机型在折叠/展开切换时，Dimensions监听到的width/height尺寸错误，并触发多次问题
 function rpx (value) {
+  const screenInfo = global.__mpxAppDimensionsInfo.screen
   // rn 单位 dp = 1(css)px =  1 物理像素 * pixelRatio(像素比)
   // px = rpx * (750 / 屏幕宽度)
-  return value * width / 750
+  return value * screenInfo.width / 750
 }
 function vw (value) {
-  return value * width / 100
+  const screenInfo = global.__mpxAppDimensionsInfo.screen
+  return value * screenInfo.width / 100
 }
 function vh (value) {
-  return value * height / 100
+  const screenInfo = global.__mpxAppDimensionsInfo.screen
+  return value * screenInfo.height / 100
 }
 
 const unit = {
@@ -42,8 +79,14 @@ const unit = {
 
 const empty = {}
 
-function formatValue (value) {
-  if (width === undefined) customDimensions(rawDimensions)
+function formatValue (value, unitType) {
+  if (!dimensionsInfoInitialized) useDimensionsInfo(global.__mpxAppDimensionsInfo)
+  if (unitType === 'hairlineWidth') {
+    return StyleSheet.hairlineWidth
+  }
+  if (unitType && typeof unit[unitType] === 'function') {
+    return unit[unitType](+value)
+  }
   const matched = unitRegExp.exec(value)
   if (matched) {
     if (!matched[2] || matched[2] === 'px') {
@@ -184,29 +227,57 @@ function isNativeStyle (style) {
   )
 }
 
+function getMediaStyle (media) {
+  if (!media || !media.length) return {}
+  const { width } = global.__mpxAppDimensionsInfo.screen
+  return media.reduce((styleObj, item) => {
+    const { options = {}, value = {} } = item
+    const { minWidth, maxWidth } = options
+    if (!isNaN(minWidth) && !isNaN(maxWidth) && width >= minWidth && width <= maxWidth) {
+      Object.assign(styleObj, value)
+    } else if (!isNaN(minWidth) && width >= minWidth) {
+      Object.assign(styleObj, value)
+    } else if (!isNaN(maxWidth) && width <= maxWidth) {
+      Object.assign(styleObj, value)
+    }
+    return styleObj
+  }, {})
+}
+
 export default function styleHelperMixin () {
   return {
     methods: {
+      __getSizeCount () {
+        return global.__mpxPageSizeCountMap[this.__pageId]
+      },
       __getClass (staticClass, dynamicClass) {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, hide) {
         const isNativeStaticStyle = staticStyle && isNativeStyle(staticStyle)
         let result = isNativeStaticStyle ? [] : {}
-        const mergeResult = isNativeStaticStyle ? (o) => result.push(o) : (o) => Object.assign(result, o)
-
-        const classMap = this.__getClassMap?.() || {}
-        const appClassMap = global.__getAppClassMap?.() || {}
+        const mergeResult = isNativeStaticStyle ? (...args) => result.push(...args) : (...args) => Object.assign(result, ...args)
+        // 使用一下 __getSizeCount 触发其 get
+        this.__getSizeCount()
 
         if (staticClass || dynamicClass) {
           // todo 当前为了复用小程序unocss产物，暂时进行mpEscape，等后续正式支持unocss后可不进行mpEscape
           const classString = mpEscape(concat(staticClass, stringifyDynamicClass(dynamicClass)))
+
           classString.split(/\s+/).forEach((className) => {
-            if (classMap[className]) {
-              mergeResult(classMap[className])
-            } else if (appClassMap[className]) {
-              // todo 全局样式在每个页面和组件中生效，以支持全局原子类，后续支持样式模块复用后可考虑移除
-              mergeResult(appClassMap[className])
+            let localStyle, appStyle
+            if (localStyle = this.__getClassStyle?.(className)) {
+              if (localStyle._media?.length) {
+                mergeResult(localStyle._default, getMediaStyle(localStyle._media))
+              } else {
+                mergeResult(localStyle)
+              }
+            } else if (appStyle = global.__getAppClassStyle?.(className)) {
+              if (appStyle._media?.length) {
+                mergeResult(appStyle._default, getMediaStyle(appStyle._media))
+              } else {
+                mergeResult(appStyle)
+              }
             } else if (isObject(this.__props[className])) {
               // externalClasses必定以对象形式传递下来
               mergeResult(this.__props[className])
@@ -236,8 +307,14 @@ export default function styleHelperMixin () {
             flex: 0,
             height: 0,
             width: 0,
-            padding: 0,
-            margin: 0,
+            paddingTop: 0,
+            paddingRight: 0,
+            paddingBottom: 0,
+            paddingLeft: 0,
+            marginTop: 0,
+            marginRight: 0,
+            marginBottom: 0,
+            marginLeft: 0,
             overflow: 'hidden'
           })
         }

package/src/platform/createApp.ios.js

@@ -1,6 +1,6 @@
 import transferOptions from '../core/transferOptions'
 import builtInKeysMap from './patch/builtInKeysMap'
-import { makeMap, spreadProp, getFocusedNavigation, hasOwn } from '@mpxjs/utils'
+import { makeMap, spreadProp, getFocusedNavigation, hasOwn, callWithErrorHandling } from '@mpxjs/utils'
 import { mergeLifecycle } from '../convertor/mergeLifecycle'
 import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
@@ -10,14 +10,10 @@ 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 MpxNav from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
-function getPageSize (window = ReactNative.Dimensions.get('window')) {
-  return window.width + 'x' + window.height
-}
-
 function filterOptions (options, appData) {
   const newOptions = {}
   Object.keys(options).forEach(key => {
@@ -66,21 +62,20 @@ export default function createApp (options) {
               flex: 1
             }
           },
-          createElement(innerNav, {
-            pageConfig: pageConfig,
+          createElement(MpxNav, {
+            pageConfig,
             navigation
           }),
           children
         )
       }
       const getComponent = () => {
-        return item.displayName ? item : item()
+        return item.displayName ? item : callWithErrorHandling(item, null, 'require page script')
       }
       if (key === initialRouteName) {
         return createElement(Stack.Screen, {
           name: key,
           getComponent,
-          initialParams,
           layout: headerLayout
         })
       }
@@ -208,29 +203,20 @@ export default function createApp (options) {
         if (Mpx.config.rnConfig.disableAppStateListener) return
         onAppStateChange(state)
       })
-
-      let count = 0
-      let lastPageSize = getPageSize()
-      const resizeSubScription = ReactNative.Dimensions.addEventListener('change', ({ window }) => {
-        const pageSize = getPageSize(window)
-        if (pageSize === lastPageSize) return
-        lastPageSize = pageSize
-        const navigation = getFocusedNavigation()
-        if (navigation && hasOwn(global.__mpxPageStatusMap, navigation.pageId)) {
-          global.__mpxPageStatusMap[navigation.pageId] = `resize${count++}`
-        }
-      })
       return () => {
         appState.state = 'exit'
         changeSubscription && changeSubscription.remove()
-        resizeSubScription && resizeSubScription.remove()
       }
     }, [])
 
     const { initialRouteName, initialParams } = initialRouteRef.current
+    if (!global.__mpxAppHotLaunched) {
+      global.__mpxInitialRouteName = initialRouteName
+      global.__mpxInitialRunParams = initialParams
+    }
     const navScreenOpts = {
       headerShown: false,
-      statusBarTranslucent: true,
+      statusBarTranslucent: Mpx.config.rnConfig.statusBarTranslucent ?? true,
       statusBarBackgroundColor: 'transparent'
     }
 

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

@@ -1,7 +1,7 @@
 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 { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
+import { SafeAreaProvider, useSafeAreaInsets, initialWindowMetrics } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 export {
@@ -11,5 +11,6 @@ export {
   GestureHandlerRootView,
   PortalHost,
   SafeAreaProvider,
-  useSafeAreaInsets
+  useSafeAreaInsets,
+  initialWindowMetrics
 }

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

@@ -3,25 +3,24 @@ import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../observer/effect'
 import { watch } from '../../observer/watch'
 import { del, reactive, set } from '../../observer/reactive'
-import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, dash2hump, callWithErrorHandling, wrapMethodsWithErrorHandling, error, setFocusedNavigation } from '@mpxjs/utils'
+import { hasOwn, isFunction, noop, isObject, isArray, getByPath, collectDataset, hump2dash, dash2hump, callWithErrorHandling, wrapMethodsWithErrorHandling, error, setFocusedNavigation, getDefaultValueByType } 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 MpxKeyboardAvoidingView from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view'
 import {
   IntersectionObserverContext,
   KeyboardAvoidContext,
+  ProviderContext,
   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, initialWindowMetrics } from '../env/navigationHelper'
+import { useInnerHeaderHeight } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
 
-const ProviderContext = createContext(null)
 function getSystemInfo () {
-  const windowDimensions = ReactNative.Dimensions.get('window')
-  const screenDimensions = ReactNative.Dimensions.get('screen')
+  const windowDimensions = global.__mpxAppDimensionsInfo.window
+  const screenDimensions = global.__mpxAppDimensionsInfo.screen
   return {
     deviceOrientation: windowDimensions.width > windowDimensions.height ? 'landscape' : 'portrait',
     size: {
@@ -172,8 +171,8 @@ const instanceProto = {
               type: field
             }
           }
-          // 处理props默认值
-          propsData[key] = field.value
+          // 处理props默认值，没有显式设置value时根据type获取默认值，与微信小程序原生行为保持一致
+          propsData[key] = hasOwn(field, 'value') ? field.value : getDefaultValueByType(field.type)
         }
       }
     })
@@ -295,13 +294,18 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
       instance[key] = method.bind(instance)
     })
   }
-
+  const loadParams = {}
   if (type === 'page') {
     const props = propsRef.current
     instance.route = props.route.name
     global.__mpxPagesMap = global.__mpxPagesMap || {}
     global.__mpxPagesMap[props.route.key] = [instance, props.navigation]
     setFocusedNavigation(props.navigation)
+
+    if (!global.__mpxAppHotLaunched && global.__mpxInitialRunParams) {
+      Object.assign(loadParams, global.__mpxInitialRunParams)
+    }
+    set(global.__mpxPageSizeCountMap, pageId, global.__mpxSizeCount)
     // App onLaunch 在 Page created 之前执行
     if (!global.__mpxAppHotLaunched && global.__mpxAppOnLaunch) {
       global.__mpxAppOnLaunch(props.navigation)
@@ -310,17 +314,16 @@ function createInstance ({ propsRef, type, rawOptions, currentInject, validProps
 
   const proxy = instance.__mpxProxy = new MpxProxy(rawOptions, instance)
   proxy.created()
-
   if (type === 'page') {
     const props = propsRef.current
-    const loadParams = {}
-    // 此处拿到的props.route.params内属性的value被进行过了一次decode, 不符合预期，此处额外进行一次encode来与微信对齐
-    if (isObject(props.route.params)) {
-      for (const key in props.route.params) {
-        loadParams[key] = encodeURIComponent(props.route.params[key])
+    const decodedQuery = {}
+    const rawQuery = Object.assign({}, loadParams, props.route.params || {})
+    if (isObject(rawQuery)) {
+      for (const key in rawQuery) {
+        decodedQuery[key] = decodeURIComponent(rawQuery[key])
       }
     }
-    proxy.callHook(ONLOAD, [loadParams])
+    proxy.callHook(ONLOAD, [rawQuery, decodedQuery])
   }
 
   Object.assign(proxy, {
@@ -375,9 +378,18 @@ const triggerPageStatusHook = (mpxProxy, event) => {
   }
 }
 
-const triggerResizeEvent = (mpxProxy) => {
-  const type = mpxProxy.options.__type__
+const triggerResizeEvent = (mpxProxy, sizeRef) => {
+  const oldSize = sizeRef.current.size
   const systemInfo = getSystemInfo()
+  const newSize = systemInfo.size
+
+  if (oldSize && oldSize.windowWidth === newSize.windowWidth && oldSize.windowHeight === newSize.windowHeight) {
+    return
+  }
+
+  Object.assign(sizeRef.current, systemInfo)
+
+  const type = mpxProxy.options.__type__
   const target = mpxProxy.target
   mpxProxy.callHook(ONRESIZE, [systemInfo])
   if (type === 'page') {
@@ -389,6 +401,8 @@ const triggerResizeEvent = (mpxProxy) => {
 }
 
 function usePageEffect (mpxProxy, pageId) {
+  const sizeRef = useRef(getSystemInfo())
+
   useEffect(() => {
     let unWatch
     const hasShowHook = hasPageHook(mpxProxy, [ONSHOW, 'show'])
@@ -399,27 +413,40 @@ function usePageEffect (mpxProxy, pageId) {
         unWatch = watch(() => pageStatusMap[pageId], (newVal) => {
           if (newVal === 'show' || newVal === 'hide') {
             triggerPageStatusHook(mpxProxy, newVal)
+            // 仅在尺寸确实变化时才触发resize事件
+            triggerResizeEvent(mpxProxy, sizeRef)
+
+            // 如果当前全局size与pagesize不一致，在show之后触发一次resize事件
+            if (newVal === 'show' && global.__mpxPageSizeCountMap[pageId] !== global.__mpxSizeCount) {
+              // 刷新__mpxPageSizeCountMap, 每个页面仅会执行一次，直接驱动render刷新
+              global.__mpxPageSizeCountMap[pageId] = global.__mpxSizeCount
+            }
           } else if (/^resize/.test(newVal)) {
-            triggerResizeEvent(mpxProxy)
+            triggerResizeEvent(mpxProxy, sizeRef)
           }
         }, { sync: true })
       }
     }
     return () => {
       unWatch && unWatch()
+      del(global.__mpxPageSizeCountMap, pageId)
     }
   }, [])
 }
 
 let pageId = 0
 const pageStatusMap = global.__mpxPageStatusMap = reactive({})
-
 function usePageStatus (navigation, pageId) {
   navigation.pageId = pageId
   if (!hasOwn(pageStatusMap, pageId)) {
     set(pageStatusMap, pageId, '')
   }
   useEffect(() => {
+    if (navigation.isFocused && navigation.isFocused()) {
+      Promise.resolve().then(() => {
+        pageStatusMap[pageId] = 'show'
+      })
+    }
     const focusSubscription = navigation.addListener('focus', () => {
       pageStatusMap[pageId] = 'show'
     })
@@ -481,7 +508,17 @@ function getLayoutData (headerHeight) {
   // 在横屏状态下 screen.height = window.height + bottomVirtualHeight
   // 在正常状态   screen.height =  window.height + bottomVirtualHeight + statusBarHeight
   const isLandscape = screenDimensions.height < screenDimensions.width
-  const bottomVirtualHeight = isLandscape ? screenDimensions.height - windowDimensions.height : ((screenDimensions.height - windowDimensions.height - ReactNative.StatusBar.currentHeight) || 0)
+  let bottomVirtualHeight = 0
+  if (ReactNative.Platform.OS === 'android') {
+    if (isLandscape) {
+      bottomVirtualHeight = screenDimensions.height - windowDimensions.height
+    } else {
+      bottomVirtualHeight = initialWindowMetrics?.insets?.bottom || 0
+      if (typeof mpxGlobal.__mpx.config?.rnConfig?.getBottomVirtualHeight === 'function') {
+        bottomVirtualHeight = mpxGlobal.__mpx.config?.rnConfig?.getBottomVirtualHeight() || 0
+      }
+    }
+  }
   return {
     left: 0,
     top: headerHeight,
@@ -497,7 +534,6 @@ function getLayoutData (headerHeight) {
 
 export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
   return function PageWrapperCom ({ navigation, route, ...props }) {
-    const rootRef = useRef(null)
     const keyboardAvoidRef = useRef(null)
     const intersectionObservers = useRef({})
     const currentPageId = useMemo(() => ++pageId, [])
@@ -515,7 +551,7 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     navigation.layout = getLayoutData(headerHeight)
 
     useEffect(() => {
-      const dimensionListener = ReactNative.Dimensions.addEventListener('change', ({ screen }) => {
+      const dimensionListener = ReactNative.Dimensions.addEventListener('change', ({ window, screen }) => {
         navigation.layout = getLayoutData(headerHeight)
       })
       return () => dimensionListener?.remove()
@@ -525,6 +561,8 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
     usePageStatus(navigation, currentPageId)
 
     const withKeyboardAvoidingView = (element) => {
+      if (currentPageConfig.disableKeyboardAvoiding) return element
+      const MpxKeyboardAvoidingView = require('@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view').default
       return createElement(KeyboardAvoidContext.Provider,
         {
           value: keyboardAvoidRef
@@ -549,11 +587,11 @@ export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
         {
           style: {
             flex: 1,
-            backgroundColor: currentPageConfig?.backgroundColor || '#fff',
+            // 页面容器背景色
+            backgroundColor: currentPageConfig?.backgroundColorContent || '#fff',
             // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
             overflow: 'hidden'
-          },
-          ref: rootRef
+          }
         },
         createElement(RouteContext.Provider,
           {