Keyboard hides content for Android React Native webview

Question

I am using React Native's <WebView> component.

该文档没有提到当 webview 的 HTML 包含<input>在 Android 中成为焦点时如何处理隐藏 webview 的键盘。

有没有人设法解决这个问题？我发现了一个似乎适用于常规的库<View>，但不适用于<WebView>.

Answer 1

您可以使用 KeyboardAvoidingView 包装您的 WebView

  <KeyboardAvoidingView
    behavior={Platform.select({ ios: "position", android: null })}
    enabled
    contentContainerStyle={{ flex: 1 }}
    keyboardVerticalOffset={Platform.select({ ios: offset, android: 20 })}
    style={{ flexGrow: 1 }}
  >
    <WebView/>
  </KeyboardAvoidingView>