React Native WebView在iOS下scrollEnabled为false时键盘遮挡输入框如何解决？

iOS端KeyboardAvoidingView仅会调整RN原生层的视图布局，不会触发WebView内部DOM的resize事件；且你将WebView的scrollEnabled设为false后，RN层拦截了WebView的滚动能力，系统自带的输入框聚焦自动上移逻辑无法生效，就会出现键盘遮挡输入框的问题。

方案1：监听键盘事件主动通知网页调整 #

不需要修改现有WebView的滚动配置，通过双向通信实现滚动逻辑：

• RN侧监听系统键盘弹出/收起事件，获取键盘高度后通过postMessage将事件和参数传递给WebView内部网页
• 网页侧监听消息，收到键盘弹出事件后获取当前聚焦的输入框位置，判断是否被键盘遮挡，主动调用网页滚动逻辑将输入框移到可视区域

RN侧示例代码：

import { Keyboard, useRef } from 'react-native'
import { WebView } from 'react-native-webview'

const webViewRef = useRef(null)

// 组件挂载时绑定键盘监听
useEffect(() => {
  const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
    const keyboardHeight = e.endCoordinates.height
    webViewRef.current?.postMessage(JSON.stringify({
      event: 'keyboard_show',
      height: keyboardHeight
    }))
  })
  const hideListener = Keyboard.addListener('keyboardDidHide', () => {
    webViewRef.current?.postMessage(JSON.stringify({
      event: 'keyboard_hide'
    }))
  })
  return () => {
    showListener.remove()
    hideListener.remove()
  }
}, [])

网页侧示例代码：

window.addEventListener('message', (e) => {
  const data = JSON.parse(e.data)
  if (data.event === 'keyboard_show') {
    const activeInput = document.activeElement
    // 仅处理输入框、文本框的聚焦场景
    if (['INPUT', 'TEXTAREA'].includes(activeInput.tagName)) {
      const elPosition = activeInput.getBoundingClientRect()
      const visibleHeight = window.innerHeight - data.height
      // 输入框底部低于可视区域底部时触发滚动
      if (elPosition.bottom > visibleHeight) {
        const scrollOffset = elPosition.bottom - visibleHeight + 20 // 20是底部预留边距
        window.scrollTo({
          top: window.scrollY + scrollOffset,
          behavior: 'smooth'
        })
      }
    }
  }
})

方案2：动态修改WebView的scrollEnabled属性 #

如果不想修改网页侧代码，可以在RN侧动态调整滚动权限：

• 网页侧输入框聚焦时通过postMessage通知RN，RN将scrollEnabled临时设为true
• 输入框失焦后再将scrollEnabled改回false
  iOS系统原生的输入框聚焦自动滚动逻辑会在WebView滚动权限开启时自动触发，键盘弹出时会自动将输入框移动到可视区域，不影响平时禁止滚动的需求。

方案3：替换KeyboardAvoidingView组件 #

RN自带的KeyboardAvoidingView在部分iOS版本下存在底部padding计算偏差的问题，可替换为react-native-safe-area-context库提供的KeyboardAvoidingView，它的高度计算逻辑更精准，调整后WebView的可视高度会正确变化，部分场景下可以触发网页内部的自动滚动逻辑。

内容的提问来源于stack exchange，提问作者tofrn