Question

我正在使用React Native的<WebView>组件。

documentation没有提到当webview的HTML包含<input>时，如何处理隐藏webview的键盘，而这一点在Android中已成为焦点。

有没有人设法解决这个问题？我找到了一个似乎适用于常规<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>

Answer 2

您是否考虑过响应键盘出现和消失的系统级事件，然后适当调整WebView大小？

关于如何处理这个问题有一个老问题，它可能或可能不相关。这个答案特别说明了如何处理键盘事件。 https://stackoverflow.com/a/33585501/1403

DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{
  if (!frames.endCoordinates) return;
  this.setState({keyboardSpace: frames.endCoordinates.height});
});
DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{
  this.setState({keyboardSpace:0});
});

您可以使用frames.endCoordinates.height值来更改WebView的高度，确保内容不会隐藏在键盘后面。

Answer 3

如果您没有进行复杂的键盘控制，只需提高对react-native-keyboard-spacer即可实现的认识。

import KeyboardSpacer from 'react-native-keyboard-spacer';

class DemoApp extends Component {
  render() {
    return (
      <View>
        <WebView ... />
        <KeyboardSpacer/>
      </View>
    );
  }
}

Answer 4

我使用了WebView.onTouchStart和ScrollView.scrollTo。这对我来说就像是魅力。

import { useRef } from "react";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp
} from "react-native-responsive-screen";

const scrollRef = useRef();

const scrolldown = () => {
   scrollRef.current.scrollTo((wp("100%") * 2) / 3);
};

<ScrollView ref={scrollRef} >
...

<WebView onTouchStart={scrolldown} >
...

键盘隐藏了Android React Native webview的内容

4 个答案: