@mpxjs/core 2.10.7-beta.6 → 2.10.7-beta.8

package/@types/index.d.ts

@@ -7,7 +7,7 @@
 /// <reference path="./global.d.ts" />
 /// <reference path="./node.d.ts" />
 
-import { GetComputedType } from '@mpxjs/store'
+import type { GetComputedType } from '@mpxjs/store'
 
 export * from '@mpxjs/store'
 
@@ -255,11 +255,27 @@ interface AnyConstructor {
   prototype: any
 }
 
-interface WebviewConfig {
+export interface WebviewConfig {
   hostWhitelists?: Array<string>
   apiImplementations?: object
 }
 
+export interface RnConfig {
+  onStateChange?: (state: any) => void
+  parseAppProps?: (props: any) => ({ initialRouteName?: string, initialParams?: any } | undefined | null | void)
+  /**
+   * 外层可能会异常设置此配置，因此加载监听函数内部
+   */
+  disableAppStateListener?: boolean
+  /** 进入页面是否控制回推按钮的展示以及监听回推按钮的点击 */
+  stackTopConfig?: {
+    /** 是否展示回退按钮 */
+    show?: boolean,
+    /** 监听回退按钮点击 */
+    listener?: Function
+  }
+}
+
 interface MpxConfig {
   useStrictDiff: boolean
   ignoreWarning: boolean | string | RegExp | ((msg: string, location: string, e: Error) => boolean)
@@ -272,8 +288,14 @@ interface MpxConfig {
   forceFlushSync: boolean,
   webRouteConfig: object,
   webConfig: object,
+  /*
+   * 支持两个属性
+   * hostWhitelists Array 类型 支持h5域名白名单安全校验
+   * apiImplementations webview JSSDK接口 例如getlocation
+  */
   webviewConfig: WebviewConfig,
-  rnConfig: object,
+  /** react-native 相关配置，用于挂载事件等，如 onShareAppMessage */
+  rnConfig?: RnConfig,
 }
 
 type SupportedMode = 'wx' | 'ali' | 'qq' | 'swan' | 'tt' | 'web' | 'qa'
@@ -664,9 +686,15 @@ export const SERVERPREFETCH: string
 export const REACTHOOKSEXEC: string
 
 declare global {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   const defineProps: (<T extends Properties = {}>(props: T) => Readonly<GetPropsType<T>>) & (<T>() => Readonly<T>)
   const defineOptions: <D extends Data = {}, P extends Properties = {}, C = {}, M extends Methods = {}, Mi extends Array<any> = [], S extends AnyObject = {}, O extends AnyObject = {}> (opt: ThisTypedComponentOpt<D, P, C, M, Mi, S, O>) => void
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   const defineExpose: <E extends AnyObject = AnyObject>(exposed?: E) => void
   const useContext: () => Context
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
   const withDefaults: <Props, Defaults extends InferDefaults<Props>>(props: Props, defaults: Defaults) => PropsWithDefaults<Props, Defaults>
 }

package/package.json

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

package/src/index.js

@@ -115,6 +115,9 @@ function use (plugin, options = {}) {
 
 APIs.use = use
 
+/**
+ * @returns {import('@mpxjs/core').Mpx}
+ */
 function factory () {
   // 作为原型挂载属性的中间层
   function Mpx () {
@@ -125,6 +128,9 @@ function factory () {
   return Mpx
 }
 
+/**
+ * @type {import('@mpxjs/core').Mpx}
+ */
 const Mpx = factory()
 
 Mpx.config = {

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/nav.js

@@ -1,11 +1,11 @@
 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 = ReactNative.processColor(color)
+    const intColor = processColor(color)
     if (intColor === null || intColor === undefined) {
       return null
     }
@@ -34,7 +34,7 @@ export function useInnerHeaderHeight (pageconfig) {
   }
 }
 
-const styles = ReactNative.StyleSheet.create({
+const styles = StyleSheet.create({
   header: {
     elevation: 3
   },
@@ -76,8 +76,7 @@ const validBarTextStyle = (textStyle) => {
     return NavColor.White
   }
 }
-export function innerNav ({ props, navigation }) {
-  const { pageConfig } = props
+export function innerNav ({ pageConfig, navigation }) {
   const [innerPageConfig, setPageConfig] = useState(pageConfig || {})
   navigation.setPageConfig = (config) => {
     const newConfig = Object.assign({}, innerPageConfig, config)
@@ -86,7 +85,7 @@ export function innerNav ({ props, navigation }) {
   const isCustom = innerPageConfig.navigationStyle === 'custom'
   const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
   // 状态栏的颜色
-  const statusBarElement = createElement(ReactNative.StatusBar, {
+  const statusBarElement = createElement(StatusBar, {
     translucent: true,
     backgroundColor: 'transparent',
     barStyle: (navigationBarTextStyle === NavColor.White) ? 'light-content' : 'dark-content' // 'default'/'light-content'/'dark-content'
@@ -96,33 +95,37 @@ export function innerNav ({ props, navigation }) {
   const safeAreaTop = useSafeAreaInsets()?.top || 0
   // 假设是栈导航，获取栈的长度
   const stackLength = navigation.getState()?.routes?.length
-  // 用于外部注册打开RN容器之前的栈长度
-  const beforeStackLength = Mpx.config?.rnConfig?.beforeStackLength || 0
+  const stackTopConfig = Mpx.config?.rnConfig?.stackTopConfig || {}
 
   // 回退按钮与图标
-  const backElement = stackLength + beforeStackLength > 1
-  ? createElement(ReactNative.TouchableOpacity, {
+  const backElement = stackLength > 1 || stackTopConfig.show
+  ? createElement(TouchableOpacity, {
     style: [styles.backButton],
-    onPress: () => { navigation.goBack() }
-  }, createElement(ReactNative.Image, {
+    onPress: () => {
+      navigation.goBack()
+      if (stackLength <= 1 && stackTopConfig.show && typeof stackTopConfig.listener === 'function') {
+        stackTopConfig.listener?.()
+      }
+    }
+  }, createElement(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(ReactNative.View, {
+  return createElement(View, {
       style: [styles.header, {
           paddingTop: safeAreaTop,
           backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
         }]
       },
       statusBarElement,
-      createElement(ReactNative.View, {
+      createElement(View, {
         style: styles.headerContent,
         height: titleHeight
       }, backElement,
-      createElement(ReactNative.Text, {
+      createElement(Text, {
         style: [styles.title, { color: navigationBarTextStyle }],
         numberOfLines: 1
       }, innerPageConfig.navigationBarTitleText?.trim() || ''))

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

@@ -89,8 +89,8 @@ export function getDefaultOptions ({ type, rawOptions = {} }) {
     },
     destroyed () {
       if (this.__mpxProxy) {
-        this.__mpxProxy.state = UNMOUNTED
         this.__mpxProxy.callHook(UNMOUNTED)
+        this.__mpxProxy.state = UNMOUNTED
       }
     },
     serverPrefetch (...args) {