ReactNative WebView高度自适应

最新推荐文章于 2023-01-28 17:23:11 发布

weixin_33817333

最新推荐文章于 2023-01-28 17:23:11 发布

阅读量292

点赞数

原文链接：https://segmentfault.com/a/1190000007502470

版权

在ReactNative项目中可能会遇到展示HTML代码的情况，通常我们会采用WebView来展示html代码，但ReactNative中的WebView需要设定高度才能展示出来，因此需要用js来计算文档高度做到高度自适应
具体代码实现如下：

//这里我在初始化阶段定义初使高度
  constructor(props) {
    super(props);
    this.state={
      height:500,
    }
  }

//下面是WebView的代码。`${}`这个ES6中新加入的特性，允许通过反引号 ` 来创建字符串
//获取高度原理是当文档加载完后js获取文档高度然后添加到title标签中。这时通过监听导航状态变化的函数 `onNavigationStateChange` 来将title的值读取出来赋值给this.state.height从而使webview的高度做到自适应。
<View style={{height:this.state.height}}>
    <WebView
        source={{html: `<!DOCTYPE html><html><body>${htmlContent}<script>window.onload=function(){window.location.hash = 1;document.title = document.body.clientHeight;}</script></body></html>`}}
        style={{flex:1}}
        bounces={false}
        scrollEnabled={false}
        automaticallyAdjustContentInsets={true}
        contentInset={{top:0,left:0}}
        onNavigationStateChange={(title)=>{
          if(title.title != undefined) {
            this.setState({
              height:(parseInt(title.title)+20)
            })
          }
        }}
        >
    </WebView>
</View>

S61116-171231.jpg

weixin_33817333

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ReactNative WebView高度自适应

在ReactNative项目中可能会遇到展示HTML代码的情况，通常我们会采用WebView来展示html代码，但ReactNative中的WebView需要设定高度才能展示出来，因此需要用js来计算文档高度做到高度自适应具体代码实现如下：//这里我在初始化阶段定义初使高度 constructor(props) { supe...
复制链接

扫一扫

ReactNative WebView高度自适应

“相关推荐”对你有帮助么？