@mpxjs/webpack-plugin 2.10.7 → 2.10.8-beta.3

package/lib/runtime/components/react/dist/mpx-sticky-header.jsx

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useContext, forwardRef, useMemo, createElement, useId } from 'react';
+import { Animated, StyleSheet, useAnimatedValue } from 'react-native';
+import { ScrollViewContext, StickyContext } from './context';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import { error } from '@mpxjs/utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+const _StickyHeader = forwardRef((stickyHeaderProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(stickyHeaderProps);
+    const { style, bindstickontopchange, padding = [0, 0, 0, 0], 'offset-top': offsetTop = 0, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const scrollViewContext = useContext(ScrollViewContext);
+    const stickyContext = useContext(StickyContext);
+    const { scrollOffset } = scrollViewContext;
+    const { registerStickyHeader, unregisterStickyHeader } = stickyContext;
+    const headerRef = useRef(null);
+    const isStickOnTopRef = useRef(false);
+    const id = useId();
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: headerRef, onLayout });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const headerTopAnimated = useAnimatedValue(0);
+    // harmony animatedValue 不支持通过 _value 访问
+    const headerTopRef = useRef(0);
+    useEffect(() => {
+        registerStickyHeader({ key: id, updatePosition });
+        return () => {
+            unregisterStickyHeader(id);
+        };
+    }, []);
+    function updatePosition() {
+        if (headerRef.current) {
+            const scrollViewRef = scrollViewContext.gestureRef;
+            if (scrollViewRef && scrollViewRef.current) {
+                headerRef.current.measureLayout(scrollViewRef.current, (left, top) => {
+                    Animated.timing(headerTopAnimated, {
+                        toValue: top,
+                        duration: 0,
+                        useNativeDriver: true
+                    }).start();
+                    headerTopRef.current = top;
+                });
+            }
+            else {
+                error('StickyHeader measureLayout error: scrollViewRef is not a valid native component reference');
+            }
+        }
+    }
+    function onLayout(e) {
+        updatePosition();
+    }
+    useNodesRef(props, ref, headerRef, {
+        style: normalStyle
+    });
+    useEffect(() => {
+        if (!bindstickontopchange)
+            return;
+        const listener = scrollOffset.addListener((state) => {
+            const currentScrollValue = state.value;
+            const newIsStickOnTop = currentScrollValue > headerTopRef.current;
+            if (newIsStickOnTop !== isStickOnTopRef.current) {
+                isStickOnTopRef.current = newIsStickOnTop;
+                bindstickontopchange(getCustomEvent('stickontopchange', {}, {
+                    detail: {
+                        isStickOnTop: newIsStickOnTop
+                    },
+                    layoutRef
+                }, props));
+            }
+        });
+        return () => {
+            scrollOffset.removeListener(listener);
+        };
+    }, []);
+    const animatedStyle = useMemo(() => {
+        const translateY = Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+            extrapolateLeft: 'clamp',
+            extrapolateRight: 'extend'
+        });
+        const finalTranslateY = offsetTop === 0
+            ? translateY
+            : Animated.add(translateY, Animated.subtract(scrollOffset, headerTopAnimated).interpolate({
+                inputRange: [0, 1],
+                outputRange: [0, offsetTop],
+                extrapolate: 'clamp'
+            }));
+        return {
+            transform: [{ translateY: finalTranslateY }]
+        };
+    }, [scrollOffset, headerTopAnimated, offsetTop]);
+    const innerProps = useInnerProps(extendObject({}, props, {
+        ref: headerRef,
+        style: extendObject({}, styles.content, innerStyle, animatedStyle, {
+            paddingTop: padding[0] || 0,
+            paddingRight: padding[1] || 0,
+            paddingBottom: padding[2] || 0,
+            paddingLeft: padding[3] || 0
+        })
+    }, layoutProps), [], { layoutRef });
+    return (createElement(Animated.View, innerProps, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    })));
+});
+const styles = StyleSheet.create({
+    content: {
+        width: '100%',
+        zIndex: 10,
+        // harmony 需要手动设置 relative， zIndex 才生效
+        position: 'relative'
+    }
+});
+_StickyHeader.displayName = 'MpxStickyHeader';
+export default _StickyHeader;

