React Native 解析HTML代码和URL

在这次使用过程中，分别去尝试了三个组件，来解析HTML代码和URL：

• 原生的WebView
• 第三方组件react-native-htmlview
• 官方推荐的替代原生WebView的react-native-webview

一、组件对比

1. 原生的WebView

优点：

• 同时可以解析HTML代码和URL链接。

缺点：

• 内容显示不完全，最右侧文字。
• 高度无法自适应。
  由于无法做到高度自适应，，所以放弃研究原生的WebView，看到网上有推荐第三方组件react-native-htmlview。从而转战研究react-native-htmlview。

2. react-native-htmlview中的WebView组件
优点：

• 高度自适应。

缺点：

• 该组件只能解析HTML代码，无法解析URL链接。

不满足需求，放弃,回到官方文档中，有推荐 react-native-webview ，从而转战react-native-webview中的WebView组件。

3. react-native-webview中的WebView组件
优点：

• 内容显示完全。
• 同时可以解析HTML代码和URL链接。
• 完全复用原生的WebView的所有属性。

缺点：

• 高度无法自适应。

二、使用

原生的WebView 和 react-native-webview 在解析HTML代码的时候，需要做HTML代码结构处理，否则直接解析的话，无法使用自动设置高度。后端返回的代码时通过
来分段的。

html代码段处理：

const html = `
                        
                            
                                ${html_code}
                                
                            
                        `;

通过这个，从而可以在WebView的onNavigationStateChange的函数中获取到内容实际高度。

使用：

    {
            if(!isNaN(parseInt(navState.title))) {
                this.setState({
                    height:parseInt(navState.title) + 20
                })
            }
        }}
    />

• 此处的WebView是指的是 原生的WebView 和 react-native-webview中的WebView组件。
• react-native-webview中的WebView组件 从源代码上来说其实也是封装的原生的WebView。
• 两个组件的参考文档：https://reactnative.cn/docs/webview/

三、其他

样式问题：
可以使用内联样式，参考css 来设置就可以。无法识别通过StyleSheet.create（）创建的样式。

图片问题
图片的src可以是url，也可以是转换之后的data：base64，无法使用本地图片。

四、待解决问题

当 WebView 的 source 为url的时候，暂无法做到高度自适应。

tips:当解析HTML代码出现乱码的时候，在source属性设置上加上source={{html: html,baseUrl:''}}。完美解决问题。