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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/core",
-  "version": "2.10.7-beta.6",
+  "version": "2.10.7-beta.7",
   "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/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'
@@ -101,28 +100,28 @@ 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==' },
     // 回退按钮的颜色与设置的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) {