package/lib/runtime/components/react/dist/mpx-sticky-section.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+interface StickySectionProps {
+    children?: ReactNode;
+    style?: ViewStyle;
+    'offset-top'?: number;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+}
+declare const _StickySection: import("react").ForwardRefExoticComponent<StickySectionProps & import("react").RefAttributes<HandlerRef<View, StickySectionProps>>>;
+export default _StickySection;

package/lib/runtime/components/react/dist/mpx-sticky-section.jsx

@@ -0,0 +1,45 @@
+import { useRef, forwardRef, createElement, useCallback, useMemo } from 'react';
+import { View } from 'react-native';
+import useNodesRef from './useNodesRef';
+import { splitProps, splitStyle, useTransformStyle, wrapChildren, useLayout, extendObject } from './utils';
+import { StickyContext } from './context';
+import useInnerProps from './getInnerListeners';
+const _StickySection = forwardRef((stickySectionProps = {}, ref) => {
+    const { textProps, innerProps: props = {} } = splitProps(stickySectionProps);
+    const { style, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const sectionRef = useRef(null);
+    const { normalStyle, hasVarDec, varContextRef, hasSelfPercent, setWidth, setHeight } = useTransformStyle(style, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef: sectionRef, onLayout });
+    const { textStyle, innerStyle = {} } = splitStyle(normalStyle);
+    const stickyHeaders = useRef(new Map());
+    const registerStickyHeader = useCallback((item) => {
+        stickyHeaders.current.set(item.id, item);
+    }, []);
+    const unregisterStickyHeader = useCallback((id) => {
+        stickyHeaders.current.delete(id);
+    }, []);
+    const contextValue = useMemo(() => ({
+        registerStickyHeader,
+        unregisterStickyHeader
+    }), []);
+    useNodesRef(props, ref, sectionRef, {
+        style: normalStyle
+    });
+    function onLayout() {
+        stickyHeaders.current.forEach(item => {
+            item.updatePosition();
+        });
+    }
+    const innerProps = useInnerProps(extendObject({}, props, {
+        style: extendObject(innerStyle, layoutStyle),
+        ref: sectionRef
+    }, layoutProps), [], { layoutRef });
+    return (createElement(View, innerProps, createElement(StickyContext.Provider, { value: contextValue }, wrapChildren(props, {
+        hasVarDec,
+        varContext: varContextRef.current,
+        textStyle,
+        textProps
+    }))));
+});
+_StickySection.displayName = 'MpxStickySection';
+export default _StickySection;

package/lib/runtime/components/react/dist/mpx-swiper-item.d.ts

@@ -0,0 +1,18 @@
+import { View } from 'react-native';
+import { ReactNode } from 'react';
+import { HandlerRef } from './useNodesRef';
+interface SwiperItemProps {
+    'item-id'?: string;
+    'enable-offset'?: boolean;
+    'enable-var': boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    children?: ReactNode;
+    style?: Object;
+    customStyle: Object;
+    itemIndex: number;
+}
+declare const _SwiperItem: import("react").ForwardRefExoticComponent<SwiperItemProps & import("react").RefAttributes<HandlerRef<View, SwiperItemProps>>>;
+export default _SwiperItem;

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

