React Native WebView修改字体大小后文本溢出边界问题求助

问题根因 #

• 你写了两次style属性，后定义的样式会覆盖前者，原本设置的宽度、内边距属性失效，导致内容宽度计算异常
• 注入JS修改字体大小时没有加px单位，部分Web内核无法正确解析字体大小，导致内容高度计算偏差
• 高度计算逻辑不完善，未覆盖根节点的高度属性，计算结果比实际内容高度小
• 你关闭了WebView的滚动能力，内容超出组件高度后直接被截断，出现溢出效果

修复步骤 #

1. 合并WebView重复样式 #

删除重复的style属性，把所有样式放到同一个属性中：

<WebView 
  key={this.state.value}
  ref={webview => this.setState({WebViewRef:webview})}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  scalesPageToFit={false}
  onLoadEnd={() => {
    this.setState({
      visibleBack:false
    })
  }}
  automaticallyAdjustContentInsets={false}
  source={{ uri: `http://backend.iferu.com/cleanbook.php?idbook=${this.props.product.id}` }} 
  injectedJavaScript={jsBeforeLoad}
  onMessage={this.onMessage}
  scrollEnabled={false}
  style={{
    paddingLeft:15,
    height: this.state.webViewHeight,
    width: Dimensions.get('window').width - 50
  }}
/>

2. 修复注入JS的字体单位与高度计算逻辑 #

给字体大小补全px单位，同时完善高度计算逻辑，新增文本强制换行、清除默认边距的规则，避免计算偏差：

sendDataToWebView(){
  let injectedData =
  `
    document.body.style.wordBreak = 'break-all';
    document.body.style.margin = 0;
    document.body.style.padding = 0;
    $('#takeAways').css({
      'font-size':${this.state.fontSizeState}px,
    });
    $('#recomClass').css({
      'font-size':${this.state.fontSizeState}px
    });
    $('#summaryTitle').css({
      'font-size':${this.state.fontSizeState}px
    });
    $('#summaryText').css({
      'font-size':${this.state.fontSizeState}px
    });
    $('#auteurTitle').css({
      'font-size':${this.state.fontSizeState}px
    });
    $('#auteurText').css({
      'font-size':${this.state.fontSizeState}px
    });
    const contentHeight = Math.max(
      document.body.offsetHeight, 
      document.body.scrollHeight,
      document.documentElement.offsetHeight,
      document.documentElement.scrollHeight
    );
    window.ReactNativeWebView.postMessage(contentHeight);  
  `;
  this.state.WebViewRef.injectJavaScript(injectedData);
}

3. 完善onMessage回调逻辑 #

确保收到高度后正确更新WebView的高度：

onMessage = (event) => {
  const contentHeight = parseInt(event.nativeEvent.data);
  if (contentHeight > 0) {
    this.setState({
      webViewHeight: contentHeight
    });
  }
}

内容的提问来源于stack exchange，提问作者Ayoub Mafkoud