当键盘出现在 IOS 上时 Webview 不会缩小

Question

问题: IOS

打开键盘时webview的高度没有降低

我用 KeyboardAvoidingView 像这样包裹我的 Webview

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={isKeyboardOpen ? {
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height: deviceHeight - y - keyboardHeight,
  } : {
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height:
  deviceHeight - y
  }}
>
  // webivew here
</KeyboardAvoidingView>

我什至让 KeyboardAvoidingView 的高度在键盘 hidden/appeared 时动态变化。

请检查下图。我想让红色部分消失。或者至少让 webview 的内容适合容器的 space（即 KeyboardAvoidingView 组件）并使其无法向下滚动。

Screenshots/Videos:

我把style={{ backgroundColor: 'red' }}加到微视了。如您所见，webview 的内容已按预期缩小，但红色免费背景仍然出现。

环境：

OS: IOS
OS版本：15.4.1
react-native 版本：0.64.2
react-native-webview 版本：11.2.3

Answer 1

以我为例。我需要防止 webview 滚动。 WebView 组件中有一个名为 scrollEnabled 的属性可以做到这一点。代码将如下所示

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height: deviceHeight - y
  }}
>
  <Webview 
    // other properties 
    scrollEnabled={false} // -> set this to false
  />
</KeyboardAvoidingView>

当键盘出现在 IOS 上时 Webview 不会缩小

Weview doesn't shirnk when keyboard is appeared on IOS

ios

react-native

react-native-webview