@@ -0,0 +1,52 @@
+import { View, NativeSyntheticEvent } from 'react-native';
+import React, { ReactNode } from 'react';
+import { HandlerRef } from './useNodesRef';
+import { GestureHandler } from './utils';
+/**
+ * ✔ indicator-dots
+ * ✔ indicator-color
+ * ✔ indicator-active-color
+ * ✔ autoplay
+ * ✔ current
+ * ✔ interval
+ * ✔ duration
+ * ✔ circular
+ * ✔ vertical
+ * ✔ previous-margin
+ * ✔ next-margin
+ * ✔ easing-function  ="easeOutCubic"
+ * ✘ display-multiple-items
+ * ✘ snap-to-edge
+ */
+type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic';
+interface SwiperProps {
+    children?: ReactNode;
+    circular?: boolean;
+    current?: number;
+    interval?: number;
+    autoplay?: boolean;
+    duration?: number;
+    scale?: boolean;
+    'indicator-dots'?: boolean;
+    'indicator-color'?: string;
+    'indicator-active-color'?: string;
+    vertical?: boolean;
+    style: {
+        [key: string]: any;
+    };
+    'easing-function'?: EaseType;
+    'previous-margin'?: string;
+    'next-margin'?: string;
+    'enable-offset'?: boolean;
+    'enable-var': boolean;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'external-var-context'?: Record<string, any>;
+    'wait-for'?: Array<GestureHandler>;
+    'simultaneous-handlers'?: Array<GestureHandler>;
+    disableGesture?: boolean;
+    bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const SwiperWrapper: React.ForwardRefExoticComponent<SwiperProps & React.RefAttributes<HandlerRef<View, SwiperProps>>>;
+export default SwiperWrapper;

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

@@ -71,7 +71,7 @@ const easeMap = {
     easeInOutCubic: Easing.inOut(Easing.cubic)
 };
 const SwiperWrapper = forwardRef((props, ref) => {
-    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false } = props;
+    const { 'indicator-dots': showPagination, 'indicator-color': dotColor = 'rgba(0, 0, 0, .3)', 'indicator-active-color': activeDotColor = '#000000', 'enable-var': enableVar = false, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight, 'external-var-context': externalVarContext, 'simultaneous-handlers': originSimultaneousHandlers = [], 'wait-for': waitFor = [], style = {}, autoplay = false, circular = false, disableGesture = false, bindchange } = props;
     const easeingFunc = props['easing-function'] || 'default';
     const easeDuration = props.duration || 500;
     const horizontal = props.vertical !== undefined ? !props.vertical : true;
@@ -330,6 +330,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         if (props.current !== currentIndex.value) {
             const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef });
             props.bindchange && props.bindchange(eventData);
+            bindchange && bindchange(eventData);
         }
     }
     function getOffset(index, stepValue) {
@@ -373,7 +374,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
     useAnimatedReaction(() => currentIndex.value, (newIndex, preIndex) => {
         // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-        if (newIndex !== preIndex && props.bindchange) {
+        if (newIndex !== preIndex && bindchange) {
             runOnJS(handleSwiperChange)(newIndex);
         }
     });

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+/**
+ * ✔ checked
+ * ✔ type
+ * ✔ disabled
+ * ✔ color
+ */
+import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+interface _SwitchProps extends SwitchProps {
+    style?: ViewStyle;
+    name?: string;
+    checked?: boolean;
+    type: 'switch' | 'checkbox';
+    disabled: boolean;
+    color: string;
+    'enable-var'?: boolean;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'external-var-context'?: Record<string, any>;
+    bindchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    catchchange?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const _Switch: import("react").ForwardRefExoticComponent<_SwitchProps & import("react").RefAttributes<HandlerRef<Switch, _SwitchProps>>>;
+export default _Switch;

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

@@ -0,0 +1,21 @@
+/**
+ * ✔ selectable
+ * ✘ space
+ * ✘ decode
+ */
+import { Text, TextStyle, TextProps } from 'react-native';
+import { ReactNode } from 'react';
+import { HandlerRef } from './useNodesRef';
+interface _TextProps extends TextProps {
+    style?: TextStyle;
+    children?: ReactNode;
+    selectable?: boolean;
+    'user-select'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+}
+declare const _Text: import("react").ForwardRefExoticComponent<_TextProps & import("react").RefAttributes<HandlerRef<Text, _TextProps>>>;
+export default _Text;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TextInput } from 'react-native';
+import { InputProps, PrivateInputProps } from './mpx-input';
+import { HandlerRef } from './useNodesRef';
+export type TextareProps = Omit<InputProps & PrivateInputProps, 'type' | 'password' | 'multiline' | 'confirm-hold'>;
+declare const Textarea: import("react").ForwardRefExoticComponent<TextareProps & import("react").RefAttributes<HandlerRef<TextInput, TextareProps>>>;
+export default Textarea;

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

@@ -0,0 +1,101 @@
+/**
+ * ✔ src
+ * ✘ duration
+ * ✔ controls
+ * ✘ danmu-list
+ * ✘ danmu-btn
+ * ✘ enable-danmu
+ * ✔ autoplay
+ * ✔ loop
+ * ✔ muted
+ * ✔ initial-time
+ * ✘ page-gesture
+ * ✘ direction
+ * ✘ show-progress
+ * ✘ show-fullscreen-btn
+ * ✘ show-play-btn
+ * ✘ show-center-play-btn
+ * ✘ enable-progress-gesture
+ * ✔ object-fit
+ * ✔ poster
+ * ✘ show-mute-btn
+ * ✘ title
+ * ✘ play-btn-position
+ * ✘ enable-play-gesture
+ * ✘ auto-pause-if-navigate
+ * ✘ auto-pause-if-open-native
+ * ✘ vslide-gesture
+ * ✘ vslide-gesture-in-fullscreen
+ * ✘ show-bottom-progress(use show-progress)
+ * ✘ ad-unit-id
+ * ✘ poster-for-crawler
+ * ✘ show-casting-button
+ * ✘ picture-in-picture-mode
+ * ✘ picture-in-picture-show-progress
+ * ✘ picture-in-picture-init-position
+ * ✔ enable-auto-rotation (only ios)
+ * ✘ show-screen-lock-button
+ * ✘ show-snapshot-button
+ * ✘ show-background-playback-button
+ * ✘ background-poster
+ * ✘ referrer-policy
+ * ✔ is-drm
+ * ✘ is-live
+ * ✔ provision-url(android)
+ * ✔ certificate-url(ios)
+ * ✔ license-url
+ * ✔ preferred-peak-bit-rate
+ * ✔ bindplay
+ * ✔ bindpause
+ * ✔ bindended
+ * ✘ bindtimeupdate
+ * ✔ bindfullscreenchange
+ * ✔ bindwaiting
+ * ✔ binderror
+ * ✘ bindprogress
+ * ✔ bindloadedmetadata
+ * ✔ bindcontrolstoggle(only android)
+ * ✘ bindenterpictureinpicture
+ * ✘ bindleavepictureinpicture
+ * ✔ bindseekcomplete
+ * ✘ bindcastinguserselect
+ * ✘ bindcastingstatechange
+ * ✘ bindcastinginterrupt
+ */
+/// <reference types="react" />
+import { View, ViewStyle } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+interface VideoProps {
+    src: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    controls?: boolean;
+    poster?: string;
+    style?: ViewStyle;
+    'initial-time'?: number;
+    'object-fit'?: null | 'contain' | 'fill' | 'cover';
+    'is-drm'?: boolean;
+    'provision-url'?: string;
+    'certificate-url'?: string;
+    'license-url'?: string;
+    'preferred-peak-bit-rate'?: number;
+    'enable-auto-rotation'?: number;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    bindplay?: (event: Record<string, any>) => void;
+    bindpause?: (event: Record<string, any>) => void;
+    bindended?: (event: Record<string, any>) => void;
+    bindtimeupdate?: (event: Record<string, any>) => void;
+    bindfullscreenchange?: (event: Record<string, any>) => void;
+    bindwaiting?: (event: Record<string, any>) => void;
+    binderror?: (event: Record<string, any>) => void;
+    bindloadedmetadata?: (event: Record<string, any>) => void;
+    bindcontrolstoggle?: (event: Record<string, any>) => void;
+    bindseekcomplete?: (event: Record<string, any>) => void;
+}
+declare const MpxVideo: import("react").ForwardRefExoticComponent<VideoProps & import("react").RefAttributes<HandlerRef<View, VideoProps>>>;
+export default MpxVideo;

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

@@ -0,0 +1,34 @@
+/**
+ * ✔ hover-class
+ * ✘ hover-stop-propagation
+ * ✔ hover-start-time
+ * ✔ hover-stay-time
+ */
+import { View, NativeSyntheticEvent, ViewProps } from 'react-native';
+import { ReactNode } from 'react';
+import type { AnimationProp } from './useAnimationHooks';
+import { ExtendedViewStyle } from './types/common';
+import { HandlerRef } from './useNodesRef';
+export interface _ViewProps extends ViewProps {
+    style?: ExtendedViewStyle;
+    animation?: AnimationProp;
+    children?: ReactNode | ReactNode[];
+    'hover-style'?: ExtendedViewStyle;
+    'hover-start-time'?: number;
+    'hover-stay-time'?: number;
+    'enable-background'?: boolean;
+    'enable-var'?: boolean;
+    'enable-fast-image'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    'enable-animation'?: boolean;
+    bindtouchstart?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    bindtouchmove?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    bindtouchend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    bindtransitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+    catchtransitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const _View: import("react").ForwardRefExoticComponent<_ViewProps & import("react").RefAttributes<HandlerRef<View, _ViewProps>>>;
+export default _View;

package/lib/runtime/components/react/dist/mpx-web-view.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { WebView } from 'react-native-webview';
+import { HandlerRef } from './useNodesRef';
+type OnMessageCallbackEvent = {
+    detail: {
+        data: any[];
+    };
+};
+type CommonCallbackEvent = {
+    detail: {
+        src?: string;
+    };
+};
+interface WebViewProps {
+    src?: string;
+    bindmessage?: (event: OnMessageCallbackEvent) => void;
+    bindload?: (event: CommonCallbackEvent) => void;
+    binderror?: (event: CommonCallbackEvent) => void;
+    [x: string]: any;
+}
+declare const _WebView: import("react").ForwardRefExoticComponent<Omit<WebViewProps, "ref"> & import("react").RefAttributes<HandlerRef<WebView<{}>, WebViewProps>>>;
+export default _WebView;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare function useInnerHeaderHeight(pageConfig: PageConfig): number;
+export interface MpxNavProps {
+    pageConfig: PageConfig;
+    navigation: any;
+}
+export interface MpxNavFactorOptions {
+    Mpx: any;
+}
+declare function createMpxNav(options: MpxNavFactorOptions): import("react").MemoExoticComponent<({ pageConfig, navigation }: MpxNavProps) => import("react").JSX.Element>;
+export default createMpxNav;

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

@@ -0,0 +1,141 @@
+/* eslint-disable space-before-function-paren */
+import { 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 { useNavShared } from './useNavShared';
+function convertToHex(color) {
+    try {
+        const intColor = processColor(color);
+        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) {
+    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) => {
+    const textStyleColor = convertToHex(textStyle);
+    if (textStyle && textStyleColor && [NavColor.White, NavColor.Black].includes(textStyleColor)) {
+        return textStyleColor;
+    }
+    else {
+        return NavColor.White;
+    }
+};
+const BACK_ICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg==';
+function createMpxNav(options) {
+    const { Mpx } = options;
+    const innerNav = memo(({ pageConfig, navigation }) => {
+        const [innerPageConfig, setPageConfig] = useState(pageConfig || {});
+        const [customNav] = useNavShared();
+        const safeAreaTop = useSafeAreaInsets()?.top || 0;
+        navigation.setPageConfig = (config) => {
+            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 = 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>);
+    });
+    innerNav.displayName = 'MpxNav';
+    return innerNav;
+}
+export default createMpxNav;