<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>React Native for OpenHarmony (RNOH) - 鸿蒙生态桥梁</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: #f5f7fc;
color: #1e2a3e;
line-height: 1.5;
scroll-behavior: smooth;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #eef2f9;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #b9c4d4;
border-radius: 10px;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 2rem 1.5rem;
}
.hero {
background: linear-gradient(135deg, #0b2b3b 0%, #1a4a5f 100%);
border-radius: 2rem;
padding: 2.5rem 2rem;
margin-bottom: 2.5rem;
color: white;
box-shadow: 0 20px 35px -12px rgba(0,0,0,0.15);
position: relative;
overflow: hidden;
}
.hero::after {
content: "⚛️🌿";
font-size: 180px;
opacity: 0.06;
position: absolute;
bottom: -30px;
right: 0px;
pointer-events: none;
}
.hero-badge {
display: inline-block;
background: rgba(255,255,255,0.2);
backdrop-filter: blur(4px);
padding: 0.3rem 1rem;
border-radius: 40px;
font-size: 0.85rem;
font-weight: 500;
margin-bottom: 1rem;
}
.hero h1 {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
}
.hero h1 span {
font-weight: 400;
background: linear-gradient(120deg, #d6f0ff, #a0d8ff);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.hero-desc {
font-size: 1.1rem;
max-width: 75%;
opacity: 0.9;
margin-bottom: 1.5rem;
}
.stats {
display: flex;
gap: 1.8rem;
flex-wrap: wrap;
margin-top: 1rem;
}
.stat-item {
background: rgba(255,255,255,0.1);
border-radius: 60px;
padding: 0.4rem 1rem;
font-size: 0.85rem;
font-weight: 500;
backdrop-filter: blur(4px);
}
.card {
background: white;
border-radius: 1.75rem;
padding: 1.8rem;
margin-bottom: 2rem;
box-shadow: 0 6px 14px rgba(0,0,0,0.02), 0 2px 4px rgba(0,0,0,0.03);
transition: all 0.2s ease;
border: 1px solid #eef2f6;
}
.card:hover {
box-shadow: 0 20px 30px -12px rgba(0,0,0,0.08);
}
.section-title {
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 1.2rem;
display: flex;
align-items: center;
gap: 10px;
border-left: 5px solid #1e7b8c;
padding-left: 1rem;
color: #0f2e3a;
}
.section-sub {
color: #4a627a;
margin-bottom: 1.8rem;
font-size: 0.95rem;
}
.roadmap-horizontal {
margin: 2rem 0 1rem;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.roadmap-track {
display: flex;
align-items: stretch;
gap: 0.5rem;
min-width: 800px;
}
.roadmap-node {
flex: 1;
min-width: 170px;
background: #f9fbfe;
border-radius: 1.2rem;
padding: 1.2rem 1rem;
text-align: center;
position: relative;
border: 1px solid #e2e9f2;
transition: all 0.2s;
}
.roadmap-node:not(:last-child)::after {
content: "→";
position: absolute;
right: -0.8rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.4rem;
color: #b9c4d4;
font-weight: 300;
}
.version-tag {
display: inline-block;
font-size: 0.65rem;
font-weight: 700;
padding: 0.2rem 0.7rem;
border-radius: 30px;
margin-bottom: 0.6rem;
}
.tag-lts { background: #e0f2fe; color: #0369a1; }
.tag-stable { background: #dcfce7; color: #15803d; }
.tag-latest { background: #fef9c3; color: #b45309; }
.tag-building { background: #ffede0; color: #b45309; }
.version-badge {
font-size: 1.5rem;
font-weight: 800;
color: #1f5e6e;
margin: 0.3rem 0;
}
.ecosystem {
font-size: 0.7rem;
background: #eef2fa;
border-radius: 1rem;
padding: 0.3rem 0.5rem;
margin: 0.5rem 0;
color: #2c6280;
display: inline-block;
}
.ecosystem i {
margin-right: 4px;
}
.branch-link {
font-size: 0.75rem;
margin-top: 0.6rem;
display: inline-block;
background: #eef2fc;
padding: 0.2rem 0.7rem;
border-radius: 20px;
text-decoration: none;
color: #1e7b8c;
font-weight: 500;
transition: 0.1s;
}
.branch-link:hover {
background: #1e7b8c;
color: white;
}
.future-node {
background: #fef7e0;
border-top: 3px solid #f4b942;
}
.future-note {
background: #f0f6fa;
border-radius: 1rem;
padding: 0.8rem 1.2rem;
margin-top: 1.5rem;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: space-between;
}
.sig-btn {
background: #1e7b8c;
color: white;
border: none;
padding: 6px 14px;
border-radius: 30px;
font-weight: 500;
text-decoration: none;
font-size: 0.8rem;
}
.arch-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 0.8rem;
}
.arch-card {
flex: 1;
background: #fafcff;
border-radius: 1.2rem;
padding: 1rem;
border-left: 4px solid #2c9ab3;
}
.notice-list {
list-style: none;
}
.notice-item {
padding: 1rem 0;
border-bottom: 1px solid #edf2f7;
display: flex;
gap: 12px;
}
.notice-icon {
width: 32px;
height: 32px;
background: #eef6fc;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #1e7b8c;
}
.tag {
font-size: 0.65rem;
background: #e9ecef;
padding: 2px 8px;
border-radius: 20px;
margin-left: 8px;
}
.tag-bugfix { background: #fee2e2; color: #b91c1c; }
.tag-release { background: #e0f2fe; color: #0369a1; }
.two-columns {
display: flex;
flex-wrap: wrap;
gap: 1.8rem;
}
.col {
flex: 1;
min-width: 250px;
}
.community-header {
font-weight: 600;
margin: 0 0 0.8rem;
font-size: 1rem;
color: #1e7b8c;
}
.issue-list {
list-style: none;
}
.issue-item {
padding: 0.8rem 0;
border-bottom: 1px solid #edf2f7;
display: flex;
gap: 12px;
align-items: flex-start;
}
.issue-link {
text-decoration: none;
color: #226f8a;
font-weight: 500;
}
.issue-desc {
font-size: 0.8rem;
color: #556c82;
}
.analysis-grid {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 1rem;
}
.analysis-card {
flex: 1;
background: #fbfdff;
border-radius: 1.2rem;
border: 1px solid #eef2fa;
padding: 1.2rem;
transition: 0.2s;
}
.analysis-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px -10px rgba(0,0,0,0.08);
}
.analysis-header {
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
color: #1a5c6e;
}
.ai-prompt {
background: #f0f4f9;
padding: 0.6rem;
border-radius: 0.9rem;
font-family: monospace;
font-size: 0.75rem;
margin: 12px 0;
border-left: 3px solid #2c9ab3;
}
.ai-response {
font-size: 0.85rem;
background: #ffffff;
padding: 0.6rem;
border-radius: 0.7rem;
border: 1px solid #e9edf2;
}
.ai-note {
background: #eef6fc;
border-radius: 1rem;
padding: 1rem;
margin-bottom: 1.2rem;
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.wechat-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.wechat-modal-content {
background: white;
border-radius: 1.5rem;
padding: 2rem;
text-align: center;
max-width: 400px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.wechat-modal-content img {
width: 200px;
height: 200px;
margin: 1rem 0;
border-radius: 0.5rem;
}
.wechat-modal-content h3 {
color: #1e7b8c;
margin-bottom: 0.5rem;
}
.wechat-modal-content p {
color: #666;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.wechat-close {
background: #eef2f9;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 2rem;
cursor: pointer;
color: #1e7b8c;
font-weight: 500;
transition: 0.2s;
}
.wechat-close:hover {
background: #1e7b8c;
color: white;
}
footer {
text-align: center;
margin-top: 2rem;
padding: 1.5rem;
border-top: 1px solid #e2e8f0;
font-size: 0.8rem;
color: #6c86a3;
}
@media (max-width: 780px) {
.hero h1 { font-size: 1.8rem; }
.hero-desc { max-width: 100%; }
.section-title { font-size: 1.4rem; }
.roadmap-track { gap: 1rem; }
.roadmap-node:not(:last-child)::after { display: none; }
}
</style>
</head>
<body>
<div class="container">
<div class="hero">
<div class="hero-badge"><i class="fas fa-code-branch"></i> OpenHarmony SIG · 官方适配</div>
<h1>React Native for <span>OpenHarmony</span></h1>
<div class="hero-desc">将 React Native 开发体验完整带入鸿蒙生态 (HarmonyOS NEXT)。高性能桥接、完整 Fabric 支持，让 RN 应用无缝运行于鸿蒙设备。</div>
<div class="stats">
<div class="stat-item"><i class="fas fa-download"></i> 累计下载 390k+</div>
<div class="stat-item"><i class="fas fa-users"></i> 55+ 核心贡献者</div>
<div class="stat-item"><i class="fas fa-tag"></i> 最新稳定: 0.82.72</div>
<div class="stat-item"><i class="fab fa-git-alt"></i> 活跃分支 0.72 / 0.77 / 0.82 / 0.84</div>
</div>
</div>
<div class="card">
<div class="section-title"><i class="fas fa-info-circle"></i> 项目简介</div>
<p>RNOH (React Native for OpenHarmony) 是 OpenHarmony 系统级的 RN 渲染后端与原生桥接实现。开发者可使用 React 语法及 React Native 生态库，直接构建面向 HarmonyOS NEXT 的高质量应用。项目遵循 MIT 协议，深度融合 ArkUI，性能接近原生体验。</p>
<div style="margin-top: 12px;"><i class="fas fa-link"></i> 官方文档: <a href="zh-cn/README.md" style="color:#1e7b8c">中文文档</a> · <a href="en/README.md" style="color:#1e7b8c">英文文档</a> · <a href="https://gitcode.com/openharmony-sig/ohos_react_native" target="_blank" style="color:#1e7b8c">仓库地址 <i class="fas fa-external-link-alt"></i></a></div>
</div>
<div class="card">
<div class="section-title"><i class="fas fa-road"></i> 版本演进 · 路标图</div>
<div class="section-sub">基于 React Native 上游版本对齐，每个版本明确维护类型及配套三方库生态，跟随社区节奏每年发布大版本。</div>
<div class="roadmap-horizontal">
<div class="roadmap-track">
<div class="roadmap-node">
<div class="version-tag tag-lts">LTS 长期维护</div>
<div class="version-badge">0.72</div>
<div style="font-size:0.75rem;">2023 Q4 发布</div>
<div class="ecosystem"><i class="fas fa-cube"></i> 配套三方库：<a href="https://gitcode.com/OpenHarmony-RN/usage-docs" target="_blank" style="color:#2c6280;text-decoration:underline;">react-navigation 6.x, mobx, redux-toolkit, async-storage</a></div>
<div class="timeline-desc" style="font-size:0.7rem; margin-top:4px;">首版本</div>
<a href="zh-cn/版本说明.md" class="branch-link" data-branch="0.72" style="cursor:pointer;">分支详情 <i class="fas fa-arrow-right"></i></a>
</div>
<div class="roadmap-node">
<div class="version-tag tag-stable">稳定版</div>
<div class="version-badge">0.77</div>
<div style="font-size:0.75rem;">2024 Q4 发布</div>
<div class="ecosystem"><i class="fas fa-cube"></i> 配套三方库：<a href="https://gitcode.com/OpenHarmony-RN/usage-docs" target="_blank" style="color:#2c6280;text-decoration:underline;">react-native-svg, react-native-webview, reanimated 3.x, MMKV</a></div>
<div class="timeline-desc" style="font-size:0.7rem;">性能提升20%，企业推荐</div>
<a href="zh-cn/版本说明.md" class="branch-link" data-branch="0.77" style="cursor:pointer;">分支详情 <i class="fas fa-arrow-right"></i></a>
</div>
<div class="roadmap-node">
<div class="version-tag tag-latest">最新稳定版</div>
<div class="version-badge">0.82</div>
<div style="font-size:0.75rem;">2025 Q4 发布</div>
<div class="ecosystem"><i class="fas fa-cube"></i> 配套三方库：<a href="https://gitcode.com/OpenHarmony-RN/usage-docs" target="_blank" style="color:#2c6280;text-decoration:underline;">FlashList, react-native-gesture-handler 2.x, Hermes 0.82+, 官方新架构组件</a></div>
<div class="timeline-desc" style="font-size:0.7rem;">动态库按需加载，生态完整</div>
<a href="zh-cn/版本说明.md" class="branch-link" data-branch="0.82" style="cursor:pointer;">分支详情 <i class="fas fa-arrow-right"></i></a>
</div>
<div class="roadmap-node future-node">
<div class="version-tag tag-building">构建中</div>
<div class="version-badge">0.84</div>
<div style="font-size:0.75rem;">预计 2026 Q2</div>
<div class="ecosystem"><i class="fas fa-cube"></i> 配套三方库：<a href="https://gitcode.com/OpenHarmony-RN/usage-docs" target="_blank" style="color:#2c6280;text-decoration:underline;">逐步适配中，重点支持并发渲染生态</a></div>
<div class="timeline-desc" style="font-size:0.7rem;">并发特性实验版</div>
<a href="zh-cn/版本说明.md" class="branch-link" data-branch="0.84" style="cursor:pointer;">预览分支 <i class="fas fa-flask"></i></a>
</div>
<div class="roadmap-node future-node">
<div class="version-tag" style="background:#e8e8e8; color:#666;">待定</div>
<div class="version-badge">规划中</div>
<div style="font-size:0.75rem;">暂未确定</div>
<div class="ecosystem"><i class="fas fa-cube"></i> 改动计划中，具体细节待定</div>
<div class="timeline-desc" style="font-size:0.7rem;">欢迎参与规划讨论</div>
<span class="branch-link" style="cursor:default; color:#999;">社区共建</span>
</div>
</div>
</div>
<div class="future-note">
<span><i class="fas fa-chart-line"></i> 未来演进计划：每年跟随 React Native 社区发布 2~4 个大版本，持续适配鸿蒙新特性。</span>
<a href="#" id="sigInviteBtn" class="sig-btn"><i class="fas fa-users"></i> 欢迎加入 RN SIG 商讨大版本事宜</a>
</div>
<div id="branchDetail" style="margin-top: 16px; background: #F8FAFE; border-radius: 1.2rem; padding: 1rem; border: 1px solid #E2EDF5; display: none;">
<div style="display: flex; justify-content: space-between;"><strong id="branchName"></strong><span id="closeBranch" style="cursor:pointer;"><i class="fas fa-times"></i></span></div>
<p id="branchDesc" style="margin-top: 8px; font-size:0.9rem;"></p>
</div>
</div>
<div class="card">
<div class="section-title"><i class="fas fa-bullhorn"></i> 重大通知</div>
<div class="two-columns">
<div class="col">
<h3 style="margin-bottom: 1rem;"><i class="fas fa-tag"></i> 版本发布</h3>
<ul class="notice-list">
<li class="notice-item"><div class="notice-icon"><i class="fas fa-rocket"></i></div><div><div class="notice-title">RNOH 0.82.18 正式发布 <span class="tag tag-release">技术预览版</span></div><div>适配 RN 0.82，Hermes 内存优化，动态库按需加载。详情：<a href="https://www.npmjs.com/package/@react-native-oh/react-native-harmony/v/0.82.18" target="_blank" style="color:#1e7b8c">查看版本</a></div><div class="notice-date">2026年3月26日</div></div></li>
<li class="notice-item"><div class="notice-icon"><i class="fas fa-tag"></i></div><div><div class="notice-title">RNOH 0.77.59 发布 <span class="tag tag-release">0.77演进版本</span></div><div>性能提升20%，新架构增强。详情：<a href="https://www.npmjs.com/package/@react-native-oh/react-native-harmony/v/0.77.59" target="_blank" style="color:#1e7b8c">查看版本</a></div><div class="notice-date">2026年3月20日</div></div></li>
<li class="notice-item"><div class="notice-icon"><i class="fas fa-tag"></i></div><div><div class="notice-title">RNOH 0.72.128 发布 <span class="tag tag-release">0.72演进版本</span></div><div>长期维护版本，稳定可靠。详情：<a href="https://www.npmjs.com/package/@react-native-oh/react-native-harmony/v/0.72.128" target="_blank" style="color:#1e7b8c">查看版本</a></div><div class="notice-date">2026年3月15日</div></div></li>
<li class="notice-item"><div class="notice-icon"><i class="fas fa-code-branch"></i></div><div><div class="notice-title">0.84 构建分支开放预览 <span class="tag tag-release">预览版</span></div><div>基于 RN 0.84 核心，实验性支持并发特性，欢迎开发者提前试用反馈。</div><div class="notice-date">2026年3月1日</div></div></li>
</ul>
</div>
<div class="col">
<h3 style="margin-bottom: 1rem;"><i class="fas fa-bug"></i> BugFix 关键修复</h3>
<ul class="notice-list">
<li class="notice-item"><div class="notice-icon"><i class="fas fa-chalkboard"></i></div><div><div class="notice-title">折叠屏 Modal 文字截断修复 <span class="tag tag-bugfix">紧急修复</span></div><div>分帧策略解决，已合入 0.72/0.77/0.82 分支。</div><div class="notice-date">2026年3月5日</div></div></li>
<li class="notice-item"><div class="notice-icon"><i class="fas fa-network-wired"></i></div><div><div class="notice-title">WebSocket 后台重连问题修复 <span class="tag tag-bugfix">HotFix</span></div><div>补丁已合入 0.77+，提升长连接稳定性。</div><div class="notice-date">2026年2月9日</div></div></li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="section-title"><i class="fas fa-cubes"></i> 架构优势</div>
<div class="arch-grid">
<div class="arch-card"><i class="fas fa-bolt"></i> <strong>极速启动</strong><br>基于原生 ArkTS 运行时，React Native 初始化耗时减少 30%</div>
<div class="arch-card"><i class="fas fa-mobile-alt"></i> <strong>多设备一致</strong><br>折叠屏、平板、手机自适应布局，完美适配鸿蒙多态</div>
<div class="arch-card"><i class="fas fa-code-branch"></i> <strong>TurboModule 全支持</strong><br>原生模块按需加载，内存占用降低 25%</div>
</div>
<div style="margin-top: 1rem;"><i class="fas fa-shield-alt"></i> 完整支持 Hermes 引擎、Codegen 代码生成，与 RN 官方工具链无缝衔接。</div>
</div>
<div class="card">
<div class="section-title"><i class="fas fa-comments"></i> 社区问题清单</div>
<div class="section-sub">整合 React Native 官方社区常见问题 & RNOH 鸿蒙适配专项问答</div>
<div class="two-columns">
<div class="col">
<div class="community-header"><i class="fab fa-react"></i> React Native 社区高频</div>
<ul class="issue-list">
<li class="issue-item"><i class="fas fa-question-circle"></i><div><a href="zh-cn/架构介绍.md" class="issue-link">[RN] 新架构 Fabric 如何与 RNOH 兼容？</a><div class="issue-desc">RNOH 完全支持 Fabric 渲染，需在 metro 配置中启用 newArchEnabled。</div></div></li>
<li class="issue-item"><i class="fas fa-question-circle"></i><div><a href="#" class="issue-link">[RN] Hermes 在鸿蒙上性能表现？</a><div class="issue-desc">字节码预编译与内存优化已深度集成，性能接近 Android。</div></div></li>
<li class="issue-item"><i class="fas fa-question-circle"></i><div><a href="zh-cn/常见开发场景.md" class="issue-link">[RN] 三方库如 react-navigation 兼容性？</a><div class="issue-desc">大部分纯 JS 库可直接使用，涉及原生模块需桥接适配。</div></div></li>
</ul>
</div>
<div class="col">
<div class="community-header"><i class="fas fa-leaf"></i> RNOH 鸿蒙生态专项</div>
<ul class="issue-list">
<li class="issue-item"><i class="fas fa-exclamation-triangle"></i><div><a href="zh-cn/环境搭建.md" class="issue-link">[RNOH] 签名失败 / 无法安装到真机</a><div class="issue-desc">需配置 DevEco 签名，华为开发者账号授权，参照文档配置 signingConfigs。</div></div></li>
<li class="issue-item"><i class="fas fa-exclamation-triangle"></i><div><a href="zh-cn/版本升级指导.md" class="issue-link">[RNOH] 升级到 0.82 后部分模块 undefined</a><div class="issue-desc">检查 TurboModule 注册方式变更，使用 Codegen 重新生成绑定代码。</div></div></li>
<li class="issue-item"><i class="fas fa-exclamation-triangle"></i><div><a href="zh-cn/多屏适配指导.md" class="issue-link">[RNOH] 折叠屏适配最佳实践</a><div class="issue-desc">监听屏幕尺寸变化，使用 useWindowDimensions 动态布局，Modal 需启用分帧。</div></div></li>
</ul>
<div style="margin-top: 10px; text-align:right"><a href="zh-cn/FAQ.md" class="branch-link" style="background:#e9f0f5;">访问 RNOH 讨论区 <i class="fas fa-external-link-alt"></i></a></div>
</div>
</div>
</div>
<div class="card">
<div class="section-title"><i class="fas fa-brain"></i> 典型问题定位 · AI 辅助分析</div>
<div class="ai-note">
<i class="fas fa-robot" style="font-size: 1.6rem; color: #1e7b8c;"></i>
<div><strong>RNOH 语料已进入 Gemini、DeepSeek 等主流 AI 模型</strong><br>推荐使用 AI 工具（Copilot、通义灵码、DeepSeek Chat 等）结合日志与上下文快速定位问题。将错误堆栈 + RNOH 版本 + 设备型号提供给 AI，可获得根因分析与修复建议。</div>
</div>
<div class="analysis-grid">
<div class="analysis-card">
<div class="analysis-header"><i class="fas fa-shield-virus"></i> 稳定性问题分析</div>
<div class="ai-prompt">📌 定位能力指导：</div>
<div class="ai-response">
<strong>1. 收集崩溃日志</strong>：使用 DevEco Studio 获取 crash 日志或 tombstone。<br>
<strong>2. 分析堆栈</strong>：重点关注 libRNOH.so、libreact_nativemodule.so 等符号。<br>
<strong>3. 常见场景</strong>：线程未同步、NativeModule 生命周期错误、内存越界。<br>
<strong>4. AI 提示词模板</strong>：“RNOH 0.82 在鸿蒙折叠屏上打开 Modal 闪退，堆栈如下：…… 请分析可能原因。”<br>
<strong>5. 验证方案</strong>：隔离可疑模块，使用 AddressSanitizer 检测。
</div>
</div>
<div class="analysis-card">
<div class="analysis-header"><i class="fas fa-tachometer-alt"></i> 性能问题分析</div>
<div class="ai-prompt">📌 定位能力指导：</div>
<div class="ai-response">
<strong>1. 抓取性能数据</strong>：React DevTools Profiler + 鸿蒙 DevEco Profiler。<br>
<strong>2. 识别瓶颈</strong>：JS 线程阻塞、UI 线程掉帧、过度渲染。<br>
<strong>3. 优化手段</strong>：FlashList 替代 FlatList、避免匿名函数、启用 Hermes 并发 GC。<br>
<strong>4. AI 提示词模板</strong>：“RNOH 0.77 长列表滑动卡顿，JS 线程占用 80%，请给出优化策略。”<br>
<strong>5. 验证</strong>：对比优化前后帧率曲线。
</div>
</div>
<div class="analysis-card">
<div class="analysis-header"><i class="fas fa-hard-hat"></i> 工程类问题分析</div>
<div class="ai-prompt">📌 定位能力指导：</div>
<div class="ai-response">
<strong>1. 编译错误</strong>：检查 git submodule 是否更新、CMakeLists 依赖、RNOH 版本与 RN 核心版本对齐。<br>
<strong>2. 链接错误</strong>：确认 so 库是否完整打包，使用 readelf 检查符号。<br>
<strong>3. 运行时模块未找到</strong>：检查 TurboModule 注册与 Codegen 生成。<br>
<strong>4. AI 提示词模板</strong>：“RNOH 编译报错 undefined symbol: jsi::Value，环境 0.82，如何解决？”<br>
<strong>5. 复现与隔离</strong>：新建最小 demo 工程逐步添加模块定位。
</div>
</div>
</div>
<div class="more-link" style="margin-top: 1rem; text-align: right;"><i class="fas fa-robot"></i> 推荐工作流：粘贴错误堆栈 + 版本信息 + 设备型号 → AI 提供根因与补丁建议，提效 80%</div>
</div>
<div id="wechatModal" class="wechat-modal">
<div class="wechat-modal-content">
<h3><i class="fab fa-weixin"></i> 扫码加入 RN SIG</h3>
<p>扫描下方二维码，加入 React Native for OpenHarmony SIG 微信群</p>
<img src="Sig/contract/SigWX.png" alt="RN SIG 微信群二维码">
<p style="font-size: 0.8rem; color: #999;">二维码有效期：长期有效</p>
<button class="wechat-close" id="closeWechatModal">关闭</button>
</div>
</div>
<footer>
<i class="fab fa-github"></i> React Native for OpenHarmony · 开放原子开源基金会 SIG 共建 <br>
详细开发指南请访问 <strong>gitcode.com/openharmony-sig/ohos_react_native</strong> ｜ MIT Licensed
</footer>
</div>
<script>
const branchData = {
"0.72": {
name: "React Native 0.72 分支 (LTS)",
desc: "长期维护至 2027 年，稳定可靠。配套生态：react-navigation 6.x, mobx, redux-toolkit, async-storage 等主流库均经过验证。",
branches: {
commercial: "0.72-6.1-release",
development: "master"
},
versions: {
stable: "https://www.npmjs.com/package/@react-native-oh/react-native-harmony/v/0.72.119",
latest: "https://www.npmjs.com/package/@react-native-oh/react-native-harmony/v/0.72.128"
},
docs: "https://gitcode.com/OpenHarmony-RN/usage-docs"
},
"0.77": {
name: "React Native 0.77 稳定分支",
desc: "推荐生产使用，新架构性能提升显著。配套三方库：react-native-svg, react-native-webview, reanimated 3.x, MMKV 已适配。",
branches: {
commercial: "0.77-6.1-release",
development: "0.77.1-rc.1-ohos"
},
versions: {
stable: "https://www.npmjs.com/package/@react-native-oh/react-native-harmony/v/0.77.50",
latest: "https://www.npmjs.com/package/@react-native-oh/react-native-harmony/v/0.77.59"
},
docs: "https://gitcode.com/OpenHarmony-RN/usage-docs"
},
"0.82": {
name: "React Native 0.82 最新稳定版",
desc: "适配 HarmonyOS NEXT API 12，动态库懒加载，TurboModule 增强。生态完整：FlashList, gesture-handler 2.x, Hermes 深度优化。",
branches: {
commercial: "0.82-6.1-release",
development: "0.82"
},
versions: {
stable: null,
latest: "https://www.npmjs.com/package/@react-native-oh/react-native-harmony/v/0.82.18"
},
docs: "https://gitcode.com/OpenHarmony-RN/usage-docs"
},
"0.84": {
name: "React Native 0.84 构建中",
desc: "基于 RN 0.84 核心，实验性支持并发特性。三方库生态逐步适配中，欢迎贡献。",
branches: {
commercial: null,
development: null
},
versions: {
stable: null,
latest: null
},
docs: "https://gitcode.com/OpenHarmony-RN/usage-docs"
}
};
const branchDetailDiv = document.getElementById('branchDetail');
const branchNameSpan = document.getElementById('branchName');
const branchDescP = document.getElementById('branchDesc');
const closeBranchSpan = document.getElementById('closeBranch');
function showBranchDetail(branchKey) {
const data = branchData[branchKey];
if(data) {
branchNameSpan.innerText = data.name;
let descHtml = data.desc + '<br><br>';
if (data.branches) {
descHtml += '<strong>分支信息：</strong><br>';
if (data.branches.commercial) {
descHtml += `• 商用分支：${data.branches.commercial}<br>`;
}
if (data.branches.development) {
descHtml += `• 演进分支：${data.branches.development}<br>`;
}
}
if (data.versions) {
descHtml += '<br><strong>版本信息：</strong><br>';
if (data.versions.stable) {
descHtml += `• <a href="${data.versions.stable}" target="_blank" style="color:#1e7b8c">稳定版本</a><br>`;
} else {
descHtml += '• 稳定版本：暂无<br>';
}
if (data.versions.latest) {
descHtml += `• <a href="${data.versions.latest}" target="_blank" style="color:#1e7b8c">最新版本</a><br>`;
} else {
descHtml += '• 最新版本：暂无<br>';
}
}
if (data.docs) {
descHtml += `<br><a href="${data.docs}" target="_blank" style="color:#1e7b8c">查看三方库使用文档 →</a>`;
}
branchDescP.innerHTML = descHtml;
branchDetailDiv.style.display = 'block';
}
}
document.querySelectorAll('.branch-link').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
const branch = link.getAttribute('data-branch');
if(branch) showBranchDetail(branch);
});
});
if(closeBranchSpan) closeBranchSpan.addEventListener('click', () => branchDetailDiv.style.display = 'none');
document.getElementById('sigInviteBtn')?.addEventListener('click', (e) => {
e.preventDefault();
document.getElementById('wechatModal').style.display = 'flex';
});
document.getElementById('closeWechatModal')?.addEventListener('click', () => {
document.getElementById('wechatModal').style.display = 'none';
});
document.getElementById('wechatModal')?.addEventListener('click', (e) => {
if (e.target.id === 'wechatModal') {
document.getElementById('wechatModal').style.display = 'none';
}
});
document.querySelectorAll('.issue-link, .branch-link[href="#"]').forEach(ln => {
if(ln.getAttribute('href') === '#') ln.addEventListener('click', (e) => { e.preventDefault(); alert("详细解答请查阅 RNOH 官方 Wiki / 社区论坛。"); });
});
</script>
</body>
</html>