在App项目中，对比了react-native-render-html（RNRH）和react-native-htmlview（RNH），发现RNRH易红屏，而RNH图片处理不佳。最终选择RNRH并解决其崩溃问题。通过设置ignoredStyles忽略导致崩溃的CSS属性，并使用特定renderers处理图片以保持长宽比，确保与后台Ueditor配合良好。
1、react-native-render-html和react-native-htmlview的比较
App项目中需要用到解析HTML的组件，在github上面找到比较合适的两款，react-native-render-html（RNRH）和react-native-htmlview（RNH）。子啊实际的使用过程中，两个各自有不同的问题。
首先RNRH容易红屏，这个使用过的人肯定有体会，而RNH则在图片方面比较不好处理，最终我选择了RNRH。
2、使用
安装什么的就不说了
import HTML from "react-native-render-html";然后在组件的render中
<HTML
ignoredStyles={["font-family", "transform", "display", "border-style", "max-width", "default-src", "loadingIndicatorSrc"]}
renderers={renderer}
debug={true}
tagsStyles={
{p: {fontSize: 16}, span: {fontSize: 16}}}
html={this.state.htmlContent}
imagesMaxWidth={width}/>注意组件的ignoredStyles属性，这里配置的是需要忽略的css属性，很多导致崩溃的原因就是有些css属性无法解析。所以使用过程中，查看日志很重要，哪个属性导致的崩溃，
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
