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

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

@@ -0,0 +1,189 @@
+/* eslint-disable space-before-function-paren */
+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';
+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 translateY = useSharedValue(0);
+        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);
+        };
+        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>);
+        createElement(StatusBar, {
+            translucent: true,
+            backgroundColor: 'transparent',
+            barStyle: navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content' // 'default'/'light-content'/'dark-content'
+        });
+        if (isCustom)
+            return statusBarElement;
+        // 假设是栈导航，获取栈的长度
+        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 (
+        // 不设置 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>
+      </Animated.View>);
+        // return createElement(
+        //   Animated.View,
+        //   {
+        //     style: [animatedStyle]
+        //   },
+        //   createElement(
+        //     View,
+        //     {
+        //       style: [
+        //         styles.header,
+        //         {
+        //           paddingTop: safeAreaTop,
+        //           backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
+        //         },
+        //         innerPageConfig.navStyle ?? {}
+        //       ]
+        //     },
+        //     statusBarElement,
+        //     createElement(
+        //       View,
+        //       {
+        //         style: styles.headerContent,
+        //         height: titleHeight
+        //       },
+        //       backElement,
+        //       createElement(
+        //         Text,
+        //         {
+        //           style: [styles.title, { color: navigationBarTextStyle }],
+        //           numberOfLines: 1
+        //         },
+        //         innerPageConfig.navigationBarTitleText?.trim() || ''
+        //       )
+        //     )
+        //   )
+        // )
+    });
+    innerNav.displayName = 'MpxNav';
+    return innerNav;
+}
+export default createMpxNav;

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

@@ -0,0 +1,39 @@
+interface Token {
+    type: string;
+    value: string | number;
+}
+interface ExpressionNode {
+    type: 'NUMBER';
+    value: number;
+}
+export declare class ExpressionParser {
+    private tokens;
+    private formatter;
+    private functions;
+    private current;
+    constructor(input: string, formatter?: (val: string) => number, functions?: {
+        [key: string]: (...args: number[]) => number;
+    });
+    tokenize(input: string): Token[];
+    parse(): ExpressionNode;
+    private expression;
+    private term;
+    private factor;
+    private parseArguments;
+    private applyOperator;
+    private applyFunction;
+}
+interface FuncInfo {
+    start: number;
+    end: number;
+    args: string[];
+}
+export declare function parseFunc(str: string, funcName: string): FuncInfo[];
+export declare class ReplaceSource {
+    private _source;
+    private _replacements;
+    constructor(source: string);
+    replace(start: number, end: number, content: string): void;
+    source(): string;
+}
+export {};

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

@@ -0,0 +1,32 @@
+import type { MutableRefObject } from 'react';
+import type { NativeSyntheticEvent } from 'react-native';
+import { ExtendedViewStyle } from './types/common';
+import type { _ViewProps } from './mpx-view';
+type AnimatedOption = {
+    duration: number;
+    delay: number;
+    useNativeDriver: boolean;
+    timingFunction: 'linear' | 'ease' | 'ease-in' | 'ease-in-out' | 'ease-out';
+    transformOrigin: string;
+};
+export type AnimationStepItem = {
+    animatedOption: AnimatedOption;
+    rules: Map<string, number | string>;
+    transform: Map<string, number>;
+};
+export type AnimationProp = {
+    id: number;
+    actions: AnimationStepItem[];
+};
+export default function useAnimationHooks<T, P>(props: _ViewProps & {
+    enableAnimation?: boolean;
+    layoutRef: MutableRefObject<any>;
+    transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}): {
+    enableStyleAnimation: boolean;
+    animationStyle?: undefined;
+} | {
+    enableStyleAnimation: true;
+    animationStyle: ExtendedViewStyle;
+};
+export {};

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

@@ -0,0 +1,11 @@
+import { RefObject, ForwardedRef } from 'react';
+type Obj = Record<string, any>;
+export type HandlerRef<T, P> = {
+    getNodeInstance(): {
+        props: RefObject<P>;
+        nodeRef: RefObject<T>;
+        instance: Obj;
+    };
+};
+export default function useNodesRef<T, P>(props: P, ref: ForwardedRef<HandlerRef<T, P>>, nodeRef: RefObject<T>, instance?: Obj): void;
+export {};

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

