React Native 解析HTML代码和URL上海迅速网络

13916016158

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-webview中的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>
                            <body>
                                ${html_code}
                                <script>
                                    window.onload=function(){
                                        window.location.hash = 1;
                                        document.title = document.body.clientHeight;
                                    }
                                </script>
                            </body>
                        </html>`;
1
2
3
4
5
6
7
8
9
10
11
12
通过这个，从而可以在WebView的onNavigationStateChange的函数中获取到内容实际高度。

使用：

<View style={{height:this.state.height}}>
    <WebView
        source={{ html: html}}
        scalesPageToFit={false}
        automaticallyAdjustContentInsets={false}
        scrollEnabled={false}
        onNavigationStateChange={(navState)=>{
            if(!isNaN(parseInt(navState.title))) {
                this.setState({
                    height:parseInt(navState.title) + 20
                })
            }
        }}
    />
</View>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
此处的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:''}}。完美解决问题。

————————————————
版权声明：本文为CSDN博主「Initail」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_25905161/article/details/89962641