1

根据我的经验， 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}}
      />
    );
  }

我找到了一个解决方案，不是最优的，但也是一个解决方案。我的答案贴在下面。

4

1 回答 1

0

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

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

无论哪种方式，这都是我正在滚动的内容，只是想分享我的发现，以防有人发现自己遇到同样的问题。

于 2019-06-18T07:48:33.423 回答