react-native-webview避免键盘(iOS)

Question

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

它在使用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 prop useWebKit={false}。

不幸的是，这意味着在WebView的本机端，它现在使用的是UIWebView，它已被弃用，并将在未来的版本中被删除。

无论如何，这就是我的想法，我只是想分享我的发现，以防有人发现自己遇到了同样的问题。