Question

根据我的经验，react-native-webview很难像我想要的那样在iOS键盘上表现。显示键盘并隐藏其内容时，它不会自动更改其高度。

它的行为也被KeyboardAvoidingView包裹着。就我而言，似乎过多地调整了WebView的内容，大约是键盘高度的两倍。当我手动侦听键盘打开/关闭事件并相应地调整WebView的高度时，也会出现相同的行为：

  componentDidMount(){
    Keyboard.addListener("keyboardWillShow", this.keyboardDidShow.bind(this));
    Keyboard.addListener("keyboardWillHide", this.keyboardDidHide.bind(this));
  }

  componentWillUnmount(){
    Keyboard.removeListener("keyboardWillShow", this.keyboardDidShow.bind(this));
    Keyboard.removeListener("keyboardWillHide", this.keyboardDidHide.bind(this));
  }

  keyboardDidShow(event){
    this.setState({
      keyboardHeight: event.endCoordinates.height
    });
  }

  keyboardDidHide(event){
    this.setState({
      keyboardHeight: 0
    });
  }

  render(){
    return (
      <WebView
        style={{flex: 1, maxHeight: Dimensions.get("window").height - this.state.keyboardHeight}}
      />
    );
  }

我找到了一个解决方案，虽然不是最优的，但仍然是一个解决方案。我的答案发布在下面。

Answer 1

由于我找不到关于此特定行为的任何讨论，也没有适合我的解决方案，因此我通过react-native-webview文档的道具进行工作。如上所述，在React Native的0.59.9版和React Native WebView的5.11.0版中最终对我有用的是如上所述，在键盘事件侦听器中手动设置WebView的高度并设置WebView属性useWebKit={false}。

不幸的是，这意味着在WebView的本机端，它现在使用的UIWebView已过时，并将在以后的版本中删除。

无论哪种方式，这都是我要介绍的内容，只是想分享我的发现，以防万一有人发现自己遇到同样的问题。

react-native-webview避免键盘（iOS）

1 个答案: