当键盘进入react native时，Webview页面不滚动

rseugnpd 于 2023-10-22 发布在 React

关注(0)|答案(3)|浏览(175)

我使用react-native-webview查看html。Html包含像chatwindow这样的输入框。如果我给予URL到这个webview在iOS它工作正常.但在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>

react-native

来源：https://stackoverflow.com/questions/59245088/webview-page-not-scrolling-when-keyboard-comes-in-react-native

3条答案

按热度按时间

0aydgbwb1#

您使用的是基于百分比的大小，我猜您正在Android上测试这一点，因为默认情况下，当Android键盘打开时，会调整视图的大小（它将android：windowSoftInputMode=“adjustResize”添加到AndroidManifest.xml中的主Activity中请参阅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.

赞(0）回复(0）举报 2023-10-22

pkwftd7m2#

对我有用的是像下面这样用'KeyboardAvoidingView' Package

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

赞(0）回复(0）举报 2023-10-22

knsnq2tg3#

这对我很有效：

<KeyboardAvoidingView
            enabled={Platform.OS === 'android'} // auto scroll view when user focus inputs, on iOS it is already done by native OS
            behavior="padding"
            keyboardVerticalOffset={75}>
            <WebView
              {{...props}}}
              nestedScrollEnabled />
    </KeyboardAvoidingView>

赞(0）回复(0）举报 2023-10-22

我来回答

当键盘进入react native时，Webview页面不滚动

3条答案

相关问题

热门标签

最新问答