React Native WebView：iOS与Android含输入框模态框显示差异问题

核心原因 #

iOS端WebView在键盘弹出时会调整视口高度，你的模态框采用top:50% + transform: translate(-50%,-50%)的居中方式，当视口高度因键盘缩小后，垂直居中计算会出现偏差，加上max-height:100%会导致内容被挤压；而Android端WebView的键盘适配逻辑不同，所以无此问题。另外Safari调试器环境和RN WebView的WKWebView环境存在差异，因此无法复现该问题。

解决方案 #

方案1：修改Web端模态框CSS（优先尝试）

替换原有居中方式，改用固定边距+视口高度限制，避免视口变化影响定位：

.modal {
  position: fixed;
  z-index: 995;
  /* 左右固定边距20px，替代calc(100% -40px) */
  left: 20px;
  right: 20px;
  /* 垂直居中，仅做Y轴偏移 */
  top: 50%;
  transform: translateY(-50%);
  /* 最大高度设为视口高度减去边距，适配键盘弹出后的视口 */
  max-height: calc(100vh - 40px);
  border-radius: 8px;
}

也可以用inset属性实现更简洁的居中：

.modal {
  position: fixed;
  z-index: 995;
  inset: 20px; /* 上下左右边距20px */
  margin: auto; /* 自动居中 */
  max-height: calc(100vh - 40px);
  border-radius: 8px;
  width: auto;
}

方案2：调整React Native WebView的iOS配置

给WebView添加iOS专属的视口适配属性，同时优化WebKit设置：

import WebView from 'react-native-webview';

<WebView
  source={{ uri: '你的自研React页面地址' }}
  // iOS自动调整内容内边距适配键盘
  contentInsetAdjustmentBehavior="automatic"
  // 禁用WebView内部滚动，避免干扰模态框固定定位
  scrollEnabled={false}
  // 使用WKWebView（iOS推荐，修复旧UIWebView的渲染问题）
  useWebKit={true}
/>

方案3：监听键盘事件动态调整WebView高度（兜底方案）

如果前两个方案无效，通过RN的键盘监听事件修改WebView高度，强制适配视口：

import React, { useState, useEffect } from 'react';
import { Keyboard, Dimensions } from 'react-native';
import WebView from 'react-native-webview';

const YourComponent = () => {
  const [webViewHeight, setWebViewHeight] = useState(Dimensions.get('window').height);

  useEffect(() => {
    const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
      // 减去键盘高度，设置WebView新高度
      setWebViewHeight(Dimensions.get('window').height - e.endCoordinates.height);
    });
    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      setWebViewHeight(Dimensions.get('window').height);
    });

    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  return (
    <WebView
      source={{ uri: '你的自研React页面地址' }}
      style={{ height: webViewHeight }}
      contentInsetAdjustmentBehavior="never"
    />
  );
};

export default YourComponent;

验证建议 #

修改后优先在iOS真机上测试（模拟器有时和真机表现不一致），优先采用方案1，因为仅需调整Web端代码，无需改动RN逻辑。

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