@@ -0,0 +1,121 @@
+import { ReactNode, ReactElement, Dispatch, SetStateAction } from 'react';
+import { LayoutChangeEvent, TextStyle, ImageProps } from 'react-native';
+import { FastImageProps } from '@d11/react-native-fast-image';
+import type { AnyFunc } from './types/common';
+export declare const TEXT_STYLE_REGEX: RegExp;
+export declare const PERCENT_REGEX: RegExp;
+export declare const URL_REGEX: RegExp;
+export declare const SVG_REGEXP: RegExp;
+export declare const BACKGROUND_REGEX: RegExp;
+export declare const TEXT_PROPS_REGEX: RegExp;
+export declare const DEFAULT_FONT_SIZE = 16;
+export declare const HIDDEN_STYLE: {
+    opacity: number;
+};
+export declare const isIOS: boolean;
+export declare const isAndroid: boolean;
+export declare const isHarmony: boolean;
+export declare function useNavigation(): Record<string, any> | undefined;
+export declare function omit<T, K extends string>(obj: T, fields: K[]): Omit<T, K>;
+/**
+ * 用法等同于 useEffect，但是会忽略首次执行，只在依赖更新时执行
+ */
+export declare const useUpdateEffect: (effect: any, deps: any) => void;
+export declare const parseUrl: (cssUrl?: string) => string | undefined;
+export declare const getRestProps: (transferProps?: any, originProps?: any, deletePropsKey?: any) => any;
+export declare function isText(ele: ReactNode): ele is ReactElement;
+export declare function every(children: ReactNode, callback: (children: ReactNode) => boolean): boolean;
+type GroupData<T> = Record<string, Partial<T>>;
+export declare function groupBy<T extends Record<string, any>>(obj: T, callback: (key: string, val: T[keyof T]) => string, group?: GroupData<T>): GroupData<T>;
+export declare function splitStyle<T extends Record<string, any>>(styleObj: T): {
+    textStyle?: Partial<T>;
+    backgroundStyle?: Partial<T>;
+    innerStyle?: Partial<T>;
+};
+interface TransformStyleConfig {
+    enableVar?: boolean;
+    externalVarContext?: Record<string, any>;
+    parentFontSize?: number;
+    parentWidth?: number;
+    parentHeight?: number;
+}
+export declare function useTransformStyle(styleObj: Record<string, any> | undefined, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }: TransformStyleConfig): {
+    hasVarDec: boolean;
+    varContextRef: import("react").MutableRefObject<{}>;
+    setWidth: Dispatch<SetStateAction<number>>;
+    setHeight: Dispatch<SetStateAction<number>>;
+    normalStyle: Record<string, any>;
+    hasSelfPercent: boolean;
+    hasPositionFixed: boolean;
+};
+export interface VisitorArg {
+    target: Record<string, any>;
+    key: string;
+    value: any;
+    keyPath: Array<string>;
+}
+export declare function traverseStyle(styleObj: Record<string, any>, visitors: Array<(arg: VisitorArg) => void>): void;
+export declare function setStyle(styleObj: Record<string, any>, keyPath: Array<string>, setter: (arg: VisitorArg) => void): void;
+export declare function splitProps<T extends Record<string, any>>(props: T): {
+    textProps?: Partial<T>;
+    innerProps?: Partial<T>;
+};
+interface LayoutConfig {
+    props: Record<string, any>;
+    hasSelfPercent: boolean;
+    setWidth?: Dispatch<SetStateAction<number>>;
+    setHeight?: Dispatch<SetStateAction<number>>;
+    onLayout?: (event?: LayoutChangeEvent) => void;
+    nodeRef: React.RefObject<any>;
+}
+export declare const useLayout: ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }: LayoutConfig) => {
+    layoutRef: import("react").MutableRefObject<{}>;
+    layoutStyle: {};
+    layoutProps: Record<string, any>;
+};
+export interface WrapChildrenConfig {
+    hasVarDec: boolean;
+    varContext?: Record<string, any>;
+    textStyle?: TextStyle;
+    textProps?: Record<string, any>;
+}
+export declare function wrapChildren(props: Record<string, any> | undefined, { hasVarDec, varContext, textStyle, textProps }: WrapChildrenConfig): any;
+export declare const debounce: <T extends AnyFunc>(func: T, delay: number) => ((...args: Parameters<T>) => void) & {
+    clear: () => void;
+};
+export declare const useDebounceCallback: <T extends AnyFunc>(func: T, delay: number) => ((...args: Parameters<T>) => void) & {
+    clear: () => void;
+};
+export declare const useStableCallback: <T extends AnyFunc | null | undefined>(callback: T) => T extends AnyFunc ? T : () => void;
+export declare function usePrevious<T>(value: T): T | undefined;
+export interface GestureHandler {
+    nodeRefs?: Array<{
+        getNodeInstance: () => {
+            nodeRef: unknown;
+        };
+    }>;
+    current?: unknown;
+}
+export declare function flatGesture(gestures?: Array<GestureHandler>): any[];
+export declare const extendObject: {
+    <T extends {}, U>(target: T, source: U): T & U;
+    <T_1 extends {}, U_1, V>(target: T_1, source1: U_1, source2: V): T_1 & U_1 & V;
+    <T_2 extends {}, U_2, V_1, W>(target: T_2, source1: U_2, source2: V_1, source3: W): T_2 & U_2 & V_1 & W;
+    (target: object, ...sources: any[]): any;
+};
+export declare function getCurrentPage(pageId: number | null | undefined): any;
+export declare function renderImage(imageProps: ImageProps | FastImageProps, enableFastImage?: boolean): ReactElement<ImageProps | FastImageProps, string | import("react").JSXElementConstructor<any>>;
+export declare function pickStyle(styleObj: Record<string, any> | undefined, pickedKeys: Array<string>, callback?: (key: string, val: number | string) => number | string): Record<string, any>;
+export declare function useHover({ enableHover, hoverStartTime, hoverStayTime, disabled }: {
+    enableHover: boolean;
+    hoverStartTime: number;
+    hoverStayTime: number;
+    disabled?: boolean;
+}): {
+    isHover: boolean;
+    gesture?: undefined;
+} | {
+    isHover: boolean;
+    gesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+};
+export {};

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

