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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mpxjs/core",
3
- "version": "2.10.7-beta.5",
3
+ "version": "2.10.7-beta.7",
4
4
  "description": "mpx runtime core",
5
5
  "keywords": [
6
6
  "miniprogram",
@@ -4,7 +4,7 @@ export default function pageRouteMixin (mixinType) {
4
4
  if (mixinType === 'page') {
5
5
  return {
6
6
  [BEFORECREATE] () {
7
- const mpxEventChannel = global.__mpxEventChannel
7
+ const mpxEventChannel = global.__mpxEventChannel || {}
8
8
  if (mpxEventChannel.route === this.route) {
9
9
  this._eventChannel = mpxEventChannel.eventChannel
10
10
  } else {
@@ -9,7 +9,8 @@ import { watch } from '../observer/watch'
9
9
  import { createElement, memo, useRef, useEffect } from 'react'
10
10
  import * as ReactNative from 'react-native'
11
11
  import { initAppProvides } from './export/inject'
12
- import { NavigationContainer, createNativeStackNavigator, SafeAreaProvider } from './env/navigationHelper'
12
+ import { NavigationContainer, createNativeStackNavigator, SafeAreaProvider, GestureHandlerRootView } from './env/navigationHelper'
13
+ import { innerNav } from './env/nav'
13
14
 
14
15
  const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
15
16
 
@@ -55,23 +56,40 @@ export default function createApp (options) {
55
56
  const pages = currentInject.getPages() || {}
56
57
  const firstPage = currentInject.firstPage
57
58
  const Stack = createNativeStackNavigator()
59
+ const withHeader = (wrappedComponent, { pageConfig = {} }) => {
60
+ return ({ navigation, ...props }) => {
61
+ return createElement(GestureHandlerRootView,
62
+ {
63
+ style: {
64
+ flex: 1
65
+ }
66
+ },
67
+ createElement(innerNav, {
68
+ pageConfig: pageConfig,
69
+ navigation
70
+ }),
71
+ createElement(wrappedComponent, { navigation, ...props })
72
+ )
73
+ }
74
+ }
58
75
  const getPageScreens = (initialRouteName, initialParams) => {
59
76
  return Object.entries(pages).map(([key, item]) => {
60
77
  // const options = {
61
78
  // // __mpxPageStatusMap 为编译注入的全局变量
62
79
  // headerShown: !(Object.assign({}, global.__mpxPageConfig, global.__mpxPageConfigsMap[key]).navigationStyle === 'custom')
63
80
  // }
81
+ const pageConfig = Object.assign({}, global.__mpxPageConfig, global.__mpxPageConfigsMap[key])
64
82
  if (key === initialRouteName) {
65
83
  return createElement(Stack.Screen, {
66
84
  name: key,
67
- component: item,
85
+ component: withHeader(item, { pageConfig }),
68
86
  initialParams
69
87
  // options
70
88
  })
71
89
  }
72
90
  return createElement(Stack.Screen, {
73
91
  name: key,
74
- component: item
92
+ component: withHeader(item, { pageConfig })
75
93
  // options
76
94
  })
77
95
  })
@@ -1,11 +1,11 @@
1
1
  import { createElement, useState, useMemo } from 'react'
2
2
  import { useSafeAreaInsets } from 'react-native-safe-area-context'
3
- import * as ReactNative from 'react-native'
3
+ import { StatusBar, processColor, TouchableOpacity, Image, View, StyleSheet, Text } from 'react-native'
4
4
  import Mpx from '../../index'
5
5
 
6
6
  function convertToHex (color) {
7
7
  try {
8
- const intColor = ReactNative.processColor(color)
8
+ const intColor = processColor(color)
9
9
  if (intColor === null || intColor === undefined) {
10
10
  return null
11
11
  }
@@ -34,7 +34,7 @@ export function useInnerHeaderHeight (pageconfig) {
34
34
  }
35
35
  }
36
36
 
37
- const styles = ReactNative.StyleSheet.create({
37
+ const styles = StyleSheet.create({
38
38
  header: {
39
39
  elevation: 3
40
40
  },
@@ -76,8 +76,7 @@ const validBarTextStyle = (textStyle) => {
76
76
  return NavColor.White
77
77
  }
78
78
  }
79
- export function innerNav ({ props, navigation }) {
80
- const { pageConfig } = props
79
+ export function innerNav ({ pageConfig, navigation }) {
81
80
  const [innerPageConfig, setPageConfig] = useState(pageConfig || {})
82
81
  navigation.setPageConfig = (config) => {
83
82
  const newConfig = Object.assign({}, innerPageConfig, config)
@@ -86,7 +85,7 @@ export function innerNav ({ props, navigation }) {
86
85
  const isCustom = innerPageConfig.navigationStyle === 'custom'
87
86
  const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
88
87
  // 状态栏的颜色
89
- const statusBarElement = createElement(ReactNative.StatusBar, {
88
+ const statusBarElement = createElement(StatusBar, {
90
89
  translucent: true,
91
90
  backgroundColor: 'transparent',
92
91
  barStyle: (navigationBarTextStyle === NavColor.White) ? 'light-content' : 'dark-content' // 'default'/'light-content'/'dark-content'
@@ -101,28 +100,28 @@ export function innerNav ({ props, navigation }) {
101
100
 
102
101
  // 回退按钮与图标
103
102
  const backElement = stackLength + beforeStackLength > 1
104
- ? createElement(ReactNative.TouchableOpacity, {
103
+ ? createElement(TouchableOpacity, {
105
104
  style: [styles.backButton],
106
105
  onPress: () => { navigation.goBack() }
107
- }, createElement(ReactNative.Image, {
106
+ }, createElement(Image, {
108
107
  source: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg==' },
109
108
  // 回退按钮的颜色与设置的title文案颜色一致
110
109
  style: [styles.backButtonImage, { tintColor: navigationBarTextStyle }]
111
110
  }))
112
111
  : null
113
112
 
114
- return createElement(ReactNative.View, {
113
+ return createElement(View, {
115
114
  style: [styles.header, {
116
115
  paddingTop: safeAreaTop,
117
116
  backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
118
117
  }]
119
118
  },
120
119
  statusBarElement,
121
- createElement(ReactNative.View, {
120
+ createElement(View, {
122
121
  style: styles.headerContent,
123
122
  height: titleHeight
124
123
  }, backElement,
125
- createElement(ReactNative.Text, {
124
+ createElement(Text, {
126
125
  style: [styles.title, { color: navigationBarTextStyle }],
127
126
  numberOfLines: 1
128
127
  }, innerPageConfig.navigationBarTitleText?.trim() || ''))
@@ -89,8 +89,8 @@ export function getDefaultOptions ({ type, rawOptions = {} }) {
89
89
  },
90
90
  destroyed () {
91
91
  if (this.__mpxProxy) {
92
- this.__mpxProxy.state = UNMOUNTED
93
92
  this.__mpxProxy.callHook(UNMOUNTED)
93
+ this.__mpxProxy.state = UNMOUNTED
94
94
  }
95
95
  },
96
96
  serverPrefetch (...args) {