ReactNative项目OpenHarmony三方库集成实战：react-native-render-html

欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net项目基于 RN 0.72.90 开发 前言在移动应用开发中HTML 内容渲染是一项常见需求特别是在新闻资讯、富文本编辑、邮件展示等场景中。React Native 原生并不支持直接渲染 HTML而react-native-render-html是一个功能强大的 HTML 渲染库能够将 HTML 内容转换为 React Native 组件支持丰富的样式定制、图片处理等特性是处理富文本内容的理想选择。 库简介基本信息库名称:react-native-render-html版本信息:6.3.4支持 RN 0.72/0.77 版本官方仓库: https://github.com/meliorence/react-native-render-html主要功能: HTML 内容渲染 CSS 样式支持️ 图片自适应处理 跨平台支持iOS、Android、Web、HarmonyOS为什么需要 HTML 渲染库特性WebView 方案react-native-render-html性能⚠️ 较重✅ 轻量级原生组件样式定制⚠️ 受限✅ 完全可控原生交互⚠️ 复杂✅ 直接使用 RN 组件内存占用⚠️ 较高✅ 低内存占用HarmonyOS 支持⚠️ 需适配✅ 完善适配核心功能功能说明HarmonyOS 支持sourceHTML 内容源✅contentWidth内容宽度✅baseStyle基础样式✅tagsStyles标签样式✅classesStyles类名样式✅ignoredDomTags忽略的标签✅allowedStyles允许的样式属性✅enableCSSInlineProcessing内联 CSS 处理✅onHTMLLoadedHTML 加载完成回调✅兼容性验证在以下环境验证通过RNOH: 0.72.27;SDK: HarmonyOS-Next-DB1 5.0.0.29(SP1);IDE: DevEco Studio 5.0.3.403;ROM: 3.0.0.25RNOH: 0.72.33;SDK: OpenHarmony 5.0.0.71(API Version 12 Release);IDE: DevEco Studio 5.0.3.900;ROM: NEXT.0.0.71RNOH: 0.77.18;SDK: HarmonyOS 5.1.1 Release;IDE: DevEco Studio 5.1.1.830;ROM: NEXT 5.1.0.150 安装步骤1. 安装依赖# RN 0.72/0.77 版本npminstallreact-native-render-html6.3.4# 或者使用 yarnyarnaddreact-native-render-html6.3.42. 验证安装安装完成后检查package.json文件{dependencies:{react-native-render-html:^6.3.4}} HarmonyOS 平台配置本库为纯 JavaScript 实现无需额外的原生端配置。安装完成后即可直接使用。 API 详解source - HTML 内容源指定要渲染的 HTML 内容支持多种格式。类型HTMLSource必填是HTMLSource 结构属性类型说明htmlstringHTML 字符串uristring远程 HTML 地址domDOMDOM 对象使用场景新闻内容展示富文本消息产品详情描述const source { html: h1标题示例/h1 p这是一段strong加粗/strong的文本内容。/p ul li列表项 1/li li列表项 2/li /ul , }; RenderHtml contentWidth{width} source{source} /contentWidth - 内容宽度设置 HTML 内容的渲染宽度通常使用屏幕宽度减去边距。类型number必填否但强烈建议设置使用场景响应式布局图片自适应多列布局const { width } useWindowDimensions(); RenderHtml contentWidth{width - 32} source{{ html: p内容宽度自适应示例/p }} /baseStyle - 基础样式为整个 HTML 文档设置默认样式可继承的样式会传递给子元素。类型MixedStyleDeclaration使用场景全局字体设置默认文本颜色行高和字号const baseStyle { fontSize: 16, color: #333333, lineHeight: 24, fontFamily: System, }; RenderHtml contentWidth{width} source{source} baseStyle{baseStyle} /tagsStyles - 标签样式为特定 HTML 标签设置样式。类型Recordstring, MixedStyleDeclaration使用场景标题样式定制段落间距列表样式const tagsStyles { h1: { fontSize: 28, fontWeight: 700 as const, color: #1a1a1a, marginBottom: 16, }, h2: { fontSize: 22, fontWeight: 600 as const, color: #333333, marginBottom: 12, }, p: { fontSize: 16, lineHeight: 24, color: #666666, marginBottom: 12, }, blockquote: { borderLeftWidth: 4, borderLeftColor: #007AFF, paddingLeft: 16, marginVertical: 12, backgroundColor: #F5F5F5, paddingVertical: 8, }, }; RenderHtml contentWidth{width} source{source} tagsStyles{tagsStyles} /classesStyles - 类名样式为 CSS 类名设置样式。类型Recordstring, MixedStyleDeclaration使用场景自定义类名样式多种样式变体组件化样式const source { html: p classhighlight高亮文本示例/p p classwarning警告文本示例/p p classsuccess成功文本示例/p , }; const classesStyles { highlight: { backgroundColor: #FFF3CD, padding: 8, borderRadius: 4, borderLeftWidth: 4, borderLeftColor: #FFC107, }, warning: { backgroundColor: #F8D7DA, padding: 8, borderRadius: 4, borderLeftWidth: 4, borderLeftColor: #DC3545, color: #721C24, }, success: { backgroundColor: #D4EDDA, padding: 8, borderRadius: 4, borderLeftWidth: 4, borderLeftColor: #28A745, color: #155724, }, }; RenderHtml contentWidth{width} source{source} classesStyles{classesStyles} /ignoredDomTags - 忽略标签指定要忽略的 HTML 标签列表。类型string[]使用场景过滤不需要的标签移除广告内容简化渲染RenderHtml contentWidth{width} source{source} ignoredDomTags{[script, style, iframe]} /onHTMLLoaded - HTML 加载回调HTML 内容加载完成时触发的回调函数。类型(html: string) void使用场景加载完成处理内容分析调试日志const handleHTMLLoaded (html: string) { console.log(HTML 加载完成:, html.length, 字符); }; RenderHtml contentWidth{width} source{source} onHTMLLoaded{handleHTMLLoaded} / 完整示例importReact,{useState}fromreact;import{View,Text,StyleSheet,ScrollView,TouchableOpacity,useWindowDimensions,SafeAreaView,StatusBar,TextInput,}fromreact-native;importRenderHtmlfromreact-native-render-html;typeExampleTypebasic|styled|news;constHTML_EXAMPLES:RecordExampleType,string{basic:h1基础 HTML 渲染/h1 p这是一个基础的 HTML 渲染示例展示了常见的 HTML 元素。/p h2文本格式/h2 p支持strong加粗/strong、em斜体/em、u下划线/u等格式。/p p也支持code代码片段/code和mark高亮文本/mark。/p h2列表/h2 ul li无序列表项 1/li li无序列表项 2/li li无序列表项 3/li /ul ol li有序列表项 1/li li有序列表项 2/li li有序列表项 3/li /ol h2引用/h2 blockquote 这是一段引用文本通常用于展示他人的言论或重要内容。 /blockquote,styled:h1 classtitle样式化内容/h1 p classintro通过自定义样式可以实现丰富的视觉效果。/p div classcard h3卡片标题/h3 p这是一个带有自定义样式的卡片组件。/p /div div classalert warning strong警告/strong这是一条警告信息。 /div div classalert success strong成功/strong操作已成功完成。 /div div classalert info strong提示/strong这是一条提示信息。 /div,news:article h1React Native 鸿蒙适配取得重大进展/h1 p classmeta发布时间2024年1月15日 | 作者技术团队/p p近日React Native 鸿蒙适配工作取得了重大进展。开发团队成功适配了多个核心组件和第三方库为开发者提供了更完善的跨平台开发体验。/p h2主要更新/h2 ul li新增 50 三方库适配支持/li li优化了渲染性能提升 30%/li li完善了开发文档和示例代码/li li修复了若干已知问题/li /ul blockquote 这次更新标志着 React Native 在鸿蒙平台上的成熟度达到了新的高度。 —— 项目负责人 /blockquote h2后续计划/h2 p团队将继续推进适配工作预计在下一版本中支持更多常用库并进一步优化性能表现。/p /article,};constApp:React.FC(){const{width}useWindowDimensions();const[activeExample,setActiveExample]useStateExampleType(basic);const[customHtml,setCustomHtml]useState(p输入 HTML 内容测试/p);const[showCustomInput,setShowCustomInput]useState(false);constbaseStyle{fontSize:16,color:#333333,lineHeight:26,};consttagsStyles{h1:{fontSize:28,fontWeight:700asconst,color:#1a1a1a,marginBottom:16,marginTop:8,},h2:{fontSize:22,fontWeight:600asconst,color:#333333,marginBottom:12,marginTop:16,},h3:{fontSize:18,fontWeight:600asconst,color:#444444,marginBottom:8,},p:{fontSize:16,lineHeight:26,color:#333333,marginBottom:12,},ul:{marginBottom:16,},ol:{marginBottom:16,},li:{fontSize:16,lineHeight:24,marginBottom:4,},blockquote:{borderLeftWidth:4,borderLeftColor:#007AFF,paddingLeft:16,marginVertical:16,backgroundColor:#F5F5F5,paddingVertical:12,paddingRight:16,borderRadius:4,},code:{backgroundColor:#F0F0F0,paddingHorizontal:8,paddingVertical:2,borderRadius:4,fontFamily:monospace,},article:{paddingBottom:20,},};constclassesStyles{title:{fontSize:32,fontWeight:700asconst,textAlign:centerasconst,color:#007AFF,marginBottom:20,},intro:{fontSize:18,color:#666666,textAlign:centerasconst,marginBottom:24,},card:{backgroundColor:#FFFFFF,borderRadius:12,padding:20,marginVertical:12,shadowColor:#000,shadowOffset:{width:0,height:2},shadowOpacity:0.1,shadowRadius:8,elevation:3,},alert:{padding:16,borderRadius:8,marginVertical:8,},warning:{backgroundColor:#FFF3CD,borderLeftWidth:4,borderLeftColor:#FFC107,},success:{backgroundColor:#D4EDDA,borderLeftWidth:4,borderLeftColor:#28A745,},info:{backgroundColor:#D1ECF1,borderLeftWidth:4,borderLeftColor:#17A2B8,},meta:{fontSize:14,color:#999999,marginBottom:16,},};constrenderExampleButton(type:ExampleType,label:string)(TouchableOpacity key{type}style{[styles.exampleButton,activeExampletypestyles.exampleButtonActive,]}onPress{(){setActiveExample(type);setShowCustomInput(false);}}Text style{[styles.exampleButtonText,activeExampletypestyles.exampleButtonTextActive,]}{label}/Text/TouchableOpacity);return(SafeAreaView style{styles.container}StatusBar barStyledark-contentbackgroundColor#FFFFFF/View style{styles.header}Text style{styles.headerTitle}HTML渲染示例/TextTouchableOpacity style{styles.customButtonHeader}onPress{()setShowCustomInput(!showCustomInput)}Text style{styles.customButtonHeaderText}{showCustomInput?预设示例:自定义}/Text/TouchableOpacity/View{!showCustomInput(View style{styles.tabBar}{renderExampleButton(basic,基础)}{renderExampleButton(styled,样式)}{renderExampleButton(news,新闻)}/View)}{showCustomInput?(View style{styles.customInputContainer}TextInput style{styles.htmlInput}value{customHtml}onChangeText{setCustomHtml}multiline placeholder输入 HTML 内容textAlignVerticaltop/ScrollView style{styles.previewContainer}RenderHtml contentWidth{width-32}source{{html:customHtml}}baseStyle{baseStyle}tagsStyles{tagsStyles}//ScrollView/View):(ScrollView style{styles.content}View style{styles.htmlContainer}RenderHtml contentWidth{width-32}source{{html:HTML_EXAMPLES[activeExample]}}baseStyle{baseStyle}tagsStyles{tagsStyles}classesStyles{classesStyles}//View/ScrollView)}/SafeAreaView);};conststylesStyleSheet.create({container:{flex:1,backgroundColor:#F5F5F5,},header:{flexDirection:row,alignItems:center,justifyContent:space-between,padding:16,backgroundColor:#FFFFFF,borderBottomWidth:1,borderBottomColor:#E5E5EA,},headerTitle:{fontSize:20,fontWeight:700,color:#333333,},customButtonHeader:{backgroundColor:#007AFF,paddingHorizontal:16,paddingVertical:8,borderRadius:8,},customButtonHeaderText:{color:#FFFFFF,fontSize:14,fontWeight:600,},tabBar:{flexDirection:row,backgroundColor:#FFFFFF,paddingHorizontal:16,paddingVertical:12,gap:8,},exampleButton:{paddingHorizontal:16,paddingVertical:8,backgroundColor:#F0F0F0,borderRadius:20,},exampleButtonActive:{backgroundColor:#007AFF,},exampleButtonText:{fontSize:14,color:#666666,fontWeight:500,},exampleButtonTextActive:{color:#FFFFFF,},content:{flex:1,},htmlContainer:{backgroundColor:#FFFFFF,margin:16,padding:16,borderRadius:12,minHeight:400,},customInputContainer:{flex:1,padding:16,},htmlInput:{backgroundColor:#FFFFFF,borderRadius:8,padding:12,fontSize:14,fontFamily:monospace,height:150,marginBottom:16,borderWidth:1,borderColor:#E5E5EA,},previewContainer:{flex:1,backgroundColor:#FFFFFF,borderRadius:8,padding:16,},});exportdefaultApp;⚠️ 注意事项部分标签可能并不能适配。遗留问题图片宽度问题: img 的宽度不会随着 contentWidth 的动态修改而更改这是原库本身的限制与 iOS/Android 表现一致。issue#638使用建议设置 contentWidth: 始终设置contentWidth属性以确保正确的布局计算使用 useWindowDimensions: 结合useWindowDimensions()实现响应式布局性能优化: 对于长内容考虑分块渲染或虚拟列表常见问题Q: 图片不显示A: 确保图片 URL 可访问并且有正确的网络权限。远程图片需要配置网络请求。Q: 样式不生效A: 检查样式属性名称是否正确React Native 样式属性与 CSS 有所不同。例如使用backgroundColor而不是background-color。Q: HTML 内容过长导致卡顿A: 考虑分块渲染或使用虚拟列表优化性能。Q: 特殊字符显示异常A: 确保 HTML 内容正确编码必要时使用实体字符。