@@ -280,8 +280,8 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const setKeyboardAvoidContext = () => {
-    if (adjustPosition && keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef }
+    if (keyboardAvoid) {
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, blurCallbacks: [] }
     }
   }
 
@@ -295,23 +295,42 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
   }
 
   const onFocus = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
-    setKeyboardAvoidContext()
-    bindfocus && bindfocus(
-      getCustomEvent(
-        'focus',
-        evt,
-        {
-          detail: {
-            value: tmpValue.current || ''
-          },
-          layoutRef
-        },
-        props
-      )
-    )
+    if (!keyboardAvoid?.current) {
+      setKeyboardAvoidContext()
+    }
+    if (bindfocus && keyboardAvoid?.current) {
+      const focusAction = () => {
+        bindfocus(
+          getCustomEvent(
+            'focus',
+            evt,
+            {
+              detail: {
+                value: tmpValue.current || '',
+                height: keyboardAvoid.current?.keyboardHeight
+              },
+              layoutRef
+            },
+            props
+          )
+        )
+        if (keyboardAvoid.current?.onKeyboardShow) {
+          keyboardAvoid.current.onKeyboardShow = undefined
+        }
+      }
+      if (keyboardAvoid.current.keyboardHeight) {
+        // iOS: keyboard 获取高度时机 keyboardWillShow 在 input focus 之前，可以立即执行
+        focusAction()
+      } else {
+        // Android,Harmony: keyboard 获取高度时机 keyboardDidShow 在 input focus 之后，需要延迟回调
+        evt.persist()
+        keyboardAvoid.current.onKeyboardShow = focusAction
+      }
+    }
   }
 
   const onBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    keyboardAvoid?.current?.blurCallbacks.forEach(fn => fn())
     bindblur && bindblur(
       getCustomEvent(
         'blur',
@@ -456,6 +475,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
         multiline: !!multiline,
         onTouchStart,
         onTouchEnd,
+        onTouchMove: onTouchEnd,
         onFocus,
         onBlur,
         onChange,

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

@@ -1,6 +1,7 @@
 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'
 
@@ -8,9 +9,10 @@ type KeyboardAvoidViewProps = {
   children?: ReactNode
   style?: ViewStyle
   contentContainerStyle?: ViewStyle
+  navigation?: any
 }
 
-const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: KeyboardAvoidViewProps) => {
+const KeyboardAvoidingView = ({ children, style, contentContainerStyle, navigation }: KeyboardAvoidViewProps) => {
   const duration = isIOS ? 250 : 300
   const easing = isIOS ? Easing.inOut(Easing.ease) : Easing.out(Easing.quad)
 
@@ -25,7 +27,17 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
 
   const resetKeyboard = () => {
     if (keyboardAvoid?.current) {
+      const inputRef = keyboardAvoid.current.ref?.current
+      if (inputRef && inputRef.isFocused()) {
+        // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+        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'
@@ -45,21 +57,25 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
         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) => {
-              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%'
-                }
+          const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current
+          keyboardAvoid.current.keyboardHeight = endCoordinates.height
+          onKeyboardShow?.()
+          if (adjustPosition) {
+            setTimeout(() => {
+              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
+                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)
       ]
@@ -68,20 +84,44 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
         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) => {
-              if (finished) {
-                // Set flexBasic after animation to trigger re-layout and reset layout information
-                basic.value = '99.99%'
-              }
+          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
+
+              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 (finished) {
+                  // Set flexBasic after animation to trigger re-layout and reset layout information
+                  basic.value = '99.99%'
+                }
+              })
             })
-          })
+          }
         }),
         Keyboard.addListener('keyboardDidHide', resetKeyboard)
       ]
@@ -93,7 +133,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <View style={style} onTouchEnd={onTouchEnd}>
+    <View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
       <Animated.View
         style={[
           contentContainerStyle,