@mpxjs/webpack-plugin 2.10.6-beta.8 → 2.10.6-beta.9

package/lib/platform/template/wx/component-config/index.js

@@ -44,6 +44,7 @@ const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
 const stickyHeader = require('./sticky-header')
 const stickySection = require('./sticky-section')
+const navContainer = require('./nav-container')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -129,6 +130,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     component(),
     rootPortal({ print }),
     stickyHeader({ print }),
-    stickySection({ print })
+    stickySection({ print }),
+    navContainer({ print })
   ]
 }

package/lib/platform/template/wx/component-config/nav-container.js

@@ -0,0 +1,27 @@
+const TAG_NAME = 'nav-container'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    web(tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-nav-container'
+    },
+    ios(tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-nav-container'
+    },
+    android(tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-nav-container'
+    },
+    harmony(tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-nav-container'
+    },
+    wx(tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-nav-container'
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+<template>
+    <slot />
+</template>

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

@@ -12,7 +12,6 @@ export type KeyboardAvoidContextValue = MutableRefObject<{
   adjustPosition: boolean
   keyboardHeight?: number
   onKeyboardShow?: () => void
-  blurCallbacks: (() => void)[]
 } | null>
 
 export interface GroupValue {
@@ -42,13 +41,13 @@ export interface IntersectionObserver {
 }
 
 export interface PortalContextValue {
-  mount: (children: React.ReactNode, key?: number | null, id?: number| null) => number| undefined
+  mount: (children: React.ReactNode, key?: number | null, id?: number | null) => number | undefined
   update: (key: number, children: React.ReactNode) => void
   unmount: (key: number) => void
 }
 
 export interface ScrollViewContextValue {
-  gestureRef: React.RefObject<any> | null,
+  gestureRef: React.RefObject<any> | null
   scrollOffset: Animated.Value
 }
 
@@ -58,10 +57,15 @@ export interface RouteContextValue {
 }
 
 export interface StickyContextValue {
-  registerStickyHeader: Function,
+  registerStickyHeader: Function
   unregisterStickyHeader: Function
 }
 
+export interface NavSharedValue {
+  customNav?: React.ReactNode
+  setCustomNav: (value: React.ReactNode) => void
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -89,3 +93,5 @@ export const ScrollViewContext = createContext<ScrollViewContextValue>({ gesture
 export const PortalContext = createContext<PortalContextValue>(null as any)
 
 export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })
+
+export const NavSharedContext = createContext<NavSharedValue>(null as any)

package/lib/runtime/components/react/dist/context.d.ts

@@ -9,7 +9,6 @@ export type KeyboardAvoidContextValue = MutableRefObject<{
     adjustPosition: boolean;
     keyboardHeight?: number;
     onKeyboardShow?: () => void;
-    blurCallbacks: (() => void)[];
 } | null>;
 export interface GroupValue {
     [key: string]: {
@@ -55,6 +54,10 @@ export interface StickyContextValue {
     registerStickyHeader: Function;
     unregisterStickyHeader: Function;
 }
+export interface NavSharedValue {
+    customNav?: React.ReactNode;
+    setCustomNav: (value: React.ReactNode) => void;
+}
 export declare const MovableAreaContext: import("react").Context<{
     width: number;
     height: number;
@@ -72,3 +75,4 @@ export declare const KeyboardAvoidContext: import("react").Context<KeyboardAvoid
 export declare const ScrollViewContext: import("react").Context<ScrollViewContextValue>;
 export declare const PortalContext: import("react").Context<PortalContextValue>;
 export declare const StickyContext: import("react").Context<StickyContextValue>;
+export declare const NavSharedContext: import("react").Context<NavSharedValue>;

package/lib/runtime/components/react/dist/context.js

@@ -15,3 +15,4 @@ export const KeyboardAvoidContext = createContext(null);
 export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
 export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });
+export const NavSharedContext = createContext(null);

package/lib/runtime/components/react/dist/mpx-input.jsx

@@ -145,7 +145,7 @@ const Input = forwardRef((props, ref) => {
     };
     const setKeyboardAvoidContext = () => {
         if (keyboardAvoid) {
-            keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, blurCallbacks: [] };
+            keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition };
         }
     };
     const onTouchStart = () => {
@@ -164,7 +164,7 @@ const Input = forwardRef((props, ref) => {
                 bindfocus(getCustomEvent('focus', evt, {
                     detail: {
                         value: tmpValue.current || '',
-                        height: keyboardAvoid.current?.keyboardHeight
+                        height: keyboardAvoid.current?.keyboardHeight,
                     },
                     layoutRef
                 }, props));
@@ -184,7 +184,6 @@ const Input = forwardRef((props, ref) => {
         }
     };
     const onBlur = (evt) => {
-        keyboardAvoid?.current?.blurCallbacks.forEach(fn => fn());
         bindblur && bindblur(getCustomEvent('blur', evt, {
             detail: {
                 value: tmpValue.current || '',

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

@@ -1,7 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { Keyboard, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
-import { getWindowInfo } from '@mpxjs/api-proxy';
 import { KeyboardAvoidContext } from './context';
 import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigation }) => {
@@ -11,7 +10,8 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
     const animatedStyle = useAnimatedStyle(() => ({
-        transform: [{ translateY: -offset.value }],
+        // translate/position top可能会导致地步渲染区域缺失
+        marginTop: -offset.value,
         flexBasis: basic.value
     }));
     const resetKeyboard = () => {
@@ -22,11 +22,6 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
                 inputRef.blur();
             }
             keyboardAvoid.current = null;
-            navigation.setPageConfig({
-                animatedNavStyle: {
-                    top: withTiming(0, { duration: 100, easing: Easing.in(Easing.bezierFn(0.51, 1.18, 0.97, 0.94)) })
-                }
-            });
         }
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
@@ -54,7 +49,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
                                 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) => {
+                                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%';
@@ -74,39 +69,22 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
                         return;
                     const { endCoordinates } = evt;
                     const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current;
-                    // android 上键盘消失只能使用 keyboardDidHide 事件，对于需要和键盘一起改变位置的 nav 来说
-                    // keyboardDidHide 是比较晚的，从动画上看也并不同步，因此采用比较早的blur
-                    keyboardAvoid.current.blurCallbacks.push(resetKeyboard);
                     keyboardAvoid.current.keyboardHeight = endCoordinates.height;
                     onKeyboardShow?.();
-                    if (adjustPosition) {
-                        ref?.current?.measure((x, y, width, height, pageX, pageY) => {
-                            const screenHeightRatio = getWindowInfo().screenHeight /
-                                (endCoordinates.screenY + endCoordinates.height);
-                            const navAboveOffset = pageY + height - Math.floor(endCoordinates.screenY * screenHeightRatio);
-                            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;
-                            navigation.setPageConfig({
-                                animatedNavStyle: {
-                                    // android 手机本身支持将页面整体上移（包含 nav 和 body）
-                                    // mpx-keyboard-avoiding-view 和 nav 使用 transform 时互不影响，因此这里只需要计算 android 键盘出现导致上移的高度即可
-                                    top: withTiming(navAboveOffset, {
-                                        duration: 100,
-                                        easing
-                                    })
-                                }
-                            });
-                            offset.value = withTiming(value, { duration, easing }, (finished) => {
+                    ref?.current?.measure((x, y, width, height, pageX, pageY) => {
+                        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;
+                        if (adjustPosition) {
+                            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('keyboardDidHide', resetKeyboard)
             ];
@@ -116,12 +94,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
         };
     }, [keyboardAvoid]);
     return (<View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
-      <Animated.View style={[
-            contentContainerStyle,
-            animatedStyle
-        ]}>
-        {children}
-      </Animated.View>
+      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
     </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';

package/lib/runtime/components/react/dist/mpx-nav-container.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface MpxNavContainerProps {
+    children?: React.ReactNode;
+}
+export default function MpxNavContainer(props: MpxNavContainerProps): import("react").ReactNode;
+export declare function NavSharedProvider({ children }: {
+    children?: React.ReactNode;
+}): import("react").JSX.Element;
+export {};

package/lib/runtime/components/react/dist/mpx-nav-container.jsx

@@ -0,0 +1,23 @@
+import { useNavShared } from './useNavShared';
+import { NavSharedContext } from './context';
+import { useLayoutEffect, useMemo, useState } from 'react';
+import { isAndroid } from './utils';
+export default function MpxNavContainer(props) {
+    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 }) {
+    const [customNav, setCustomNav] = useState();
+    const value = useMemo(() => ({ customNav, setCustomNav }), [customNav]);
+    return <NavSharedContext.Provider value={value}>{children}</NavSharedContext.Provider>;
+}

package/lib/runtime/components/react/dist/nav.jsx

@@ -2,7 +2,7 @@
 import { createElement, useState, useMemo, memo } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { StatusBar, processColor, TouchableWithoutFeedback, Image, View, StyleSheet, Text } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
+import { useNavShared } from './useNavShared';
 function convertToHex(color) {
     try {
         const intColor = processColor(color);
@@ -83,16 +83,10 @@ function createMpxNav(options) {
     const { Mpx } = options;
     const innerNav = memo(({ pageConfig, navigation }) => {
         const [innerPageConfig, setPageConfig] = useState(pageConfig || {});
-        const translateY = useSharedValue(0);
+        const [customNav] = useNavShared();
         const safeAreaTop = useSafeAreaInsets()?.top || 0;
-        const animatedStyle = useAnimatedStyle(() => ({
-            transform: [{ translateY: translateY.value }]
-        }));
         navigation.setPageConfig = (config) => {
-            const newConfig = Object.assign({}, innerPageConfig, config);
-            translateY.value =
-                newConfig?.animatedNavStyle?.top ?? withTiming(0, { duration: 100, easing: Easing.in(Easing.bezierFn(0.51, 1.18, 0.97, 0.94)) });
-            setPageConfig(newConfig);
+            setPageConfig(Object.assign({}, innerPageConfig, config));
         };
         const isCustom = innerPageConfig.navigationStyle === 'custom';
         const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle]);
@@ -104,7 +98,10 @@ function createMpxNav(options) {
             barStyle: navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content' // 'default'/'light-content'/'dark-content'
         });
         if (isCustom)
-            return statusBarElement;
+            return (<>
+          {statusBarElement}
+          {customNav}
+        </>);
         // 假设是栈导航，获取栈的长度
         const stackLength = navigation.getState()?.routes?.length;
         const onStackTopBack = Mpx.config?.rnConfig?.onStackTopBack;
@@ -124,28 +121,24 @@ function createMpxNav(options) {
           </View>
         </TouchableWithoutFeedback>)
             : null;
-        return (
-        // 不设置 zIndex transform 无法生效
-        <Animated.View style={[{ position: 'relative', zIndex: 10000 }, animatedStyle]}>
-        <View style={[
+        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>
+        {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>
-      </Animated.View>);
+      </View>);
         // return createElement(
         //   Animated.View,
         //   {

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useNavShared(): readonly [import("react").ReactNode, (value: import("react").ReactNode) => void];

package/lib/runtime/components/react/dist/useNavShared.js

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

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

@@ -281,7 +281,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const setKeyboardAvoidContext = () => {
     if (keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, blurCallbacks: [] }
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition }
     }
   }
 
@@ -298,6 +298,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
     if (!keyboardAvoid?.current) {
       setKeyboardAvoidContext()
     }
+
     if (bindfocus && keyboardAvoid?.current) {
       const focusAction = () => {
         bindfocus(
@@ -307,7 +308,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
             {
               detail: {
                 value: tmpValue.current || '',
-                height: keyboardAvoid.current?.keyboardHeight
+                height: keyboardAvoid.current?.keyboardHeight,
               },
               layoutRef
             },
@@ -330,7 +331,6 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    keyboardAvoid?.current?.blurCallbacks.forEach(fn => fn())
     bindblur && bindblur(
       getCustomEvent(
         'blur',

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

@@ -1,7 +1,6 @@
 import React, { ReactNode, useContext, useEffect } from 'react'
 import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
-import { getWindowInfo } from '@mpxjs/api-proxy'
 import { KeyboardAvoidContext } from './context'
 import { isIOS } from './utils'
 
@@ -21,7 +20,8 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
   const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: -offset.value }],
+    // translate/position top可能会导致地步渲染区域缺失
+    marginTop: -offset.value,
     flexBasis: basic.value as DimensionValue
   }))
 
@@ -33,11 +33,6 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
         inputRef.blur()
       }
       keyboardAvoid.current = null
-      navigation.setPageConfig({
-        animatedNavStyle: {
-          top: withTiming(0, { duration: 100, easing: Easing.in(Easing.bezierFn(0.51, 1.18, 0.97, 0.94)) })
-        }
-      })
     }
     offset.value = withTiming(0, { duration, easing })
     basic.value = 'auto'
@@ -67,7 +62,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
                 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) => {
+                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%'
@@ -85,43 +80,23 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
           if (!keyboardAvoid?.current) return
           const { endCoordinates } = evt
           const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current
-          // android 上键盘消失只能使用 keyboardDidHide 事件，对于需要和键盘一起改变位置的 nav 来说
-          // keyboardDidHide 是比较晚的，从动画上看也并不同步，因此采用比较早的blur
-          keyboardAvoid.current.blurCallbacks.push(resetKeyboard)
           keyboardAvoid.current.keyboardHeight = endCoordinates.height
           onKeyboardShow?.()
-          if (adjustPosition) {
-            ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-              const screenHeightRatio =
-              getWindowInfo().screenHeight /
-              (endCoordinates.screenY + endCoordinates.height)
-              const navAboveOffset = pageY + height - Math.floor(endCoordinates.screenY * screenHeightRatio)
-
-              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
+          ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+            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
 
-              navigation.setPageConfig({
-                animatedNavStyle: {
-                  // android 手机本身支持将页面整体上移（包含 nav 和 body）
-                  // mpx-keyboard-avoiding-view 和 nav 使用 transform 时互不影响，因此这里只需要计算 android 键盘出现导致上移的高度即可
-                  top: withTiming(navAboveOffset, {
-                    duration: 100,
-                    easing
-                  })
-                }
-              })
-
-              offset.value = withTiming(value, { duration, easing }, (finished) => {
+            if (adjustPosition) {
+              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('keyboardDidHide', resetKeyboard)
       ]
@@ -134,14 +109,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigati
 
   return (
     <View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
-      <Animated.View
-        style={[
-          contentContainerStyle,
-          animatedStyle
-        ]}
-      >
-        {children}
-      </Animated.View>
+      <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/nav.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable space-before-function-paren */
-import { createElement, useState, useMemo, memo } from 'react'
+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 Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
+import { useNavShared } from './useNavShared'
 
 function convertToHex(color?: string) {
   try {
@@ -95,19 +95,11 @@ function createMpxNav(options: MpxNavFactorOptions) {
   const { Mpx } = options
   const innerNav = memo(({ pageConfig, navigation }: MpxNavProps) => {
     const [innerPageConfig, setPageConfig] = useState<PageConfig>(pageConfig || {})
-
-    const translateY = useSharedValue(0)
+    const [customNav] = useNavShared()
     const safeAreaTop = useSafeAreaInsets()?.top || 0
 
-    const animatedStyle = useAnimatedStyle(() => ({
-      transform: [{ translateY: translateY.value }]
-    }))
-
     navigation.setPageConfig = (config: PageConfig) => {
-      const newConfig = Object.assign({}, innerPageConfig, config)
-      translateY.value =
-        newConfig?.animatedNavStyle?.top ?? withTiming(0, { duration: 100, easing: Easing.in(Easing.bezierFn(0.51, 1.18, 0.97, 0.94)) })
-      setPageConfig(newConfig)
+      setPageConfig(Object.assign({}, innerPageConfig, config))
     }
     const isCustom = innerPageConfig.navigationStyle === 'custom'
     const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
@@ -124,7 +116,13 @@ function createMpxNav(options: MpxNavFactorOptions) {
       barStyle: navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content' // 'default'/'light-content'/'dark-content'
     })
 
-    if (isCustom) return statusBarElement
+    if (isCustom)
+      return (
+        <>
+          {statusBarElement}
+          {customNav}
+        </>
+      )
     // 假设是栈导航，获取栈的长度
     const stackLength = navigation.getState()?.routes?.length
     const onStackTopBack = Mpx.config?.rnConfig?.onStackTopBack
@@ -150,28 +148,25 @@ function createMpxNav(options: MpxNavFactorOptions) {
       : null
 
     return (
-      // 不设置 zIndex transform 无法生效
-      <Animated.View style={[{ position: 'relative', zIndex: 10000 }, animatedStyle]}>
-        <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
+        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>
-      </Animated.View>
+      </View>
     )
 
     // return createElement(

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>

package/lib/utils/dom-tag-config.js

@@ -78,7 +78,7 @@ const isBuildInWebTag = makeMap(
   'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
   'mpx-switch,mpx-web-view,mpx-checkbox,mpx-movable-view,mpx-radio,' +
   'mpx-tab-bar-container,mpx-form,mpx-navigator,mpx-rich-text,mpx-tab-bar,' +
-  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
+  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text,mpx-nav-container'
 )
 
 /**
@@ -91,7 +91,7 @@ const isBuildInReactTag = makeMap(
   'mpx-movable-area,mpx-label,mpx-keyboard-avoiding-view,mpx-input,mpx-inline-text,' +
   'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
   'mpx-rich-text,mpx-portal,mpx-popup,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
-  'mpx-icon,mpx-canvas'
+  'mpx-icon,mpx-canvas,mpx-nav-container'
 )
 
 const isSpace = makeMap('ensp,emsp,nbsp')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.6-beta.8",
+  "version": "2.10.6-beta.9",
   "description": "mpx compile core",
   "keywords": [
     "mpx"