ios 与 android 中的 webview 和显示模式问题

Question

使用react-native-webview库，我在Android和IOS上遇到了关于如何显示包含打开的输入字段的模式的不同行为。

当关注输入字段时会出现此问题，正如预期的那样，键盘会打开，但在 IOS 上，模式会被压扁，而在 Android 上，内容显示正常。

请看下面的截图：

我想知道在这种情况下是否有特殊的技巧来调整 IOS 行为？

我们有这样的要求，通过Web视图在应用程序中显示一些用React.js（我们控制的）编写的页面，因此我可以在网络上访问此模式的源代码，如下所示：

.modal {
    transform: translate(-50%,-50%);
    width: calc(100% - 40px);
    border-radius: 8px;
    max-height: 100%;
    position: fixed;
    z-index: 995;
    left: 50%;
    top: 50%;
}

环境：

操作系统：IOS，任意版本

react-native-webview：版本13.2.2

react-native：版本0.72.6

老实说，我有点不知道该去哪里寻找。在 Stack Overflow 和库 GitHub 存储库上查找了类似的问题，但没有成功。

我可以在 Safari Web Inspector 上检查 IOS 模拟器上的同一页面并使用属性，但问题不存在

Answer 1

尝试使用KeyboardAvoidingView，如下：

  import React from 'react';
  import { KeyboardAvoidingView, Platform } from 'react-native';

  //[...]

  <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={styles.container}
  >
    //Your modal here
  </KeyboardAvoidingView>

为什么需要更改 IOS 的行为？：

根据文档：

Android 和 iOS 与此道具的交互方式不同。在 iOS 和 Android 上，建议设置行为。