@mpxjs/webpack-plugin 2.10.14-beta.2 → 2.10.14-beta.21

package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx

@@ -1,8 +1,9 @@
-import React, { ReactNode, useContext, useEffect } from 'react'
+/* eslint-disable space-before-function-paren */
+import React, { ReactNode, useContext, useEffect, useRef } from 'react'
 import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
-import { isIOS } from './utils'
+import { isAndroid, isIOS } from './utils'
 
 type KeyboardAvoidViewProps = {
   children?: ReactNode
@@ -18,15 +19,40 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
+  // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+  // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+  // 因此增加状态标记 + clearTimeout + cancelAnimation 来优化
+  const isShow = useRef<boolean>(false)
+  const timerRef = useRef<NodeJS.Timeout | null>(null)
+  const keybaordHandleTimerRef = useRef<NodeJS.Timeout | null>(null)
+
   const animatedStyle = useAnimatedStyle(() => ({
+    // translate/position top可能会导致底部渲染区域缺失(需要 android 配置聚焦时禁用高度缩小)，margin-top 会导致 portal 的定位失效，无法顶起 portal
     transform: [{ translateY: -offset.value }],
     flexBasis: basic.value as DimensionValue
   }))
 
   const resetKeyboard = () => {
+    if (!isShow.current) {
+      return
+    }
+
+    isShow.current = false
+    timerRef.current && clearTimeout(timerRef.current)
+
     if (keyboardAvoid?.current) {
-      keyboardAvoid.current = null
+      const inputRef = keyboardAvoid.current.ref?.current
+      if (inputRef && inputRef.isFocused() && !keyboardAvoid.current.readyToShow) {
+        // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+        // keyboardAvoid.current.readyToShow = true 表示聚焦到了新的输入框，不需要手动触发失焦
+        inputRef.blur()
+      }
+      if (!keyboardAvoid.current.onKeyboardShow) {
+        keyboardAvoid.current = null
+      }
     }
+
+    cancelAnimation(offset)
     offset.value = withTiming(0, { duration, easing })
     basic.value = 'auto'
   }
@@ -40,68 +66,86 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
-    if (isIOS) {
-      subscriptions = [
-        Keyboard.addListener('keyboardWillShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
-          const { endCoordinates } = evt
-          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
-          setTimeout(() => {
-            ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+    // iphone 16 pro & iphone 其它 pro 上长按可能会触发两次 keyboard show 事件，第一次键盘高度错误，第二次正确，因此不能用节流、仅首次生效等操作控制 show 事件
+    function keybaordAvoding(evt: any, ios = false) {
+      if (keyboardAvoid?.current?.readyToShow) {
+        // 重置标记位
+        keyboardAvoid.current.readyToShow = false
+      }
+
+      if (!keyboardAvoid?.current) {
+        return
+      }
+
+      isShow.current = true
+
+      if (ios) {
+        timerRef.current && clearTimeout(timerRef.current)
+      }
+
+      const { endCoordinates } = evt
+      const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current
+      keyboardAvoid.current.keyboardHeight = endCoordinates.height
+      onKeyboardShow?.()
+      if (adjustPosition) {
+        // 默认沿用旧版本逻辑，在 android 原生关闭键盘避让的情况下应该将该配置设置为 false，走 mpx 的键盘避让逻辑，否则bundle内的所有input都会无法避让键盘
+        const enableNativeKeyboardAvoiding = mpxGlobal?.__mpx?.config?.rnConfig?.enableNativeKeyboardAvoiding ?? true
+        const callback = () => {
+          ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+            function calculateOffset() {
+              // enableNativeKeyboardAvoding 默认开启
+              if (enableNativeKeyboardAvoiding && isAndroid) {
+                const aboveOffset = pageY + height - endCoordinates.screenY
+                const belowOffset = endCoordinates.height - aboveOffset
+                const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
+                const belowValue = Math.min(belowOffset, cursorSpacing)
+                return aboveOffset > 0 ? belowValue : aboveValue
+              }
+
               const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
-              const value = aboveOffset > 0 ? belowValue : aboveValue
-              offset.value = withTiming(value, { duration, easing }, (finished) => {
-                if (finished) {
-                  // Set flexBasic after animation to trigger re-layout and reset layout information
-                  basic.value = '99.99%'
-                }
-              })
-            })
-          })
-        }),
-        Keyboard.addListener('keyboardWillHide', resetKeyboard)
-      ]
-    } else {
-      subscriptions = [
-        Keyboard.addListener('keyboardDidShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
-          const { endCoordinates } = evt
-          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
-          ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-            const aboveOffset = pageY + height - endCoordinates.screenY
-            const belowOffset = endCoordinates.height - aboveOffset
-            const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
-            const belowValue = Math.min(belowOffset, cursorSpacing)
-            const value = aboveOffset > 0 ? belowValue : aboveValue
-            offset.value = withTiming(value, { duration, easing }, (finished) => {
+              return aboveOffset > 0 ? belowValue : aboveValue
+            }
+
+            cancelAnimation(offset)
+            offset.value = withTiming(calculateOffset(), { duration, easing }, finished => {
               if (finished) {
                 // Set flexBasic after animation to trigger re-layout and reset layout information
                 basic.value = '99.99%'
               }
             })
           })
+        }
+        ;(isIOS ? () => (timerRef.current = setTimeout(callback)) : callback)()
+      }
+    }
+
+    if (isIOS) {
+      subscriptions = [
+        Keyboard.addListener('keyboardWillShow', (evt: any) => {
+          if (keybaordHandleTimerRef.current) {
+            clearTimeout(keybaordHandleTimerRef.current)
+          }
+          // iphone 在input聚焦时长按滑动后会导致 show 事件先于 focus 事件发生，因此等一下，等 focus 先触发拿到 input，避免键盘出现但input没顶上去
+          keybaordHandleTimerRef.current = setTimeout(() => keybaordAvoding(evt, true), 32)
         }),
-        Keyboard.addListener('keyboardDidHide', resetKeyboard)
+        Keyboard.addListener('keyboardWillHide', resetKeyboard)
       ]
+    } else {
+      subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)]
     }
 
     return () => {
       subscriptions.forEach(subscription => subscription.remove())
+      timerRef.current && clearTimeout(timerRef.current)
+      keybaordHandleTimerRef.current && clearTimeout(keybaordHandleTimerRef.current)
     }
   }, [keyboardAvoid])
 
   return (
-    <View style={style} onTouchEnd={onTouchEnd}>
-      <Animated.View
-        style={[
-          contentContainerStyle,
-          animatedStyle
-        ]}
-      >
-        {children}
-      </Animated.View>
+    <View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
+      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
     </View>
   )
 }

