react-native - 键盘进入时Webview页面不滚动反应本机

Question

我正在使用 react-native-webview 来查看 html。Html 包含像聊天窗口这样的输入框。如果我在 iOS 中为这个 webview 提供 url，它可以正常工作。但是在 android 中，如果我点击输入框键盘重叠在输入框上。

代码：

<WebView
    originWhitelist={["https://*", "http://*", "file://*", "sms://*", "tel://*"]}
    automaticallyAdjustContentInsets={false}
    source={{ uri: 'http://sample.com/sample/chat.html' }} 

    scalesPageToFit={false}
    injectedJavaScript={jsCode}
    javaScriptEnabled={true} domStorageEnabled={true}
    }
>
</WebView>

Answer 1

您正在使用基于百分比的大小，我猜您正在 Android 上对此进行测试，因为默认设置是在屏幕键盘打开时调整视图大小（它将 android:windowSoftInputMode="adjustResize" 添加到主 Activity在 AndroidManifest.xml 中查看 github.com/facebook/react-native 中的这行代码）

为避免此调整大小问题，您有两种选择 -

Change adjustResize to adjustPan in the AndroidManifest.xml
Don't use percentage based sizes for the logo. Or if it's an Image, just set the width and allow the height to be set based on the image size.

Answer 2

对我有用的是用'KeyboardAvoidingView'包装，如下所示

<KeyboardAvoidingView behavior="position" keyboardVerticalOffset={30}>
{your content}
</KeyboardAvoidingView>