@mpxjs/core 2.10.16-beta.5 → 2.10.16-beta.6
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/@types/index.d.ts
CHANGED
|
@@ -381,6 +381,13 @@ export interface RnConfig {
|
|
|
381
381
|
* @param packages 分包名数组
|
|
382
382
|
*/
|
|
383
383
|
downloadChunkAsync?: (packages: Array<string>) => void
|
|
384
|
+
|
|
385
|
+
/**
|
|
386
|
+
* bundle 中是否关闭 android 键盘避让功能,如果关闭需要将该配置设置为 false,使用 mpx 内置的键盘避让逻辑
|
|
387
|
+
* @platform android
|
|
388
|
+
* @default true
|
|
389
|
+
*/
|
|
390
|
+
enableNativeKeyboardAvoiding?: boolean
|
|
384
391
|
}
|
|
385
392
|
|
|
386
393
|
interface MpxConfig {
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ import { createElement, memo, useRef, useEffect } from 'react'
|
|
|
10
10
|
import * as ReactNative from 'react-native'
|
|
11
11
|
import { initAppProvides } from './export/inject'
|
|
12
12
|
import { NavigationContainer, createNativeStackNavigator, SafeAreaProvider, GestureHandlerRootView } from './env/navigationHelper'
|
|
13
|
-
import
|
|
13
|
+
import MpxNav from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
|
|
14
14
|
|
|
15
15
|
const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
|
|
16
16
|
|
|
@@ -66,8 +66,8 @@ export default function createApp (options) {
|
|
|
66
66
|
flex: 1
|
|
67
67
|
}
|
|
68
68
|
},
|
|
69
|
-
createElement(
|
|
70
|
-
pageConfig
|
|
69
|
+
createElement(MpxNav, {
|
|
70
|
+
pageConfig,
|
|
71
71
|
navigation
|
|
72
72
|
}),
|
|
73
73
|
children
|
|
@@ -17,7 +17,7 @@ import {
|
|
|
17
17
|
RouteContext
|
|
18
18
|
} from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
|
|
19
19
|
import { PortalHost, useSafeAreaInsets } from '../env/navigationHelper'
|
|
20
|
-
import { useInnerHeaderHeight } from '
|
|
20
|
+
import { useInnerHeaderHeight } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
|
|
21
21
|
|
|
22
22
|
function getSystemInfo () {
|
|
23
23
|
const windowDimensions = ReactNative.Dimensions.get('window')
|
package/src/platform/env/nav.js
DELETED
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
import { createElement, useState, useMemo, memo } from 'react'
|
|
2
|
-
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
3
|
-
import { StatusBar, processColor, TouchableWithoutFeedback, Image, View, StyleSheet, Text } from 'react-native'
|
|
4
|
-
import Mpx from '../../index'
|
|
5
|
-
|
|
6
|
-
function convertToHex (color) {
|
|
7
|
-
try {
|
|
8
|
-
const intColor = processColor(color)
|
|
9
|
-
if (intColor === null || intColor === undefined) {
|
|
10
|
-
return null
|
|
11
|
-
}
|
|
12
|
-
// 将32位整数颜色值转换为RGBA
|
|
13
|
-
const r = (intColor >> 16) & 255
|
|
14
|
-
const g = (intColor >> 8) & 255
|
|
15
|
-
const b = intColor & 255
|
|
16
|
-
// 转换为十六进制
|
|
17
|
-
const hexR = r.toString(16).padStart(2, '0')
|
|
18
|
-
const hexG = g.toString(16).padStart(2, '0')
|
|
19
|
-
const hexB = b.toString(16).padStart(2, '0')
|
|
20
|
-
return `#${hexR}${hexG}${hexB}`
|
|
21
|
-
} catch (error) {
|
|
22
|
-
return null
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
const titleHeight = 44
|
|
27
|
-
export function useInnerHeaderHeight (pageconfig) {
|
|
28
|
-
if (pageconfig.navigationStyle === 'custom') {
|
|
29
|
-
return 0
|
|
30
|
-
} else {
|
|
31
|
-
const safeAreaTop = useSafeAreaInsets()?.top || 0
|
|
32
|
-
const headerHeight = safeAreaTop + titleHeight
|
|
33
|
-
return headerHeight
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
const styles = StyleSheet.create({
|
|
38
|
-
header: {
|
|
39
|
-
elevation: 3
|
|
40
|
-
},
|
|
41
|
-
headerContent: {
|
|
42
|
-
flexDirection: 'row',
|
|
43
|
-
alignItems: 'center',
|
|
44
|
-
justifyContent: 'center'
|
|
45
|
-
},
|
|
46
|
-
backButton: {
|
|
47
|
-
position: 'absolute',
|
|
48
|
-
height: '100%',
|
|
49
|
-
width: 40,
|
|
50
|
-
left: 0,
|
|
51
|
-
top: 0,
|
|
52
|
-
alignItems: 'center',
|
|
53
|
-
justifyContent: 'center'
|
|
54
|
-
},
|
|
55
|
-
backButtonImage: {
|
|
56
|
-
width: 22,
|
|
57
|
-
height: 22
|
|
58
|
-
},
|
|
59
|
-
title: {
|
|
60
|
-
fontSize: 17,
|
|
61
|
-
fontWeight: 600,
|
|
62
|
-
width: '60%',
|
|
63
|
-
textAlign: 'center'
|
|
64
|
-
}
|
|
65
|
-
})
|
|
66
|
-
const NavColor = {
|
|
67
|
-
White: '#ffffff',
|
|
68
|
-
Black: '#000000'
|
|
69
|
-
}
|
|
70
|
-
// navigationBarTextStyle只支持黑白'white'/'black
|
|
71
|
-
const validBarTextStyle = (textStyle) => {
|
|
72
|
-
const textStyleColor = convertToHex(textStyle)
|
|
73
|
-
if (textStyle && [NavColor.White, NavColor.Black].includes(textStyleColor)) {
|
|
74
|
-
return textStyleColor
|
|
75
|
-
} else {
|
|
76
|
-
return NavColor.White
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
export const innerNav = memo(({ pageConfig, navigation }) => {
|
|
80
|
-
const [innerPageConfig, setPageConfig] = useState(pageConfig || {})
|
|
81
|
-
navigation.setPageConfig = (config) => {
|
|
82
|
-
const newConfig = Object.assign({}, innerPageConfig, config)
|
|
83
|
-
setPageConfig(newConfig)
|
|
84
|
-
}
|
|
85
|
-
const isCustom = innerPageConfig.navigationStyle === 'custom'
|
|
86
|
-
const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
|
|
87
|
-
// 状态栏的颜色
|
|
88
|
-
const statusBarElement = createElement(StatusBar, {
|
|
89
|
-
translucent: true,
|
|
90
|
-
backgroundColor: 'transparent',
|
|
91
|
-
barStyle: (navigationBarTextStyle === NavColor.White) ? 'light-content' : 'dark-content' // 'default'/'light-content'/'dark-content'
|
|
92
|
-
})
|
|
93
|
-
|
|
94
|
-
if (isCustom) return statusBarElement
|
|
95
|
-
const safeAreaTop = useSafeAreaInsets()?.top || 0
|
|
96
|
-
// 假设是栈导航,获取栈的长度
|
|
97
|
-
const stackLength = navigation.getState()?.routes?.length
|
|
98
|
-
const onStackTopBack = Mpx.config?.rnConfig?.onStackTopBack
|
|
99
|
-
const isHandleStackTopBack = typeof onStackTopBack === 'function'
|
|
100
|
-
|
|
101
|
-
// 回退按钮与图标
|
|
102
|
-
const backElement = stackLength > 1 || isHandleStackTopBack
|
|
103
|
-
? createElement(TouchableWithoutFeedback, {
|
|
104
|
-
onPress: () => {
|
|
105
|
-
if (stackLength <= 1 && isHandleStackTopBack) {
|
|
106
|
-
onStackTopBack()
|
|
107
|
-
return
|
|
108
|
-
}
|
|
109
|
-
navigation.goBack()
|
|
110
|
-
}
|
|
111
|
-
}, createElement(View, {
|
|
112
|
-
style: [styles.backButton]
|
|
113
|
-
}, createElement(Image, {
|
|
114
|
-
source: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg==' },
|
|
115
|
-
// 回退按钮的颜色与设置的title文案颜色一致
|
|
116
|
-
style: [styles.backButtonImage, { tintColor: navigationBarTextStyle }]
|
|
117
|
-
})
|
|
118
|
-
))
|
|
119
|
-
: null
|
|
120
|
-
|
|
121
|
-
return createElement(View, {
|
|
122
|
-
style: [styles.header, {
|
|
123
|
-
paddingTop: safeAreaTop,
|
|
124
|
-
backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
|
|
125
|
-
}]
|
|
126
|
-
},
|
|
127
|
-
statusBarElement,
|
|
128
|
-
createElement(View, {
|
|
129
|
-
style: styles.headerContent,
|
|
130
|
-
height: titleHeight
|
|
131
|
-
}, backElement,
|
|
132
|
-
createElement(Text, {
|
|
133
|
-
style: [styles.title, { color: navigationBarTextStyle }],
|
|
134
|
-
numberOfLines: 1
|
|
135
|
-
}, innerPageConfig.navigationBarTitleText?.trim() || ''))
|
|
136
|
-
)
|
|
137
|
-
})
|