关于javascript：React Native动态Webview高度


React Native dynamic webview height

我有WebView内容，这些内容会根据内容量更改其高度。
因此，我找到了一种方法，该方法如何通过NavigationStateChange上的document.title属性获取内容的高度。
看起来像这样：

1
let html = '<!DOCTYPE html><html><body>document.title = document.height;</body></html>';

以及onNavigationStateChange

1
2
3
4
5
6
7
onNavigationStateChange(navState) {
  this.setState({
    height: navState.title
  });
  console.log("DATA");
  console.log(this.state.height)
}

我在实际的WebView渲染上执行：

1
2
3
4
5
6
<WebView style={this._setWebviewHeight()}
           automaticallyAdjustContentInsets={false}
           scrollEnabled={false}
           onNavigationStateChange={this.onNavigationStateChange.bind(this)}
           html={html}>
</WebView>

其中：

1
2
3
4
5
6
_setWebviewHeight() {
 return {
  height: this.state.height,
  padding: 20,
 }
}

在这种情况下，我遇到错误，无法通过状态获取内容的高度。那我该怎么办？

解决方案的想法来自此处：React native：是否有可能在Web视图中具有html内容的高度？

相关讨论

只需尝试以下库：https://github.com/iou90/react-native-autoheight-webview
它将在iOS上都可以使用

我已经在RN第三方库之一的实现中找到了解决方案。
这是它的链接：
https://github.com/danrigsby/react-native-web-container/blob/master/index.js

通过这种方法，效果都很好。

相关讨论