react-native 的一次加载html问题

最近在开发过程中遇到了一个，加载html或者一个链接的问题。开始用的是react-native的webView进行展示。效果不是太好。

问题1：

iOS端利用scalesPageToFit设置false， 但是有些图片宽度超过屏幕尺寸的时候，webView会横向滑动。

问题2：

无法获取组件高度，如果固定，页面感觉不是很顺畅

问题3：

android部分手机内核低，显示比较迟钝，
等等问题
遇到问题就弃用了，选择了一个不错的库：react-native-render-html
其中有发现问题，因为在后台编辑时，加载一些颜色或者图片时，还有字体的时候会存在问题，
解决方式：

 {
      const { name, parent } = node;
      if (name === "span" || name === 'p') {
        node.attribs = {
               ...(node.attribs || {}),
             style: `font-family: arial;`
        };
          return node;
      }
       if (name === "img") {
         node.attribs = {
           ...(node.attribs || {}),
           width: '100%',
            height: 0,
         };
         return node;
     }   }}
   />

针对于html代码进行拦截，进行设置字体，以及样式， 以及图片自适应问题。
但是后来又发现问题，后台不知道在那粘贴的html代码，编辑了一下之后发布。展示的时候，iOS和android上有明显的样式问题，虽然性能比较好，但是存在这个问题。也不知道以后有什么问题。被果断弃用了。

回归本质：

最后还是决定用webView去解决。首先就是要获取webView的高度问题。
其实还是很好解决：

 
          
          ${这是一段html静态代码}`,
        baseUrl: ''
      }}
      originWhitelist={["*"]}
      style={{
        height: this.state.height,
        width: CommonUtils.width - 40,
        marginLeft: 20,
        marginTop: 30
      }}
      scrollEnabled={false}
      bounces={false}
      automaticallyAdjustContentInsets={true}
      contentInset={{ top: 0, left: 0 }}
      onNavigationStateChange={(title) => {
        if (title.title != undefined && title.title != '' && title.title != 'about:blank') {
          console.log(title.title);
          this.setState({
            height: (parseInt(title.title) + 20)
          })
        }
      }}
      scalesPageToFit={判断是iOS还是android ? false : true}
      javaScriptEnabled
    />

可以完美解决问题，这块可以注意一下加载的html代码，适当加入自己的代码形式，就可以了

腾讯X5

之所以提到这个问题，是因为程序中加载了一个三方的外连接，里面包含加载svg图片， 视屏播放等问题，
对方是用cordar6.0开发的，遇到的问题是oppo5.1系统手机，无法加载进去，部分vivo和oppo手机无法加载svg图片。
所以选择了加载腾讯x5内核。加载之后，是很流畅。也很好解决问题。如果存在加载慢等问题，可以去试一下。