ReactNative WebView高度自适应-白红宇

ReactNative WebView高度自适应

阅读量：6162 次

发布时间：2019-06-21

本文共 844 字，大约阅读时间需要 2 分钟。

在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的高度做到自适应。
        
     
      ${htmlContent}
      `}}        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)            })          }        }}        >

S61116-171231.jpg