package/lib/runtime/components/react/mpx-nav-container.tsx

@@ -0,0 +1,33 @@
+import { AnimatedStyle } from 'react-native-reanimated'
+import { useNavShared } from './useNavShared'
+import { NavSharedContext, NavSharedValue } from './context'
+import { useLayoutEffect, useMemo, useState } from 'react'
+import { StyleProp } from 'react-native'
+import { isAndroid } from './utils'
+
+interface MpxNavContainerProps {
+  children?: React.ReactNode
+}
+
+export default function MpxNavContainer (props: MpxNavContainerProps) {
+  const [, setCustomNav] = useNavShared()
+
+  useLayoutEffect(() => {
+    if (!isAndroid) return
+    if (props.children) {
+      setCustomNav(props.children)
+    }
+
+    return () => {
+      setCustomNav(undefined)
+    }
+  }, [props.children])
+
+  return isAndroid ? null : props.children
+}
+
+export function NavSharedProvider ({ children }: { children?: React.ReactNode }) {
+  const [customNav, setCustomNav] = useState()
+  const value = useMemo(() => ({ customNav, setCustomNav } as NavSharedValue), [customNav])
+  return <NavSharedContext.Provider value={value}>{children}</NavSharedContext.Provider>
+}

package/lib/runtime/components/react/mpx-swiper-item.tsx

@@ -84,7 +84,7 @@ const _SwiperItem = forwardRef<HandlerRef<View, SwiperItemProps>, SwiperItemProp
     const inputRange = [step.value, 0]
     const outputRange = [0.7, 1]
     // 实现元素的宽度跟随step从0到真实宽度，且不能触发重新渲染整个组件，通过AnimatedStyle的方式实现
