Merge pull request #2218 from didi/feat/keyboardAvoding

feat: android 键盘拉起行为与 ios 统一

Author: hiyuki

packages/core/@types/index.d.ts

@@ -381,6 +381,13 @@ export interface RnConfig {
    * @param packages 分包名数组
    */
   downloadChunkAsync?: (packages: Array<string>) => void
+
+  /**
+   * bundle 中是否关闭 android 键盘避让功能，如果关闭需要将该配置设置为 false，使用 mpx 内置的键盘避让逻辑
+   * @platform android
+   * @default true
+   */
+  enableNativeKeyboardAvoiding?: boolean
 }
 
 interface MpxConfig {

packages/core/src/platform/createApp.ios.js

@@ -10,7 +10,7 @@ import { createElement, memo, useRef, useEffect } from 'react'
 import * as ReactNative from 'react-native'
 import { initAppProvides } from './export/inject'
 import { NavigationContainer, createNativeStackNavigator, SafeAreaProvider, GestureHandlerRootView } from './env/navigationHelper'
-import { innerNav } from './env/nav'
+import MpxNav from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
@@ -66,8 +66,8 @@ export default function createApp (options) {
               flex: 1
             }
           },
-          createElement(innerNav, {
-            pageConfig: pageConfig,
+          createElement(MpxNav, {
+            pageConfig,
             navigation
           }),
           children

packages/core/src/platform/env/nav.js

@@ -17,7 +17,7 @@ import {
   RouteContext
 } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/context'
 import { PortalHost, useSafeAreaInsets } from '../env/navigationHelper'
-import { useInnerHeaderHeight } from '../env/nav'
+import { useInnerHeaderHeight } from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-nav'
 
 function getSystemInfo () {
   const windowDimensions = ReactNative.Dimensions.get('window')

packages/core/src/platform/patch/getDefaultOptions.ios.js

@@ -6,9 +6,13 @@ export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
 }>
 
-export type KeyboardAvoidContextValue = MutableRefObject<
-  { cursorSpacing: number, ref: MutableRefObject<any> } | null
->
+export type KeyboardAvoidContextValue = MutableRefObject<{
+  cursorSpacing: number
+  ref: MutableRefObject<any>
+  adjustPosition: boolean
+  keyboardHeight?: number
+  onKeyboardShow?: () => void
+} | null>
 
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }
@@ -37,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
 }
 
@@ -53,7 +57,7 @@ export interface RouteContextValue {
 }
 
 export interface StickyContextValue {
-  registerStickyHeader: Function,
+  registerStickyHeader: Function
   unregisterStickyHeader: Function
 }
 

packages/webpack-plugin/lib/runtime/components/react/context.ts

@@ -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 }
     }
   }
 
@@ -296,19 +296,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 (bindfocus) {
+      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) {
+        // 有 keyboardAvoiding
+        if (keyboardAvoid.current.keyboardHeight) {
+          // iOS: keyboard 获取高度时机 keyboardWillShow 在 input focus 之前，可以立即执行
+          focusAction()
+        } else {
+          // Android,Harmony: keyboard 获取高度时机 keyboardDidShow 在 input focus 之后，需要延迟回调
+          evt.persist()
+          keyboardAvoid.current.onKeyboardShow = focusAction
+        }
+      } else {
+        // 无 keyboardAvoiding，直接执行 focus 回调
+        focusAction()
+      }
+    }
   }
 
   const onBlur = (evt: NativeSyntheticEvent<TextInputFocusEventData>) => {