@mpxjs/core 2.10.6-beta.1 → 2.10.6-beta.3

package/package.json

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

package/src/platform/createApp.ios.js

@@ -9,7 +9,8 @@ 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 } from './env/navigationHelper'
+import { NavigationContainer, createNativeStackNavigator, SafeAreaProvider, GestureHandlerRootView } from './env/navigationHelper'
+import { innerNav } from './env/nav'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
@@ -55,23 +56,40 @@ 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: item,
+          component: withHeader(item, { pageConfig }),
           initialParams
           // options
         })
       }
       return createElement(Stack.Screen, {
         name: key,
-        component: item
+        component: withHeader(item, { pageConfig })
         // options
       })
     })

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

@@ -10,13 +10,15 @@ export function init (Mpx) {
     show: [],
     hide: [],
     error: [],
-    rejection: []
+    rejection: [],
+    lazyLoad: []
   }
   global.__navigationHelper = navigationHelper
   if (global.i18n) {
     Mpx.i18n = createI18n(global.i18n)
   }
   initGlobalErrorHandling()
+  initGlobalLazyLoadHandling()
 }
 
 function initGlobalErrorHandling () {
@@ -63,3 +65,13 @@ 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,36 +1,40 @@
 import { createElement, useState, useMemo } from 'react'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import * as ReactNative from 'react-native'
+import { StatusBar, processColor, TouchableOpacity, Image, View, StyleSheet, Text } from 'react-native'
 import Mpx from '../../index'
 
+function convertToHex (color) {
+  try {
+    const intColor = processColor(color)
+    if (intColor === null || intColor === undefined) {
+      return null
+    }
+    // 将32位整数颜色值转换为RGBA
+    const r = (intColor >> 16) & 255
+    const g = (intColor >> 8) & 255
+    const b = intColor & 255
+    // 转换为十六进制
+    const hexR = r.toString(16).padStart(2, '0')
+    const hexG = g.toString(16).padStart(2, '0')
+    const hexB = b.toString(16).padStart(2, '0')
+    return `#${hexR}${hexG}${hexB}`
+  } catch (error) {
+    return null
+  }
+}
+
+const titleHeight = 44
 export function useInnerHeaderHeight (pageconfig) {
   if (pageconfig.navigationStyle === 'custom') {
     return 0
   } else {
     const safeAreaTop = useSafeAreaInsets()?.top || 0
-    const headerHeight = safeAreaTop + getTitleHeight()
+    const headerHeight = safeAreaTop + titleHeight
     return headerHeight
   }
 }
 
-// 固定写死高度
-function getTitleHeight () {
-  return 44
-}
-
-// 计算颜色亮度
-const getColorBrightness = (color) => {
-  const processedColor = ReactNative.processColor(color)
-  if (typeof processedColor === 'number') {
-      const r = (processedColor >> 16) & 255
-      const g = (processedColor >> 8) & 255
-      const b = processedColor & 255
-      return (r * 299 + g * 587 + b * 114) / 1000
-  }
-  return 0
-}
-
-const styles = ReactNative.StyleSheet.create({
+const styles = StyleSheet.create({
   header: {
     elevation: 3
   },
@@ -54,27 +58,41 @@ const styles = ReactNative.StyleSheet.create({
   },
   title: {
     fontSize: 17,
-    fontWeight: 600
+    fontWeight: 600,
+    width: '60%',
+    textAlign: 'center'
   }
 })
-
-export function innerNav ({ props, navigation }) {
-  const { pageConfig } = props
+const NavColor = {
+  White: '#ffffff',
+  Black: '#000000'
+}
+// navigationBarTextStyle只支持黑白'white'/'black
+const validBarTextStyle = (textStyle) => {
+  const textStyleColor = convertToHex(textStyle)
+  if (textStyle && [NavColor.White, NavColor.Black].includes(textStyleColor)) {
+    return textStyleColor
+  } else {
+    return NavColor.White
+  }
+}
+export function innerNav ({ pageConfig, navigation }) {
   const [innerPageConfig, setPageConfig] = useState(pageConfig || {})
   navigation.setPageConfig = (config) => {
     const newConfig = Object.assign({}, innerPageConfig, config)
     setPageConfig(newConfig)
   }
-
   const isCustom = innerPageConfig.navigationStyle === 'custom'
-  if (isCustom) return null
-  const safeAreaTop = useSafeAreaInsets()?.top || 0
-
-  // 回退按钮的颜色，根据背景色的亮度来进行调节
-  const backButtonColor = useMemo(() => {
-    return getColorBrightness(innerPageConfig.navigationBarBackgroundColor) > 128 ? '#000000' : '#ffffff'
-  }, [innerPageConfig.navigationBarBackgroundColor])
+  const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
+  // 状态栏的颜色
+  const statusBarElement = createElement(StatusBar, {
+    translucent: true,
+    backgroundColor: 'transparent',
+    barStyle: (navigationBarTextStyle === NavColor.White) ? 'light-content' : 'dark-content' // 'default'/'light-content'/'dark-content'
+  })
 
+  if (isCustom) return statusBarElement
+  const safeAreaTop = useSafeAreaInsets()?.top || 0
   // 假设是栈导航，获取栈的长度
   const stackLength = navigation.getState()?.routes?.length
   // 用于外部注册打开RN容器之前的栈长度
@@ -82,27 +100,30 @@ export function innerNav ({ props, navigation }) {
 
   // 回退按钮与图标
   const backElement = stackLength + beforeStackLength > 1
-  ? createElement(ReactNative.TouchableOpacity, {
+  ? createElement(TouchableOpacity, {
     style: [styles.backButton],
     onPress: () => { navigation.goBack() }
-  }, createElement(ReactNative.Image, {
+  }, createElement(Image, {
     source: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg==' },
-    style: [styles.backButtonImage, { tintColor: backButtonColor }]
+    // 回退按钮的颜色与设置的title文案颜色一致
+    style: [styles.backButtonImage, { tintColor: navigationBarTextStyle }]
   }))
   : null
 
-  return createElement(ReactNative.View, {
+  return createElement(View, {
       style: [styles.header, {
           paddingTop: safeAreaTop,
           backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
         }]
       },
-      createElement(ReactNative.View, {
+      statusBarElement,
+      createElement(View, {
         style: styles.headerContent,
-        height: getTitleHeight()
+        height: titleHeight
       }, backElement,
-      createElement(ReactNative.Text, {
-        style: [styles.title, { color: innerPageConfig.navigationBarTextStyle || 'white' }]
+      createElement(Text, {
+        style: [styles.title, { color: navigationBarTextStyle }],
+        numberOfLines: 1
       }, innerPageConfig.navigationBarTitleText?.trim() || ''))
     )
 }

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, GestureHandlerRootView } from '../env/navigationHelper'
-import { innerNav, useInnerHeaderHeight } from '../env/nav'
+import { PortalHost, useSafeAreaInsets } from '../env/navigationHelper'
+import { useInnerHeaderHeight } from '../env/nav'
 
 const ProviderContext = createContext(null)
 function getSystemInfo () {
@@ -419,6 +419,22 @@ 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) => {
@@ -447,8 +463,6 @@ 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才符合预期
@@ -461,8 +475,8 @@ function getLayoutData (headerHeight) {
   }
 }
 
-export function PageWrapperHOC (WrappedComponent) {
-  return function PageWrapperCom ({ navigation, route, pageConfig = {}, ...props }) {
+export function PageWrapperHOC (WrappedComponent, pageConfig = {}) {
+  return function PageWrapperCom ({ navigation, route, ...props }) {
     const rootRef = useRef(null)
     const keyboardAvoidRef = useRef(null)
     const intersectionObservers = useRef({})
@@ -479,11 +493,15 @@ export function PageWrapperHOC (WrappedComponent) {
     }
     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) => {
@@ -506,49 +524,38 @@ export function PageWrapperHOC (WrappedComponent) {
     }
     // android存在第一次打开insets都返回为0情况，后续会触发第二次渲染后正确
     navigation.insets = useSafeAreaInsets()
-    return createElement(GestureHandlerRootView,
-      {
-        style: {
-          flex: 1
-        }
-      },
-      createElement(innerNav, {
-        props: { pageConfig: currentPageConfig },
-        navigation
-      }),
-      withKeyboardAvoidingView(
-        createElement(ReactNative.View,
+    return withKeyboardAvoidingView(
+      createElement(ReactNative.View,
+        {
+          style: {
+            flex: 1,
+            backgroundColor: currentPageConfig?.backgroundColor || '#fff',
+            // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
+            overflow: 'hidden'
+          },
+          ref: rootRef
+        },
+        createElement(RouteContext.Provider,
           {
-            style: {
-              flex: 1,
-              backgroundColor: currentPageConfig?.backgroundColor || '#fff',
-              // 解决页面内有元素定位relative left为负值的时候，回退的时候还能看到对应元素问题
-              overflow: 'hidden'
-            },
-            ref: rootRef,
-            onLayout
+            value: routeContextValRef.current
           },
-          createElement(RouteContext.Provider,
+          createElement(IntersectionObserverContext.Provider,
             {
-              value: routeContextValRef.current
+              value: intersectionObservers.current
             },
-            createElement(IntersectionObserverContext.Provider,
-              {
-                value: intersectionObservers.current
-              },
-              createElement(PortalHost,
-                null,
-                createElement(WrappedComponent, {
-                  ...props,
-                  navigation,
-                  route,
-                  id: currentPageId
-                })
-              )
+            createElement(PortalHost,
+              null,
+              createElement(WrappedComponent, {
+                ...props,
+                navigation,
+                route,
+                id: currentPageId
+              })
             )
           )
         )
-      ))
+      )
+    )
   }
 }
 export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
@@ -618,7 +625,6 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     })
 
     usePageEffect(proxy, pageId)
-
     useEffect(() => {
       proxy.mounted()
       return () => {
@@ -691,11 +697,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
   }
 
   if (type === 'page') {
-    return (props) =>
-      createElement(PageWrapperHOC(defaultOptions), {
-        pageConfig: currentInject.pageConfig,
-        ...props
-      })
+    return PageWrapperHOC(defaultOptions, currentInject.pageConfig)
   }
   return defaultOptions
 }

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

@@ -1,17 +0,0 @@
-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
-}