-    const outerLayoutStyle = dir === 'x' ? { width: step.value, height: '100%' } : { width: '100%', height: step.value }
+    const outerLayoutStyle = dir === 'x' ? { width: step.value || '100%', height: '100%' } : { width: '100%', height: step.value || '100%' }
     const transformStyle = []
     if (scale) {
       transformStyle.push({

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -5,7 +5,7 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS
 import React, { JSX, forwardRef, useRef, useEffect, ReactNode, ReactElement, useMemo, createElement } from 'react'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数
-import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture, useRunOnJSCallback } from './utils'
+import { useTransformStyle, splitStyle, splitProps, useLayout, wrapChildren, extendObject, GestureHandler, flatGesture, useRunOnJSCallback, isHarmony } from './utils'
 import { SwiperContext } from './context'
 import Portal from './mpx-portal'
 /**
@@ -33,6 +33,11 @@ type EventDataType = {
   // onUpdate时根据上一个判断方向，onFinalize根据transformStart判断
   transdir: number
 }
+// bindtransition回调的参数
+type EventTransition = {
+  dx: number
+  dy: number
+}
 
 interface SwiperProps {
   children?: ReactNode
@@ -64,6 +69,8 @@ interface SwiperProps {
   'simultaneous-handlers'?: Array<GestureHandler>
   disableGesture?: boolean
   bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindtransition?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
+  bindanimationfinish?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void
 }
 
 /**
@@ -149,7 +156,9 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     circular = false,
     disableGesture = false,
     current: propCurrent = 0,
-    bindchange
+    bindchange,
+    bindtransition,
+    bindanimationfinish
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
@@ -378,6 +387,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }, () => {
           currentIndex.value = nextIndex
           runOnJS(runOnJSCallback)('loop')
+          bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', nextIndex)
         })
       } else {
         // 默认向右, 向下
@@ -393,6 +403,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             offset.value = initOffset
             currentIndex.value = nextIndex
             runOnJS(runOnJSCallback)('loop')
+            bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', nextIndex)
           })
         } else {
           nextIndex = currentIndex.value + 1
@@ -404,6 +415,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           }, () => {
             currentIndex.value = nextIndex
             runOnJS(runOnJSCallback)('loop')
+            runOnJS(runOnJSCallback)('handleAnimationfinish', nextIndex)
           })
         }
       }
@@ -436,11 +448,23 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     bindchange && bindchange(eventData)
   }
 
+  function handleTransition (transData: EventTransition) {
+    const eventData = getCustomEvent('change', {}, { detail: transData, layoutRef: layoutRef })
+    bindtransition && bindtransition(eventData)
+  }
+
+  function handleAnimationfinish (current: number) {
+    const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
+    bindanimationfinish && bindanimationfinish(eventData)
+  }
+
   const runOnJSCallbackRef = useRef({
     loop,
     pauseLoop,
     resumeLoop,
-    handleSwiperChange
+    handleSwiperChange,
+    handleTransition,
+    handleAnimationfinish
   })
   const runOnJSCallback = useRunOnJSCallback(runOnJSCallbackRef)
 
@@ -466,6 +490,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           easing: easeMap[easeingFunc]
         }, () => {
           currentIndex.value = propCurrent
+          bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', propCurrent)
         })
       } else {
         offset.value = targetOffset
@@ -486,7 +511,27 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       runOnJS(runOnJSCallback)('handleSwiperChange', newIndex, propCurrent)
     }
   })
-
+  useAnimatedReaction(() => offset.value, (curOffset, preOffset) => {
+    const curAbsOffset = Math.abs(curOffset)
+    const preAbsOffset = Math.abs(preOffset || 0)
+    const computeOffset = step.value * (currentIndex.value + patchElmNumShared.value)
+    // 有小数点的情况
+    const isEqual = Math.abs(Math.floor(computeOffset) - Math.floor(Math.abs(offset.value))) <= 2
+    if (curAbsOffset !== preAbsOffset && curAbsOffset && !isEqual) {
+      // 移动的距离，手向左滑动正数( curAbsOffset >= preAbsOffset)，右右滑动是负数( curAbsOffset < preAbsOffset)
+      let trans = 0
+      if (curAbsOffset >= preAbsOffset) {
+        trans = curAbsOffset % step.value
+      } else {
+        trans = -(step.value - curAbsOffset % step.value)
+      }
+      const transData = {
+        dx: dir === 'x' ? trans : 0,
+        dy: dir === 'y' ? trans : 0
+      }
+      bindtransition && runOnJS(runOnJSCallback)('handleTransition', transData)
+    }
+  })
   useEffect(() => {
     let patchStep = 0
     if (preMargin !== preMarginShared.value) {
@@ -613,6 +658,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
             currentIndex.value = selectedIndex
             offset.value = resetOffset
             runOnJS(runOnJSCallback)('resumeLoop')
+            bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', selectedIndex)
           }
         })
       } else {
@@ -623,6 +669,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
           if (touchfinish.value !== false) {
             currentIndex.value = selectedIndex
             runOnJS(runOnJSCallback)('resumeLoop')
+            bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', selectedIndex)
           }
         })
       }
@@ -645,6 +692,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         if (touchfinish.value !== false) {
           currentIndex.value = moveToIndex
           runOnJS(runOnJSCallback)('resumeLoop')
+          bindanimationfinish && runOnJS(runOnJSCallback)('handleAnimationfinish', moveToIndex)
         }
       })
     }
@@ -791,6 +839,10 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
         preAbsolutePos.value = e[strAbso]
       })
+      .onEnd((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
+        // 修复某些安卓机型小米 onFinalize拿到的absolute值不正确的问题, onUpdate并不是最终的值
+        preAbsolutePos.value = e[strAbso]
+      })
       .onFinalize((e: GestureStateChangeEvent<PanGestureHandlerEventPayload>) => {
         'worklet'
         if (touchfinish.value) return
@@ -855,10 +907,11 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [gestureSwitch.current])
 
   const animatedStyles = useAnimatedStyle(() => {
+    const opacity = isHarmony ? 1 : (step.value > 0 ? 1 : 0)
     if (dir === 'x') {
-      return { transform: [{ translateX: offset.value }], opacity: step.value > 0 ? 1 : 0 }
+      return { transform: [{ translateX: offset.value }], opacity }
     } else {
-      return { transform: [{ translateY: offset.value }], opacity: step.value > 0 ? 1 : 0 }
+      return { transform: [{ translateY: offset.value }], opacity }
     }
   })
 
@@ -891,4 +944,4 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
 })
 SwiperWrapper.displayName = 'MpxSwiperWrapper'
 
-export default SwiperWrapper
+export default SwiperWrapper

package/lib/runtime/components/react/mpx-textarea.tsx

@@ -4,6 +4,7 @@
  *     type, password, confirm-hold
  *   Addition:
  *     ✔ confirm-type
+ *     ✘ confirm-hold
  *     ✔ auto-height
  *     ✘ fixed
  *     ✘ show-confirm-bar

package/lib/runtime/components/react/mpx-view.tsx

@@ -287,7 +287,7 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       imageProps.resizeMode = 'stretch'
-      if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+      if (type === 'linear' && (!layoutWidth || !layoutHeight) && isNeedLayout(preImageInfo)) {
         // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
         // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
         dimensions = {
@@ -295,6 +295,7 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
           height: 0
         } as { width: NumberVal, height: NumberVal }
       } else {
+        // background-size 手动设置具体值，不会触发 onLayout，需要走这里的逻辑
         dimensions = {
           width: isPercent(width) ? width : +width,
           height: isPercent(height) ? height : +height
@@ -501,7 +502,7 @@ function parseBgImage (text: string): {
   type?: 'image' | 'linear'
   src?: string
 } {
-  if (!text) return {}
+  if (!text || text === 'none') return {}
 
   const src = parseUrl(text)
   if (src) return { src, type: 'image' }

package/lib/runtime/components/react/nav.tsx

@@ -0,0 +1,164 @@
+/* eslint-disable space-before-function-paren */
+import { createElement, useState, useMemo, memo, useContext, useLayoutEffect } from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { StatusBar, processColor, TouchableWithoutFeedback, Image, View, StyleSheet, Text } from 'react-native'
+import { useNavShared } from './useNavShared'
+
+function convertToHex(color?: string) {
+  try {
+    const intColor = processColor(color) as number | null | undefined
+    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: PageConfig) {
+  const safeArea = useSafeAreaInsets()
+  if (pageConfig.navigationStyle === 'custom') {
+    return 0
+  } else {
+    const safeAreaTop = safeArea?.top || 0
+    const headerHeight = safeAreaTop + titleHeight
+    return headerHeight
+  }
+}
+
+const styles = StyleSheet.create({
+  header: {
+    elevation: 3
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  backButton: {
+    position: 'absolute',
+    height: '100%',
+    width: 40,
+    left: 0,
+    top: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  backButtonImage: {
+    width: 22,
+    height: 22
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: 600,
+    width: '60%',
+    textAlign: 'center'
+  }
+})
+const NavColor = {
+  White: '#ffffff',
+  Black: '#000000'
+}
+// navigationBarTextStyle 只支持黑白 'white'/'black
+const validBarTextStyle = (textStyle?: string) => {
+  const textStyleColor = convertToHex(textStyle)
+  if (textStyle && textStyleColor && [NavColor.White, NavColor.Black].includes(textStyleColor)) {
+    return textStyleColor
+  } else {
+    return NavColor.White
+  }
+}
+
+export interface MpxNavProps {
+  pageConfig: PageConfig
+  navigation: any
+}
+
+const BACK_ICON =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg=='
+
+const MpxNav = memo(({ pageConfig, navigation }: MpxNavProps) => {
+  const [innerPageConfig, setPageConfig] = useState<PageConfig>(pageConfig || {})
+  const [customNav] = useNavShared()
+  const safeAreaTop = useSafeAreaInsets()?.top || 0
+
+  navigation.setPageConfig = (config: PageConfig) => {
+    setPageConfig(Object.assign({}, innerPageConfig, config))
+  }
+  const isCustom = innerPageConfig.navigationStyle === 'custom'
+  const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
+  // 状态栏的颜色
+  const statusBarElement = (
+    <StatusBar
+      translucent
+      backgroundColor='transparent'
+      barStyle={navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content'}></StatusBar>
+  )
+
+  if (isCustom) {
+    return (
+      <>
+        {statusBarElement}
+        {customNav}
+      </>
+    )
+  }
+  // 假设是栈导航，获取栈的长度
+  const stackLength = navigation.getState()?.routes?.length
+  const onStackTopBack = mpxGlobal?.__mpx?.config?.rnConfig?.onStackTopBack
+  const isHandleStackTopBack = typeof onStackTopBack === 'function'
+
+  // 回退按钮与图标
+  // prettier-ignore
+  const backElement = stackLength > 1 || isHandleStackTopBack
+    ? (
+      <TouchableWithoutFeedback
+        onPress={() => {
+          if (stackLength <= 1 && isHandleStackTopBack) {
+            onStackTopBack()
+            return
+          }
+          navigation.goBack()
+        }}>
+        <View style={[styles.backButton]}>
+          <Image style={[styles.backButtonImage, { tintColor: navigationBarTextStyle }]} source={{ uri: BACK_ICON }}></Image>
+        </View>
+      </TouchableWithoutFeedback>
+      )
+    : null
+
+  return (
+    <View
+      style={[
+        styles.header,
+        {
+          paddingTop: safeAreaTop,
+          backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
+        }
+      ]}>
+      {statusBarElement}
+      {/* TODO: 确定 height 的有效性 */}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-expect-error */}
+      <View style={styles.headerContent} height={titleHeight}>
+        {backElement}
+        <Text style={[styles.title, { color: navigationBarTextStyle }]} numberOfLines={1}>
+          {innerPageConfig.navigationBarTitleText?.trim() || ''}
+        </Text>
+      </View>
+    </View>
+  )
+})
+
+MpxNav.displayName = 'MpxNav'
+export default MpxNav

package/lib/runtime/components/react/types/common.d.ts

@@ -18,3 +18,22 @@ export type ExtendedFunctionComponent = FunctionComponent & {
 }
 
 export type AnyFunc = (...args: ReadonlyArray<any>) => any
+
+declare global {
+  interface PageConfig {
+    /**
+     * 是否自定义导航栏
+     */
+    navigationStyle?: 'custom'
+    /**
+     * 标题栏样式
+     */
+    navigationBarTextStyle?: 'white' | 'black' | '#ffffff' | '#000000'
+    /**
+     * 页面标题
+     */
+    navigationBarTitleText?: string
+
+    [key: string]: any
+  }
+}

package/lib/runtime/components/react/useNavShared.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react'
+import { NavSharedContext } from './context'
+
+export function useNavShared () {
+  const navSharedValue = useContext(NavSharedContext)
+
+  return [navSharedValue.customNav, navSharedValue.setCustomNav] as const
+}

package/lib/runtime/components/web/mpx-nav-container.vue

@@ -0,0 +1,13 @@
+<script>
+  export default {
+    name: 'mpx-view',
+    data() {
+      return {}
+    },
+    props: {},
+    render() {
+      return this.$slots.default
+    },
+    methods: {}
+  }
+</script>

package/lib/runtime/components/wx/mpx-nav-container.mpx

@@ -0,0 +1,9 @@
+<template>
+    <slot />
+</template>
+<script type="application/json">
+    {
+        "component": true,
+        "usingComponents": {}
+    }
+</script>