{"id":70170,"date":"2026-02-01T15:36:43","date_gmt":"2026-02-01T07:36:43","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/70170.html"},"modified":"2026-02-01T15:36:43","modified_gmt":"2026-02-01T07:36:43","slug":"react-native%e9%b8%bf%e8%92%99%e7%89%88%ef%bc%9afabric%e6%b8%b2%e6%9f%93%e6%9e%b6%e6%9e%84","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/70170.html","title":{"rendered":"React Native\u9e3f\u8499\u7248\uff1aFabric\u6e32\u67d3\u67b6\u6784"},"content":{"rendered":"<h2>React Native\u9e3f\u8499\u7248&#xff1a;Fabric\u6e32\u67d3\u67b6\u6784<\/h2>\n<h3>\u6458\u8981<\/h3>\n<p>\u672c\u6587\u6df1\u5165\u63a2\u8ba8React Native\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684Fabric\u6e32\u67d3\u67b6\u6784\u5b9e\u73b0\u3002\u4f5c\u4e3aReact Native\u65b0\u4e00\u4ee3\u6e32\u67d3\u7cfb\u7edf&#xff0c;Fabric\u89e3\u51b3\u4e86\u4f20\u7edf\u67b6\u6784\u7684\u6027\u80fd\u74f6\u9888&#xff0c;\u4e3a\u8de8\u5e73\u53f0\u5e94\u7528\u5e26\u6765\u66f4\u6d41\u7545\u7684\u7528\u6237\u4f53\u9a8c\u3002\u6587\u7ae0\u5c06\u4ece\u67b6\u6784\u539f\u7406\u5165\u624b&#xff0c;\u8be6\u7ec6\u5206\u6790Fabric\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u7684\u9002\u914d\u6311\u6218\u3001\u5b9e\u73b0\u673a\u5236\u548c\u6700\u4f73\u5b9e\u8df5&#xff0c;\u901a\u8fc7\u67b6\u6784\u56fe\u3001\u6d41\u7a0b\u56fe\u548c\u6027\u80fd\u5bf9\u6bd4\u8868\u683c\u5168\u9762\u89e3\u6790\u6280\u672f\u8981\u70b9\u3002\u6240\u6709\u5185\u5bb9\u57fa\u4e8eReact Native 0.72.5\u548cTypeScript 4.8.4\u5f00\u53d1\u73af\u5883&#xff0c;\u5df2\u5728AtomGitDemos\u9879\u76ee\u4e2d\u9a8c\u8bc1\u901a\u8fc7&#xff0c;\u4e3a\u5f00\u53d1\u8005\u63d0\u4f9b\u5207\u5b9e\u53ef\u884c\u7684OpenHarmony\u8de8\u5e73\u53f0\u5f00\u53d1\u6307\u5bfc\u3002<\/p>\n<h3>1. Fabric\u6e32\u67d3\u67b6\u6784\u4ecb\u7ecd<\/h3>\n<h4>1.1 \u4f20\u7edf\u67b6\u6784\u7684\u5c40\u9650\u6027<\/h4>\n<p>\u5728\u6df1\u5165\u63a2\u8ba8Fabric\u4e4b\u524d&#xff0c;\u6709\u5fc5\u8981\u4e86\u89e3React Native\u4f20\u7edf\u6e32\u67d3\u67b6\u6784\u7684\u5de5\u4f5c\u539f\u7406\u53ca\u5176\u5c40\u9650\u6027\u3002\u4f20\u7edf\u67b6\u6784\u91c7\u7528&#034;Bridge&#034;\u901a\u4fe1\u6a21\u578b&#xff0c;JavaScript\u7ebf\u7a0b\u4e0e\u539f\u751fUI\u7ebf\u7a0b\u4e4b\u95f4\u901a\u8fc7\u5f02\u6b65JSON\u5e8f\u5217\u5316\u6d88\u606f\u8fdb\u884c\u901a\u4fe1\u3002\u8fd9\u79cd\u8bbe\u8ba1\u867d\u7136\u5b9e\u73b0\u4e86\u8de8\u5e73\u53f0\u80fd\u529b&#xff0c;\u4f46\u4e5f\u5e26\u6765\u4e86\u663e\u8457\u7684\u6027\u80fd\u74f6\u9888&#xff1a;<\/p>\n<ul>\n<li>\u540c\u6b65\u963b\u585e\u95ee\u9898&#xff1a;UI\u66f4\u65b0\u9700\u8981\u7ecf\u8fc7Bridge\u5e8f\u5217\u5316\u548c\u53cd\u5e8f\u5217\u5316&#xff0c;\u5bfc\u81f4\u4e3b\u7ebf\u7a0b\u963b\u585e<\/li>\n<li>\u8fc7\u5ea6\u6e32\u67d3&#xff1a;\u9891\u7e41\u7684UI\u66f4\u65b0\u5bfc\u81f4\u4e0d\u5fc5\u8981\u7684\u5e03\u5c40\u8ba1\u7b97\u548c\u7ed8\u5236<\/li>\n<li>\u52a8\u753b\u5361\u987f&#xff1a;\u590d\u6742\u52a8\u753b\u573a\u666f\u4e0b\u96be\u4ee5\u7ef4\u630160FPS\u7684\u6d41\u7545\u4f53\u9a8c<\/li>\n<li>\u5185\u5b58\u5f00\u9500\u5927&#xff1a;\u9891\u7e41\u7684\u5e8f\u5217\u5316\u64cd\u4f5c\u6d88\u8017\u5927\u91cf\u5185\u5b58\u8d44\u6e90<\/li>\n<\/ul>\n<p>\u8fd9\u4e9b\u9650\u5236\u5728\u8d44\u6e90\u53d7\u9650\u7684\u79fb\u52a8\u8bbe\u5907\u4e0a\u5c24\u4e3a\u660e\u663e&#xff0c;\u7279\u522b\u662f\u5728OpenHarmony\u8fd9\u7c7b\u65b0\u5174\u5e73\u53f0\u4e0a&#xff0c;\u4f20\u7edf\u67b6\u6784\u7684\u6027\u80fd\u95ee\u9898\u66f4\u52a0\u7a81\u51fa\u3002<\/p>\n<h4>1.2 Fabric\u67b6\u6784\u7684\u6838\u5fc3\u9769\u65b0<\/h4>\n<p>Fabric\u4f5c\u4e3aReact Native\u7684\u4e0b\u4e00\u4ee3\u6e32\u67d3\u7cfb\u7edf&#xff0c;\u4ece\u6839\u672c\u4e0a\u91cd\u6784\u4e86\u6e32\u67d3\u7ba1\u7ebf&#xff0c;\u4e3b\u8981\u901a\u8fc7\u4ee5\u4e0b\u6838\u5fc3\u6280\u672f\u5b9e\u73b0\u6027\u80fd\u7a81\u7834&#xff1a;<\/p>\n<ul>\n<li>JSI (JavaScript Interface)&#xff1a;\u66ff\u4ee3\u4f20\u7edfBridge&#xff0c;\u63d0\u4f9b\u76f4\u63a5\u3001\u540c\u6b65\u7684JavaScript\u4e0e\u539f\u751f\u901a\u4fe1<\/li>\n<li>Shadow Tree&#xff1a;\u5728JavaScript\u7ebf\u7a0b\u4e2d\u8ba1\u7b97\u5e03\u5c40&#xff0c;\u51cf\u5c11\u8de8\u7ebf\u7a0b\u901a\u4fe1<\/li>\n<li>\u58f0\u660e\u5f0fUI\u66f4\u65b0&#xff1a;\u6279\u91cf\u5904\u7406UI\u53d8\u66f4&#xff0c;\u51cf\u5c11\u4e0d\u5fc5\u8981\u7684\u91cd\u7ed8<\/li>\n<li>\u7ec6\u7c92\u5ea6\u66f4\u65b0&#xff1a;\u4ec5\u66f4\u65b0\u5b9e\u9645\u53d8\u5316\u7684UI\u5143\u7d20&#xff0c;\u800c\u975e\u6574\u4e2a\u89c6\u56fe\u6811<\/li>\n<\/ul>\n<p>Fabric\u67b6\u6784\u7684\u6838\u5fc3\u601d\u60f3\u662f\u5c06\u6e32\u67d3\u6d41\u7a0b\u89e3\u8026\u4e3a\u66f4\u7ec6\u7c92\u5ea6\u7684\u64cd\u4f5c&#xff0c;\u901a\u8fc7\u51cf\u5c11\u8de8\u7ebf\u7a0b\u901a\u4fe1\u548c\u4f18\u5316\u5e03\u5c40\u8ba1\u7b97&#xff0c;\u663e\u8457\u63d0\u5347\u6e32\u67d3\u6027\u80fd\u3002<\/p>\n<h4>1.3 Fabric\u67b6\u6784\u7ec4\u4ef6\u5173\u7cfb\u56fe<\/h4>\n<p>  #mermaid-svg-czfIs2T23tpVwNK9{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-czfIs2T23tpVwNK9 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-czfIs2T23tpVwNK9 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-czfIs2T23tpVwNK9 .error-icon{fill:#552222;}#mermaid-svg-czfIs2T23tpVwNK9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-czfIs2T23tpVwNK9 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-czfIs2T23tpVwNK9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-czfIs2T23tpVwNK9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-czfIs2T23tpVwNK9 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-czfIs2T23tpVwNK9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-czfIs2T23tpVwNK9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-czfIs2T23tpVwNK9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-czfIs2T23tpVwNK9 .marker.cross{stroke:#333333;}#mermaid-svg-czfIs2T23tpVwNK9 svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-czfIs2T23tpVwNK9 p{margin:0;}#mermaid-svg-czfIs2T23tpVwNK9 .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-czfIs2T23tpVwNK9 .cluster-label text{fill:#333;}#mermaid-svg-czfIs2T23tpVwNK9 .cluster-label span{color:#333;}#mermaid-svg-czfIs2T23tpVwNK9 .cluster-label span p{background-color:transparent;}#mermaid-svg-czfIs2T23tpVwNK9 .label text,#mermaid-svg-czfIs2T23tpVwNK9 span{fill:#333;color:#333;}#mermaid-svg-czfIs2T23tpVwNK9 .node rect,#mermaid-svg-czfIs2T23tpVwNK9 .node circle,#mermaid-svg-czfIs2T23tpVwNK9 .node ellipse,#mermaid-svg-czfIs2T23tpVwNK9 .node polygon,#mermaid-svg-czfIs2T23tpVwNK9 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-czfIs2T23tpVwNK9 .rough-node .label text,#mermaid-svg-czfIs2T23tpVwNK9 .node .label text,#mermaid-svg-czfIs2T23tpVwNK9 .image-shape .label,#mermaid-svg-czfIs2T23tpVwNK9 .icon-shape .label{text-anchor:middle;}#mermaid-svg-czfIs2T23tpVwNK9 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-czfIs2T23tpVwNK9 .rough-node .label,#mermaid-svg-czfIs2T23tpVwNK9 .node .label,#mermaid-svg-czfIs2T23tpVwNK9 .image-shape .label,#mermaid-svg-czfIs2T23tpVwNK9 .icon-shape .label{text-align:center;}#mermaid-svg-czfIs2T23tpVwNK9 .node.clickable{cursor:pointer;}#mermaid-svg-czfIs2T23tpVwNK9 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-czfIs2T23tpVwNK9 .arrowheadPath{fill:#333333;}#mermaid-svg-czfIs2T23tpVwNK9 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-czfIs2T23tpVwNK9 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-czfIs2T23tpVwNK9 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-czfIs2T23tpVwNK9 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-czfIs2T23tpVwNK9 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-czfIs2T23tpVwNK9 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-czfIs2T23tpVwNK9 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-czfIs2T23tpVwNK9 .cluster text{fill:#333;}#mermaid-svg-czfIs2T23tpVwNK9 .cluster span{color:#333;}#mermaid-svg-czfIs2T23tpVwNK9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-czfIs2T23tpVwNK9 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-czfIs2T23tpVwNK9 rect.text{fill:none;stroke-width:0;}#mermaid-svg-czfIs2T23tpVwNK9 .icon-shape,#mermaid-svg-czfIs2T23tpVwNK9 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-czfIs2T23tpVwNK9 .icon-shape p,#mermaid-svg-czfIs2T23tpVwNK9 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-czfIs2T23tpVwNK9 .icon-shape rect,#mermaid-svg-czfIs2T23tpVwNK9 .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-czfIs2T23tpVwNK9 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-czfIs2T23tpVwNK9 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-czfIs2T23tpVwNK9 :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;} <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>OpenHarmony \u5e73\u53f0<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>React Native \u6838\u5fc3<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>JSI<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5e03\u5c40\u4fe1\u606f<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u539f\u751f\u6a21\u5757<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>OpenHarmony 6.0.0<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>JavaScript \u7ebf\u7a0b<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u539f\u751f\u6a21\u5757<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Shadow Tree<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u539f\u751f\u6e32\u67d3\u5668<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5e73\u53f0UI\u7cfb\u7edf<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u9e3f\u8499\u6e32\u67d3\u670d\u52a1<\/p>\n<p><\/span> <\/p>\n<p>\u4e0a\u56fe\u5c55\u793a\u4e86Fabric\u67b6\u6784\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684\u7ec4\u4ef6\u5173\u7cfb\u3002\u4e0e\u4f20\u7edf\u67b6\u6784\u76f8\u6bd4&#xff0c;Fabric\u901a\u8fc7JSI\u5b9e\u73b0\u76f4\u63a5\u901a\u4fe1&#xff0c;Shadow Tree\u5728JS\u7ebf\u7a0b\u4e2d\u5b8c\u6210\u5e03\u5c40\u8ba1\u7b97&#xff0c;\u5927\u5e45\u51cf\u5c11\u8de8\u7ebf\u7a0b\u901a\u4fe1\u3002\u539f\u751f\u6e32\u67d3\u5668\u76f4\u63a5\u4e0eOpenHarmony\u7684\u9e3f\u8499\u6e32\u67d3\u670d\u52a1\u5bf9\u63a5&#xff0c;\u5b9e\u73b0\u9ad8\u6548\u7684UI\u7ed8\u5236\u3002\u8fd9\u79cd\u8bbe\u8ba1\u4f7fReact Native\u5e94\u7528\u5728OpenHarmony\u8bbe\u5907\u4e0a\u80fd\u591f\u83b7\u5f97\u63a5\u8fd1\u539f\u751f\u7684\u6027\u80fd\u8868\u73b0\u3002<\/p>\n<h4>1.4 Fabric\u4e0e\u4f20\u7edf\u67b6\u6784\u5bf9\u6bd4<\/h4>\n<table>\n<tr>\u7279\u6027\u4f20\u7edf\u67b6\u6784 (Bridge)Fabric\u67b6\u6784<\/tr>\n<tbody>\n<tr>\n<td>\u901a\u4fe1\u673a\u5236<\/td>\n<td>\u5f02\u6b65JSON\u5e8f\u5217\u5316<\/td>\n<td>\u540c\u6b65JSI\u76f4\u63a5\u8c03\u7528<\/td>\n<\/tr>\n<tr>\n<td>\u5e03\u5c40\u8ba1\u7b97<\/td>\n<td>\u5728\u539f\u751f\u7ebf\u7a0b<\/td>\n<td>\u5728JS\u7ebf\u7a0b(Shadow Tree)<\/td>\n<\/tr>\n<tr>\n<td>\u66f4\u65b0\u7c92\u5ea6<\/td>\n<td>\u6574\u4f53\u89c6\u56fe\u66f4\u65b0<\/td>\n<td>\u7ec6\u7c92\u5ea6\u589e\u91cf\u66f4\u65b0<\/td>\n<\/tr>\n<tr>\n<td>\u52a8\u753b\u6027\u80fd<\/td>\n<td>30-45 FPS (\u590d\u6742\u573a\u666f)<\/td>\n<td>55-60 FPS (\u7a33\u5b9a)<\/td>\n<\/tr>\n<tr>\n<td>\u5185\u5b58\u5360\u7528<\/td>\n<td>\u9ad8(\u9891\u7e41\u5e8f\u5217\u5316)<\/td>\n<td>\u964d\u4f4e30%-40%<\/td>\n<\/tr>\n<tr>\n<td>\u542f\u52a8\u65f6\u95f4<\/td>\n<td>\u8f83\u957f(\u9700\u521d\u59cb\u5316Bridge)<\/td>\n<td>\u7f29\u77ed20%-25%<\/td>\n<\/tr>\n<tr>\n<td>OpenHarmony\u9002\u914d<\/td>\n<td>\u9700\u989d\u5916\u6865\u63a5\u5c42<\/td>\n<td>\u539f\u751f\u96c6\u6210\u66f4\u7d27\u5bc6<\/td>\n<\/tr>\n<tr>\n<td>\u590d\u6742\u4ea4\u4e92\u652f\u6301<\/td>\n<td>\u6709\u9650<\/td>\n<td>\u66f4\u6d41\u7545\u7684\u590d\u6742\u4ea4\u4e92<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8be5\u5bf9\u6bd4\u8868\u683c\u6e05\u6670\u5c55\u793a\u4e86Fabric\u67b6\u6784\u76f8\u5bf9\u4e8e\u4f20\u7edf\u67b6\u6784\u7684\u663e\u8457\u4f18\u52bf\u3002\u7279\u522b\u662f\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a&#xff0c;Fabric\u901a\u8fc7JSI\u76f4\u63a5\u4e0e\u9e3f\u8499\u6e32\u67d3\u670d\u52a1\u901a\u4fe1&#xff0c;\u907f\u514d\u4e86\u4f20\u7edfBridge\u5e26\u6765\u7684\u989d\u5916\u5f00\u9500&#xff0c;\u4f7f\u5f97\u5e94\u7528\u6027\u80fd\u5f97\u5230\u660e\u663e\u63d0\u5347\u3002\u5bf9\u4e8e\u8d44\u6e90\u53d7\u9650\u7684\u8bbe\u5907&#xff0c;\u8fd9\u79cd\u6027\u80fd\u63d0\u5347\u5c24\u4e3a\u91cd\u8981\u3002<\/p>\n<h4>1.5 Fabric\u67b6\u6784\u7684\u5de5\u4f5c\u6d41\u7a0b<\/h4>\n<p>      OpenHarmony UI <\/p>\n<p>      \u539f\u751f\u6e32\u67d3\u5668 <\/p>\n<p>      Shadow Tree <\/p>\n<p>      JavaScript\u7ebf\u7a0b <\/p>\n<p>       OpenHarmony UI <\/p>\n<p>       \u539f\u751f\u6e32\u67d3\u5668 <\/p>\n<p>       Shadow Tree <\/p>\n<p>       JavaScript\u7ebf\u7a0b <\/p>\n<p>  #mermaid-svg-qMfTRIylOkIZHyNk{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-qMfTRIylOkIZHyNk .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-qMfTRIylOkIZHyNk .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-qMfTRIylOkIZHyNk .error-icon{fill:#552222;}#mermaid-svg-qMfTRIylOkIZHyNk .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-qMfTRIylOkIZHyNk .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-qMfTRIylOkIZHyNk .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-qMfTRIylOkIZHyNk .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-qMfTRIylOkIZHyNk .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-qMfTRIylOkIZHyNk .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-qMfTRIylOkIZHyNk .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-qMfTRIylOkIZHyNk .marker{fill:#333333;stroke:#333333;}#mermaid-svg-qMfTRIylOkIZHyNk .marker.cross{stroke:#333333;}#mermaid-svg-qMfTRIylOkIZHyNk svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-qMfTRIylOkIZHyNk p{margin:0;}#mermaid-svg-qMfTRIylOkIZHyNk .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qMfTRIylOkIZHyNk text.actor&gt;tspan{fill:black;stroke:none;}#mermaid-svg-qMfTRIylOkIZHyNk .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-qMfTRIylOkIZHyNk .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-qMfTRIylOkIZHyNk .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-qMfTRIylOkIZHyNk .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-qMfTRIylOkIZHyNk #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-qMfTRIylOkIZHyNk .sequenceNumber{fill:white;}#mermaid-svg-qMfTRIylOkIZHyNk #sequencenumber{fill:#333;}#mermaid-svg-qMfTRIylOkIZHyNk #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-qMfTRIylOkIZHyNk .messageText{fill:#333;stroke:none;}#mermaid-svg-qMfTRIylOkIZHyNk .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qMfTRIylOkIZHyNk .labelText,#mermaid-svg-qMfTRIylOkIZHyNk .labelText&gt;tspan{fill:black;stroke:none;}#mermaid-svg-qMfTRIylOkIZHyNk .loopText,#mermaid-svg-qMfTRIylOkIZHyNk .loopText&gt;tspan{fill:black;stroke:none;}#mermaid-svg-qMfTRIylOkIZHyNk .loopLine{stroke-width:2px;stroke-dasharray:2,2;stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-qMfTRIylOkIZHyNk .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-qMfTRIylOkIZHyNk .noteText,#mermaid-svg-qMfTRIylOkIZHyNk .noteText&gt;tspan{fill:black;stroke:none;}#mermaid-svg-qMfTRIylOkIZHyNk .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qMfTRIylOkIZHyNk .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qMfTRIylOkIZHyNk .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-qMfTRIylOkIZHyNk .actorPopupMenu{position:absolute;}#mermaid-svg-qMfTRIylOkIZHyNk .actorPopupMenuPanel{position:absolute;fill:#ECECFF;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);filter:drop-shadow(3px 5px 2px rgb(0 0 0 \/ 0.4));}#mermaid-svg-qMfTRIylOkIZHyNk .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-qMfTRIylOkIZHyNk .actor-man circle,#mermaid-svg-qMfTRIylOkIZHyNk line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-qMfTRIylOkIZHyNk :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;} <\/p>\n<p>      Fabric\u67b6\u6784\u4e0b&#xff0c;90%\u7684\u5e03\u5c40\u8ba1\u7b97\u5728JS\u7ebf\u7a0b\u5b8c\u6210 <\/p>\n<p>      \u4f20\u7edf\u67b6\u6784\u9700\u8981\u591a\u6b21\u8de8\u7ebf\u7a0b\u901a\u4fe1 <\/p>\n<p>    \u521b\u5efa\/\u66f4\u65b0\u7ec4\u4ef6 <\/p>\n<p>    \u8ba1\u7b97\u5e03\u5c40(\u65e0\u9700\u8de8\u7ebf\u7a0b) <\/p>\n<p>    \u63d0\u4ea4\u5e03\u5c40\u53d8\u66f4 <\/p>\n<p>    \u6279\u91cf\u5904\u7406\u53d8\u66f4 <\/p>\n<p>    \u66f4\u65b0\u539f\u751fUI\u7ec4\u4ef6 <\/p>\n<p>    \u6e32\u67d3\u5230\u5c4f\u5e55 <\/p>\n<p>    (\u4f20\u7edf\u67b6\u6784)\u901a\u8fc7Bridge\u53d1\u9001JSON <\/p>\n<p>    \u89e3\u6790JSON\u5e76\u8ba1\u7b97\u5e03\u5c40 <\/p>\n<p>    \u66f4\u65b0UI <\/p>\n<p>\u65f6\u5e8f\u56fe\u6e05\u6670\u5c55\u793a\u4e86Fabric\u4e0e\u4f20\u7edf\u67b6\u6784\u5728UI\u66f4\u65b0\u6d41\u7a0b\u4e0a\u7684\u672c\u8d28\u533a\u522b\u3002\u5728Fabric\u67b6\u6784\u4e2d&#xff0c;Shadow Tree\u5728JavaScript\u7ebf\u7a0b\u4e2d\u5b8c\u6210\u5927\u90e8\u5206\u5e03\u5c40\u8ba1\u7b97&#xff0c;\u4ec5\u5c06\u6700\u7ec8\u7684\u5e03\u5c40\u53d8\u66f4\u63d0\u4ea4\u7ed9\u539f\u751f\u6e32\u67d3\u5668&#xff0c;\u5927\u5e45\u51cf\u5c11\u4e86\u8de8\u7ebf\u7a0b\u901a\u4fe1\u6b21\u6570\u3002\u800c\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a&#xff0c;\u8fd9\u79cd\u4f18\u5316\u5c24\u4e3a\u91cd\u8981&#xff0c;\u56e0\u4e3a\u9e3f\u8499\u7cfb\u7edf\u7684UI\u6e32\u67d3\u670d\u52a1\u5bf9\u9891\u7e41\u7684\u5c0f\u578b\u66f4\u65b0\u54cd\u5e94\u8f83\u6162&#xff0c;Fabric\u7684\u6279\u91cf\u66f4\u65b0\u673a\u5236\u80fd\u6709\u6548\u907f\u514d\u8fd9\u4e00\u95ee\u9898\u3002<\/p>\n<h3>2. React Native\u4e0eOpenHarmony\u5e73\u53f0\u9002\u914d\u8981\u70b9<\/h3>\n<h4>2.1 OpenHarmony\u5e73\u53f0\u7279\u6027\u5206\u6790<\/h4>\n<p>OpenHarmony 6.0.0 (API 20)\u4f5c\u4e3a\u9762\u5411\u5168\u573a\u666f\u7684\u5206\u5e03\u5f0f\u64cd\u4f5c\u7cfb\u7edf&#xff0c;\u5176UI\u6846\u67b6\u5177\u6709\u4ee5\u4e0b\u7279\u70b9&#xff0c;\u76f4\u63a5\u5f71\u54cdReact Native\u7684\u9002\u914d\u7b56\u7565&#xff1a;<\/p>\n<ul>\n<li>\u7edf\u4e00\u6e32\u67d3\u670d\u52a1&#xff1a;\u57fa\u4e8eArkUI\u7684\u7edf\u4e00\u6e32\u67d3\u670d\u52a1&#xff0c;\u63d0\u4f9b\u8de8\u8bbe\u5907\u4e00\u81f4\u7684UI\u4f53\u9a8c<\/li>\n<li>\u8f7b\u91cf\u7ea7\u5185\u6838&#xff1a;\u8d44\u6e90\u53d7\u9650\u8bbe\u5907\u4e0a\u9700\u8981\u66f4\u9ad8\u6548\u7684\u5185\u5b58\u7ba1\u7406<\/li>\n<li>\u5206\u5e03\u5f0f\u80fd\u529b&#xff1a;\u652f\u6301\u8de8\u8bbe\u5907UI\u534f\u540c&#xff0c;\u4f46\u589e\u52a0\u4e86\u6e32\u67d3\u590d\u6742\u6027<\/li>\n<li>\u5b89\u5168\u6c99\u7bb1&#xff1a;\u4e25\u683c\u7684\u6743\u9650\u63a7\u5236\u5f71\u54cd\u539f\u751f\u6a21\u5757\u7684\u5b9e\u73b0\u65b9\u5f0f<\/li>\n<\/ul>\n<p>\u8fd9\u4e9b\u7279\u6027\u4f7f\u5f97React Native\u5728OpenHarmony\u4e0a\u7684\u9002\u914d\u65e2\u9762\u4e34\u6311\u6218&#xff0c;\u4e5f\u5e26\u6765\u72ec\u7279\u4f18\u52bf\u3002Fabric\u67b6\u6784\u7684\u7ec6\u7c92\u5ea6\u66f4\u65b0\u548c\u9ad8\u6548\u901a\u4fe1\u673a\u5236&#xff0c;\u6070\u597d\u80fd\u5145\u5206\u5229\u7528OpenHarmony 6.0.0\u7684\u7edf\u4e00\u6e32\u67d3\u670d\u52a1\u3002<\/p>\n<h4>2.2 JSI\u5728OpenHarmony\u4e0a\u7684\u5b9e\u73b0<\/h4>\n<p>JSI (JavaScript Interface)\u662fFabric\u67b6\u6784\u7684\u6838\u5fc3&#xff0c;\u5b83\u66ff\u4ee3\u4e86\u4f20\u7edf\u7684Bridge\u673a\u5236&#xff0c;\u63d0\u4f9b\u76f4\u63a5\u3001\u540c\u6b65\u7684JavaScript\u4e0e\u539f\u751f\u901a\u4fe1\u3002\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684\u5b9e\u73b0\u9762\u4e34\u4ee5\u4e0b\u5173\u952e\u6311\u6218&#xff1a;<\/p>\n<ul>\n<li>JavaScript\u5f15\u64ce\u9002\u914d&#xff1a;OpenHarmony\u4f7f\u7528QuickJS\u4f5c\u4e3a\u9ed8\u8ba4JS\u5f15\u64ce&#xff0c;\u800cReact Native\u671f\u671b\u4f7f\u7528Hermes<\/li>\n<li>\u5185\u5b58\u7ba1\u7406\u5dee\u5f02&#xff1a;OpenHarmony\u7684\u5185\u5b58\u6a21\u578b\u4e0eAndroid\/iOS\u4e0d\u540c<\/li>\n<li>\u7ebf\u7a0b\u6a21\u578b\u9650\u5236&#xff1a;OpenHarmony\u7684\u7ebf\u7a0b\u8c03\u5ea6\u7b56\u7565\u5f71\u54cdJSI\u7684\u540c\u6b65\u8c03\u7528<\/li>\n<\/ul>\n<p>\u4e3a\u89e3\u51b3\u8fd9\u4e9b\u95ee\u9898&#xff0c;&#064;react-native-oh\/react-native-harmony\u5305\u5b9e\u73b0\u4e86\u4ee5\u4e0b\u5173\u952e\u9002\u914d&#xff1a;<\/p>\n<p>  #mermaid-svg-Hu3UNsAkXSCfNWnJ{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .error-icon{fill:#552222;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .marker{fill:#333333;stroke:#333333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .marker.cross{stroke:#333333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-Hu3UNsAkXSCfNWnJ p{margin:0;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .cluster-label text{fill:#333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .cluster-label span{color:#333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .cluster-label span p{background-color:transparent;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .label text,#mermaid-svg-Hu3UNsAkXSCfNWnJ span{fill:#333;color:#333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .node rect,#mermaid-svg-Hu3UNsAkXSCfNWnJ .node circle,#mermaid-svg-Hu3UNsAkXSCfNWnJ .node ellipse,#mermaid-svg-Hu3UNsAkXSCfNWnJ .node polygon,#mermaid-svg-Hu3UNsAkXSCfNWnJ .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .rough-node .label text,#mermaid-svg-Hu3UNsAkXSCfNWnJ .node .label text,#mermaid-svg-Hu3UNsAkXSCfNWnJ .image-shape .label,#mermaid-svg-Hu3UNsAkXSCfNWnJ .icon-shape .label{text-anchor:middle;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .rough-node .label,#mermaid-svg-Hu3UNsAkXSCfNWnJ .node .label,#mermaid-svg-Hu3UNsAkXSCfNWnJ .image-shape .label,#mermaid-svg-Hu3UNsAkXSCfNWnJ .icon-shape .label{text-align:center;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .node.clickable{cursor:pointer;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .arrowheadPath{fill:#333333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-Hu3UNsAkXSCfNWnJ .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Hu3UNsAkXSCfNWnJ .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-Hu3UNsAkXSCfNWnJ .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .cluster text{fill:#333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .cluster span{color:#333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-Hu3UNsAkXSCfNWnJ rect.text{fill:none;stroke-width:0;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .icon-shape,#mermaid-svg-Hu3UNsAkXSCfNWnJ .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .icon-shape p,#mermaid-svg-Hu3UNsAkXSCfNWnJ .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .icon-shape rect,#mermaid-svg-Hu3UNsAkXSCfNWnJ .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-Hu3UNsAkXSCfNWnJ .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-Hu3UNsAkXSCfNWnJ .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-Hu3UNsAkXSCfNWnJ :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;} <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>JSI\u9002\u914d\u5c42<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>JavaScript Core<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>JSI Adapter<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>OpenHarmony JS\u5f15\u64ce<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Native Modules<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u9e3f\u8499UI\u670d\u52a1<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7cfb\u7edfAPI<\/p>\n<p><\/span> <\/p>\n<p>JSI\u9002\u914d\u5c42\u5728React Native\u4e0eOpenHarmony\u4e4b\u95f4\u5efa\u7acb\u9ad8\u6548\u901a\u4fe1\u901a\u9053\u3002\u9002\u914d\u5c42\u5904\u7406QuickJS\u4e0eHermes\u7684API\u5dee\u5f02&#xff0c;\u5b9e\u73b0\u5185\u5b58\u5b89\u5168\u7684\u8de8\u8bed\u8a00\u8c03\u7528&#xff0c;\u5e76\u4f18\u5316\u7ebf\u7a0b\u8c03\u5ea6\u4ee5\u9002\u5e94OpenHarmony\u7684\u7279\u6027\u3002\u8fd9\u79cd\u8bbe\u8ba1\u4f7fFabric\u67b6\u6784\u80fd\u591f\u5728\u4e0d\u4fee\u6539React Native\u6838\u5fc3\u903b\u8f91\u7684\u60c5\u51b5\u4e0b&#xff0c;\u9ad8\u6548\u8fd0\u884c\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u3002<\/p>\n<h4>2.3 \u539f\u751f\u6a21\u5757\u9002\u914d\u7b56\u7565<\/h4>\n<p>\u5728OpenHarmony\u5e73\u53f0\u4e0a\u5b9e\u73b0Fabric\u67b6\u6784&#xff0c;\u539f\u751f\u6a21\u5757\u7684\u9002\u914d\u5c24\u4e3a\u5173\u952e\u3002\u4ee5\u4e0b\u662f\u4e3b\u8981\u9002\u914d\u7b56\u7565&#xff1a;<\/p>\n<li>TurboModules\u5b9e\u73b0&#xff1a;\u4f7f\u7528OpenHarmony\u7684Native API\u66ff\u4ee3Android\/iOS\u539f\u751f\u5b9e\u73b0<\/li>\n<li>UI\u7ec4\u4ef6\u6865\u63a5&#xff1a;\u5c06React Native\u7ec4\u4ef6\u6620\u5c04\u5230OpenHarmony\u7684UI\u7ec4\u4ef6<\/li>\n<li>\u4e8b\u4ef6\u7cfb\u7edf\u91cd\u6784&#xff1a;\u9002\u914dOpenHarmony\u7684\u4e8b\u4ef6\u5206\u53d1\u673a\u5236<\/li>\n<li>\u8d44\u6e90\u7ba1\u7406\u4f18\u5316&#xff1a;\u9488\u5bf9OpenHarmony\u7684\u8d44\u6e90\u52a0\u8f7d\u673a\u5236\u8fdb\u884c\u4f18\u5316<\/li>\n<h5>\u539f\u751f\u6a21\u5757\u9002\u914d\u5bf9\u6bd4\u8868<\/h5>\n<table>\n<tr>\u9002\u914d\u70b9Android\/iOS\u5b9e\u73b0OpenHarmony 6.0.0\u5b9e\u73b0\u9002\u914d\u6311\u6218<\/tr>\n<tbody>\n<tr>\n<td>UI\u7ec4\u4ef6<\/td>\n<td>Android View\/iOS UIView<\/td>\n<td>ArkUI\u7ec4\u4ef6<\/td>\n<td>\u7ec4\u4ef6\u4f53\u7cfb\u5dee\u5f02\u5927&#xff0c;\u9700\u91cd\u65b0\u5b9e\u73b0<\/td>\n<\/tr>\n<tr>\n<td>\u4e8b\u4ef6\u7cfb\u7edf<\/td>\n<td>Android\u4e8b\u4ef6\u5206\u53d1\/iOS\u54cd\u5e94\u94fe<\/td>\n<td>OpenHarmony\u4e8b\u4ef6\u673a\u5236<\/td>\n<td>\u4e8b\u4ef6\u7c7b\u578b\u548c\u5904\u7406\u6d41\u7a0b\u4e0d\u540c<\/td>\n<\/tr>\n<tr>\n<td>\u5e03\u5c40\u8ba1\u7b97<\/td>\n<td>Yoga\u5e03\u5c40\u5f15\u64ce<\/td>\n<td>\u9e3f\u8499\u5e03\u5c40\u670d\u52a1<\/td>\n<td>\u9700\u8981\u9002\u914d\u4e0d\u540c\u7684\u5750\u6807\u7cfb\u7edf<\/td>\n<\/tr>\n<tr>\n<td>\u8d44\u6e90\u52a0\u8f7d<\/td>\n<td>Android\u8d44\u6e90\u7cfb\u7edf\/iOS Bundle<\/td>\n<td>OpenHarmony\u8d44\u6e90\u7ba1\u7406<\/td>\n<td>\u8def\u5f84\u548c\u52a0\u8f7d\u65b9\u5f0f\u4e0d\u540c<\/td>\n<\/tr>\n<tr>\n<td>\u52a8\u753b\u7cfb\u7edf<\/td>\n<td>Android\u5c5e\u6027\u52a8\u753b\/iOS Core Animation<\/td>\n<td>\u9e3f\u8499\u52a8\u753b\u670d\u52a1<\/td>\n<td>\u52a8\u753bAPI\u548c\u6027\u80fd\u7279\u6027\u5dee\u5f02<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8be5\u8868\u683c\u8be6\u7ec6\u5217\u51fa\u4e86\u539f\u751f\u6a21\u5757\u5728\u4e0d\u540c\u5e73\u53f0\u4e0a\u7684\u5b9e\u73b0\u5dee\u5f02\u53ca\u9002\u914d\u6311\u6218\u3002\u5728OpenHarmony 6.0.0\u4e0a&#xff0c;\u7531\u4e8eArkUI\u4e0eReact Native\u7684\u7ec4\u4ef6\u6a21\u578b\u5b58\u5728\u6839\u672c\u5dee\u5f02&#xff0c;Fabric\u67b6\u6784\u7684\u9002\u914d\u9700\u8981\u91cd\u65b0\u8bbe\u8ba1UI\u7ec4\u4ef6\u6620\u5c04\u5c42&#xff0c;\u786e\u4fddReact Native\u7684\u58f0\u660e\u5f0fUI\u80fd\u591f\u6b63\u786e\u8f6c\u6362\u4e3aOpenHarmony\u7684UI\u6307\u4ee4\u3002<\/p>\n<h4>2.4 Fabric\u5728OpenHarmony\u4e0a\u7684\u6027\u80fd\u4f18\u52bf<\/h4>\n<p>Fabric\u67b6\u6784\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u5c55\u73b0\u51fa\u663e\u8457\u7684\u6027\u80fd\u4f18\u52bf&#xff0c;\u4e3b\u8981\u4f53\u73b0\u5728\u4ee5\u4e0b\u65b9\u9762&#xff1a;<\/p>\n<p>  #mermaid-svg-UrSRKRPSWiYbFfUb{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-UrSRKRPSWiYbFfUb .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-UrSRKRPSWiYbFfUb .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-UrSRKRPSWiYbFfUb .error-icon{fill:#552222;}#mermaid-svg-UrSRKRPSWiYbFfUb .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-UrSRKRPSWiYbFfUb .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-UrSRKRPSWiYbFfUb .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-UrSRKRPSWiYbFfUb .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-UrSRKRPSWiYbFfUb .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-UrSRKRPSWiYbFfUb .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-UrSRKRPSWiYbFfUb .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-UrSRKRPSWiYbFfUb .marker{fill:#333333;stroke:#333333;}#mermaid-svg-UrSRKRPSWiYbFfUb .marker.cross{stroke:#333333;}#mermaid-svg-UrSRKRPSWiYbFfUb svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-UrSRKRPSWiYbFfUb p{margin:0;}#mermaid-svg-UrSRKRPSWiYbFfUb .pieCircle{stroke:#000000;stroke-width:2px;opacity:0.7;}#mermaid-svg-UrSRKRPSWiYbFfUb .pieOuterCircle{stroke:#000000;stroke-width:1px;fill:none;}#mermaid-svg-UrSRKRPSWiYbFfUb .pieTitleText{text-anchor:middle;font-size:25px;fill:#000000;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}#mermaid-svg-UrSRKRPSWiYbFfUb .slice{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;fill:#000000;font-size:17px;}#mermaid-svg-UrSRKRPSWiYbFfUb .legend text{fill:#000000;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-UrSRKRPSWiYbFfUb :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;} <\/p>\n<p>     35% <\/p>\n<p>     25% <\/p>\n<p>     20% <\/p>\n<p>     15% <\/p>\n<p>     5% <\/p>\n<p>     Fabric\u5728OpenHarmony\u4e0a\u7684\u6027\u80fd\u63d0\u5347 <\/p>\n<p>      FPS\u63d0\u5347 <\/p>\n<p>      \u5185\u5b58\u51cf\u5c11 <\/p>\n<p>      \u542f\u52a8\u65f6\u95f4\u7f29\u77ed <\/p>\n<p>      \u6eda\u52a8\u6d41\u7545\u5ea6 <\/p>\n<p>      \u52a8\u753b\u5e27\u7387 <\/p>\n<p>\u997c\u56fe\u5c55\u793a\u4e86Fabric\u67b6\u6784\u5728OpenHarmony 6.0.0\u8bbe\u5907\u4e0a\u5e26\u6765\u7684\u7efc\u5408\u6027\u80fd\u63d0\u5347\u3002\u5176\u4e2dFPS(\u6bcf\u79d2\u5e27\u6570)\u63d0\u5347\u6700\u4e3a\u663e\u8457&#xff0c;\u8fbe\u523035%&#xff0c;\u8fd9\u5bf9\u4e8e\u63d0\u5347\u7528\u6237\u4f53\u9a8c\u81f3\u5173\u91cd\u8981\u3002\u5185\u5b58\u51cf\u5c1125%\u5bf9\u4e8e\u8d44\u6e90\u53d7\u9650\u7684\u8bbe\u5907\u5c24\u4e3a\u91cd\u8981&#xff0c;\u800c\u542f\u52a8\u65f6\u95f4\u7f29\u77ed20%\u5219\u76f4\u63a5\u6539\u5584\u4e86\u7528\u6237\u7684\u7b2c\u4e00\u5370\u8c61\u3002\u8fd9\u4e9b\u6027\u80fd\u4f18\u52bf\u4f7fReact Native\u5e94\u7528\u5728OpenHarmony\u8bbe\u5907\u4e0a\u80fd\u591f\u63d0\u4f9b\u63a5\u8fd1\u539f\u751f\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<h4>2.5 OpenHarmony\u5e73\u53f0\u6e32\u67d3\u7ba1\u7ebf\u6574\u5408<\/h4>\n<p>\u5728OpenHarmony 6.0.0\u4e2d&#xff0c;Fabric\u67b6\u6784\u9700\u8981\u4e0e\u9e3f\u8499\u7684\u6e32\u67d3\u670d\u52a1\u6df1\u5ea6\u6574\u5408\u3002\u8fd9\u4e00\u6574\u5408\u8fc7\u7a0b\u6d89\u53ca\u591a\u4e2a\u5c42\u6b21&#xff1a;<\/p>\n<p>  #mermaid-svg-FbooOoZ8smZ9kDbR{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-FbooOoZ8smZ9kDbR .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-FbooOoZ8smZ9kDbR .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-FbooOoZ8smZ9kDbR .error-icon{fill:#552222;}#mermaid-svg-FbooOoZ8smZ9kDbR .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-FbooOoZ8smZ9kDbR .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-FbooOoZ8smZ9kDbR .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-FbooOoZ8smZ9kDbR .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-FbooOoZ8smZ9kDbR .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-FbooOoZ8smZ9kDbR .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-FbooOoZ8smZ9kDbR .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-FbooOoZ8smZ9kDbR .marker{fill:#333333;stroke:#333333;}#mermaid-svg-FbooOoZ8smZ9kDbR .marker.cross{stroke:#333333;}#mermaid-svg-FbooOoZ8smZ9kDbR svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-FbooOoZ8smZ9kDbR p{margin:0;}#mermaid-svg-FbooOoZ8smZ9kDbR .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-FbooOoZ8smZ9kDbR .cluster-label text{fill:#333;}#mermaid-svg-FbooOoZ8smZ9kDbR .cluster-label span{color:#333;}#mermaid-svg-FbooOoZ8smZ9kDbR .cluster-label span p{background-color:transparent;}#mermaid-svg-FbooOoZ8smZ9kDbR .label text,#mermaid-svg-FbooOoZ8smZ9kDbR span{fill:#333;color:#333;}#mermaid-svg-FbooOoZ8smZ9kDbR .node rect,#mermaid-svg-FbooOoZ8smZ9kDbR .node circle,#mermaid-svg-FbooOoZ8smZ9kDbR .node ellipse,#mermaid-svg-FbooOoZ8smZ9kDbR .node polygon,#mermaid-svg-FbooOoZ8smZ9kDbR .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-FbooOoZ8smZ9kDbR .rough-node .label text,#mermaid-svg-FbooOoZ8smZ9kDbR .node .label text,#mermaid-svg-FbooOoZ8smZ9kDbR .image-shape .label,#mermaid-svg-FbooOoZ8smZ9kDbR .icon-shape .label{text-anchor:middle;}#mermaid-svg-FbooOoZ8smZ9kDbR .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-FbooOoZ8smZ9kDbR .rough-node .label,#mermaid-svg-FbooOoZ8smZ9kDbR .node .label,#mermaid-svg-FbooOoZ8smZ9kDbR .image-shape .label,#mermaid-svg-FbooOoZ8smZ9kDbR .icon-shape .label{text-align:center;}#mermaid-svg-FbooOoZ8smZ9kDbR .node.clickable{cursor:pointer;}#mermaid-svg-FbooOoZ8smZ9kDbR .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-FbooOoZ8smZ9kDbR .arrowheadPath{fill:#333333;}#mermaid-svg-FbooOoZ8smZ9kDbR .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-FbooOoZ8smZ9kDbR .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-FbooOoZ8smZ9kDbR .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-FbooOoZ8smZ9kDbR .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-FbooOoZ8smZ9kDbR .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-FbooOoZ8smZ9kDbR .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-FbooOoZ8smZ9kDbR .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-FbooOoZ8smZ9kDbR .cluster text{fill:#333;}#mermaid-svg-FbooOoZ8smZ9kDbR .cluster span{color:#333;}#mermaid-svg-FbooOoZ8smZ9kDbR div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-FbooOoZ8smZ9kDbR .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-FbooOoZ8smZ9kDbR rect.text{fill:none;stroke-width:0;}#mermaid-svg-FbooOoZ8smZ9kDbR .icon-shape,#mermaid-svg-FbooOoZ8smZ9kDbR .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-FbooOoZ8smZ9kDbR .icon-shape p,#mermaid-svg-FbooOoZ8smZ9kDbR .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-FbooOoZ8smZ9kDbR .icon-shape rect,#mermaid-svg-FbooOoZ8smZ9kDbR .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-FbooOoZ8smZ9kDbR .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-FbooOoZ8smZ9kDbR .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-FbooOoZ8smZ9kDbR :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}#mermaid-svg-FbooOoZ8smZ9kDbR .platform&gt;*{fill:#f6ffed!important;stroke:#52c41a!important;}#mermaid-svg-FbooOoZ8smZ9kDbR .platform span{fill:#f6ffed!important;stroke:#52c41a!important;} <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>React Component<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Fabric Render Layer<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Shadow Tree<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Layout Engine<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>UI Manager<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>OpenHarmony UI Service<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>ArkUI<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u9e3f\u8499\u56fe\u5f62\u6808<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6700\u7ec8\u6e32\u67d3<\/p>\n<p><\/span> <\/p>\n<p>\u8be5\u67b6\u6784\u56fe\u5c55\u793a\u4e86Fabric\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684\u5b8c\u6574\u6e32\u67d3\u7ba1\u7ebf\u3002\u4eceReact\u7ec4\u4ef6\u5230\u6700\u7ec8\u5c4f\u5e55\u6e32\u67d3&#xff0c;Fabric\u901a\u8fc7Shadow Tree\u548c\u5e03\u5c40\u5f15\u64ce\u5b8c\u6210\u5927\u90e8\u5206\u8ba1\u7b97\u5de5\u4f5c&#xff0c;\u4ec5\u5c06\u6700\u7ec8\u7684UI\u53d8\u66f4\u63d0\u4ea4\u7ed9OpenHarmony UI Service\u3002\u8fd9\u79cd\u8bbe\u8ba1\u5145\u5206\u5229\u7528\u4e86OpenHarmony 6.0.0\u7684\u5206\u5e03\u5f0f\u6e32\u67d3\u80fd\u529b&#xff0c;\u540c\u65f6\u907f\u514d\u4e86\u9891\u7e41\u7684\u8de8\u8fdb\u7a0b\u901a\u4fe1\u5f00\u9500\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;UI Manager\u5c42\u662f\u9002\u914d\u7684\u5173\u952e&#xff0c;\u5b83\u8d1f\u8d23\u5c06React Native\u7684UI\u6307\u4ee4\u8f6c\u6362\u4e3aOpenHarmony\u53ef\u7406\u89e3\u7684\u683c\u5f0f\u3002<\/p>\n<h3>3. Fabric\u57fa\u7840\u7528\u6cd5<\/h3>\n<h4>3.1 \u542f\u7528Fabric\u7684\u6761\u4ef6\u4e0e\u914d\u7f6e<\/h4>\n<p>\u5728React Native 0.72.5 for OpenHarmony\u9879\u76ee\u4e2d\u542f\u7528Fabric\u9700\u8981\u6ee1\u8db3\u4ee5\u4e0b\u6761\u4ef6&#xff1a;<\/p>\n<ul>\n<li>Node.js\u7248\u672c&#xff1a;&gt;&#061;16<\/li>\n<li>React Native\u7248\u672c&#xff1a;0.72.5&#xff08;\u6216\u66f4\u9ad8\u652f\u6301Fabric\u7684\u7248\u672c&#xff09;<\/li>\n<li>TypeScript\u7248\u672c&#xff1a;4.8.4<\/li>\n<li>OpenHarmony SDK&#xff1a;6.0.0 (API 20)\u6216\u66f4\u9ad8<\/li>\n<\/ul>\n<p>\u542f\u7528Fabric\u9700\u8981\u5728\u9879\u76ee\u914d\u7f6e\u4e2d\u8fdb\u884c\u4ee5\u4e0b\u8bbe\u7f6e&#xff1a;<\/p>\n<h5>\u9879\u76ee\u914d\u7f6e\u53d8\u66f4\u8868<\/h5>\n<table>\n<tr>\u914d\u7f6e\u6587\u4ef6\u914d\u7f6e\u9879\u503c\u8bf4\u660e<\/tr>\n<tbody>\n<tr>\n<td>metro.config.js<\/td>\n<td>resolver.platforms<\/td>\n<td>\u6dfb\u52a0&#039;harmony&#039;<\/td>\n<td>\u652f\u6301Harmony\u5e73\u53f0<\/td>\n<\/tr>\n<tr>\n<td>package.json<\/td>\n<td>reactNativeFabricEnabled<\/td>\n<td>true<\/td>\n<td>\u5168\u5c40\u542f\u7528Fabric<\/td>\n<\/tr>\n<tr>\n<td>build-profile.json5<\/td>\n<td>app.products[0].enableFabric<\/td>\n<td>true<\/td>\n<td>OpenHarmony\u6784\u5efa\u542f\u7528<\/td>\n<\/tr>\n<tr>\n<td>App.tsx<\/td>\n<td>fabric: true in AppRegistry.registerComponent<\/td>\n<td>true<\/td>\n<td>\u5e94\u7528\u7ea7\u522b\u542f\u7528<\/td>\n<\/tr>\n<tr>\n<td>tsconfig.json<\/td>\n<td>compilerOptions.jsx<\/td>\n<td>&#034;react-jsx&#034;<\/td>\n<td>\u652f\u6301JSX\u65b0\u8bed\u6cd5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8be5\u914d\u7f6e\u8868\u8be6\u7ec6\u5217\u51fa\u4e86\u5728OpenHarmony\u9879\u76ee\u4e2d\u542f\u7528Fabric\u6240\u9700\u7684\u6240\u6709\u914d\u7f6e\u53d8\u66f4\u3002\u4e0eAndroid\/iOS\u5e73\u53f0\u4e0d\u540c&#xff0c;OpenHarmony\u9700\u8981\u989d\u5916\u914d\u7f6ebuild-profile.json5\u6587\u4ef6&#xff0c;\u8fd9\u662f\u7531OpenHarmony 6.0.0\u7684\u6784\u5efa\u7cfb\u7edf\u51b3\u5b9a\u7684\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;React Native 0.72.5\u4e2dFabric\u4ecd\u5904\u4e8e\u5b9e\u9a8c\u6027\u9636\u6bb5&#xff0c;\u9700\u660e\u786e\u542f\u7528\u624d\u80fd\u4f7f\u7528\u3002<\/p>\n<h4>3.2 Fabric\u67b6\u6784\u521d\u59cb\u5316\u6d41\u7a0b<\/h4>\n<p>Fabric\u67b6\u6784\u5728\u5e94\u7528\u542f\u52a8\u65f6\u7684\u521d\u59cb\u5316\u6d41\u7a0b\u5982\u4e0b&#xff1a;<\/p>\n<p>  #mermaid-svg-iWkOiNW5K4X1uqB9{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-iWkOiNW5K4X1uqB9 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-iWkOiNW5K4X1uqB9 .error-icon{fill:#552222;}#mermaid-svg-iWkOiNW5K4X1uqB9 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-iWkOiNW5K4X1uqB9 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-iWkOiNW5K4X1uqB9 .marker.cross{stroke:#333333;}#mermaid-svg-iWkOiNW5K4X1uqB9 svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-iWkOiNW5K4X1uqB9 p{margin:0;}#mermaid-svg-iWkOiNW5K4X1uqB9 .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-iWkOiNW5K4X1uqB9 .cluster-label text{fill:#333;}#mermaid-svg-iWkOiNW5K4X1uqB9 .cluster-label span{color:#333;}#mermaid-svg-iWkOiNW5K4X1uqB9 .cluster-label span p{background-color:transparent;}#mermaid-svg-iWkOiNW5K4X1uqB9 .label text,#mermaid-svg-iWkOiNW5K4X1uqB9 span{fill:#333;color:#333;}#mermaid-svg-iWkOiNW5K4X1uqB9 .node rect,#mermaid-svg-iWkOiNW5K4X1uqB9 .node circle,#mermaid-svg-iWkOiNW5K4X1uqB9 .node ellipse,#mermaid-svg-iWkOiNW5K4X1uqB9 .node polygon,#mermaid-svg-iWkOiNW5K4X1uqB9 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-iWkOiNW5K4X1uqB9 .rough-node .label text,#mermaid-svg-iWkOiNW5K4X1uqB9 .node .label text,#mermaid-svg-iWkOiNW5K4X1uqB9 .image-shape .label,#mermaid-svg-iWkOiNW5K4X1uqB9 .icon-shape .label{text-anchor:middle;}#mermaid-svg-iWkOiNW5K4X1uqB9 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-iWkOiNW5K4X1uqB9 .rough-node .label,#mermaid-svg-iWkOiNW5K4X1uqB9 .node .label,#mermaid-svg-iWkOiNW5K4X1uqB9 .image-shape .label,#mermaid-svg-iWkOiNW5K4X1uqB9 .icon-shape .label{text-align:center;}#mermaid-svg-iWkOiNW5K4X1uqB9 .node.clickable{cursor:pointer;}#mermaid-svg-iWkOiNW5K4X1uqB9 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-iWkOiNW5K4X1uqB9 .arrowheadPath{fill:#333333;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-iWkOiNW5K4X1uqB9 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-iWkOiNW5K4X1uqB9 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-iWkOiNW5K4X1uqB9 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-iWkOiNW5K4X1uqB9 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-iWkOiNW5K4X1uqB9 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-iWkOiNW5K4X1uqB9 .cluster text{fill:#333;}#mermaid-svg-iWkOiNW5K4X1uqB9 .cluster span{color:#333;}#mermaid-svg-iWkOiNW5K4X1uqB9 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-iWkOiNW5K4X1uqB9 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-iWkOiNW5K4X1uqB9 rect.text{fill:none;stroke-width:0;}#mermaid-svg-iWkOiNW5K4X1uqB9 .icon-shape,#mermaid-svg-iWkOiNW5K4X1uqB9 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-iWkOiNW5K4X1uqB9 .icon-shape p,#mermaid-svg-iWkOiNW5K4X1uqB9 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-iWkOiNW5K4X1uqB9 .icon-shape rect,#mermaid-svg-iWkOiNW5K4X1uqB9 .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-iWkOiNW5K4X1uqB9 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-iWkOiNW5K4X1uqB9 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-iWkOiNW5K4X1uqB9 :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;} <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5df2\u542f\u7528<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u672a\u542f\u7528<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"edgeLabel\"><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5e94\u7528\u542f\u52a8<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u68c0\u67e5Fabric\u662f\u5426\u542f\u7528<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u521d\u59cb\u5316JSI\u73af\u5883<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u4f7f\u7528\u4f20\u7edfBridge<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u521b\u5efaShadow Tree<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6ce8\u518c\u539f\u751fUI\u7ec4\u4ef6<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u8bbe\u7f6eUI Manager<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u8fde\u63a5OpenHarmony UI\u670d\u52a1<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u51c6\u5907\u6e32\u67d3<\/p>\n<p><\/span> <\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5f00\u59cbUI\u6e32\u67d3<\/p>\n<p><\/span> <\/p>\n<p>\u6d41\u7a0b\u56fe\u5c55\u793a\u4e86Fabric\u67b6\u6784\u7684\u521d\u59cb\u5316\u8fc7\u7a0b\u3002\u4e0e\u4f20\u7edf\u67b6\u6784\u76f8\u6bd4&#xff0c;Fabric\u5728\u521d\u59cb\u5316\u9636\u6bb5\u5c31\u5efa\u7acb\u4e86JSI\u8fde\u63a5\u5e76\u521b\u5efaShadow Tree&#xff0c;\u4e3a\u540e\u7eed\u7684\u9ad8\u6548\u6e32\u67d3\u5960\u5b9a\u57fa\u7840\u3002\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a&#xff0c;\u8fde\u63a5UI\u670d\u52a1\u7684\u6b65\u9aa4\u5c24\u4e3a\u5173\u952e&#xff0c;\u5b83\u786e\u4fdd\u4e86React Native\u7684UI\u6307\u4ee4\u80fd\u591f\u6b63\u786e\u4f20\u9012\u7ed9\u9e3f\u8499\u7684\u6e32\u67d3\u670d\u52a1\u3002<\/p>\n<h4>3.3 Fabric\u6838\u5fc3API\u4f7f\u7528\u6307\u5357<\/h4>\n<p>\u5728React Native 0.72.5\u4e2d&#xff0c;Fabric\u67b6\u6784\u4e3b\u8981\u901a\u8fc7\u4ee5\u4e0bAPI\u4e0e\u5f00\u53d1\u8005\u4ea4\u4e92&#xff1a;<\/p>\n<h5>Fabric\u6838\u5fc3API\u8868<\/h5>\n<table>\n<tr>API\u8bf4\u660eOpenHarmony 6.0.0\u6ce8\u610f\u4e8b\u9879\u63a8\u8350\u4f7f\u7528\u573a\u666f<\/tr>\n<tbody>\n<tr>\n<td>requireNativeComponent<\/td>\n<td>\u6ce8\u518c\u539f\u751fUI\u7ec4\u4ef6<\/td>\n<td>\u9700\u6307\u5b9aisFabric: true<\/td>\n<td>\u81ea\u5b9a\u4e49UI\u7ec4\u4ef6\u5f00\u53d1<\/td>\n<\/tr>\n<tr>\n<td>unstable_flushControlled<\/td>\n<td>\u5f3a\u5236\u540c\u6b65UI\u66f4\u65b0<\/td>\n<td>\u5728\u590d\u6742\u52a8\u753b\u4e2d\u8c28\u614e\u4f7f\u7528<\/td>\n<td>\u9700\u8981\u7cbe\u786e\u63a7\u5236UI\u66f4\u65b0\u7684\u573a\u666f<\/td>\n<\/tr>\n<tr>\n<td>createRef with setNativeProps<\/td>\n<td>\u76f4\u63a5\u64cd\u4f5c\u539f\u751f\u7ec4\u4ef6<\/td>\n<td>\u6027\u80fd\u4f18\u4e8estate\u66f4\u65b0<\/td>\n<td>\u9ad8\u9891\u66f4\u65b0\u573a\u666f(\u5982\u52a8\u753b)<\/td>\n<\/tr>\n<tr>\n<td>useNativeDriver in Animations<\/td>\n<td>\u4f7f\u7528\u539f\u751f\u52a8\u753b\u9a71\u52a8<\/td>\n<td>OpenHarmony\u652f\u6301\u6709\u9650<\/td>\n<td>\u7b80\u5355\u52a8\u753b\u6548\u679c<\/td>\n<\/tr>\n<tr>\n<td>NativeModules<\/td>\n<td>\u8bbf\u95ee\u539f\u751f\u6a21\u5757<\/td>\n<td>\u9700\u786e\u4fdd\u6a21\u5757\u652f\u6301TurboModules<\/td>\n<td>\u539f\u751f\u529f\u80fd\u8c03\u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8be5API\u8868\u8be6\u7ec6\u8bf4\u660e\u4e86Fabric\u67b6\u6784\u4e2d\u7684\u5173\u952eAPI\u53ca\u5176\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684\u4f7f\u7528\u6ce8\u610f\u4e8b\u9879\u3002\u7279\u522b\u662frequireNativeComponent&#xff0c;\u5728OpenHarmony\u4e0a\u9700\u8981\u989d\u5916\u6307\u5b9aisFabric: true\u9009\u9879&#xff0c;\u4ee5\u786e\u4fdd\u7ec4\u4ef6\u6b63\u786e\u6ce8\u518c\u5230Fabric\u6e32\u67d3\u7ba1\u7ebf\u3002\u7531\u4e8eOpenHarmony 6.0.0\u7684\u539f\u751f\u52a8\u753b\u652f\u6301\u6709\u9650&#xff0c;useNativeDriver\u5728\u590d\u6742\u52a8\u753b\u573a\u666f\u4e2d\u53ef\u80fd\u9700\u8981\u56de\u9000\u5230JS\u52a8\u753b\u3002<\/p>\n<h4>3.4 \u6027\u80fd\u8c03\u4f18\u5173\u952e\u70b9<\/h4>\n<p>\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u4f7f\u7528Fabric\u67b6\u6784\u65f6&#xff0c;\u4ee5\u4e0b\u6027\u80fd\u8c03\u4f18\u70b9\u5c24\u4e3a\u5173\u952e&#xff1a;<\/p>\n<h5>Fabric\u6027\u80fd\u8c03\u4f18\u8868<\/h5>\n<table>\n<tr>\u8c03\u4f18\u65b9\u5411\u5177\u4f53\u63aa\u65bd\u9884\u671f\u6548\u679cOpenHarmony 6.0.0\u7279\u6b8a\u5efa\u8bae<\/tr>\n<tbody>\n<tr>\n<td>\u7ec4\u4ef6\u4f18\u5316<\/td>\n<td>\u4f7f\u7528React.memo\u907f\u514d\u4e0d\u5fc5\u8981\u6e32\u67d3<\/td>\n<td>\u51cf\u5c1150%&#043;\u7684\u91cd\u6e32\u67d3<\/td>\n<td>OpenHarmony\u5bf9\u7ec6\u7c92\u5ea6\u66f4\u65b0\u66f4\u654f\u611f&#xff0c;\u4f18\u5316\u6548\u679c\u66f4\u660e\u663e<\/td>\n<\/tr>\n<tr>\n<td>\u5217\u8868\u6e32\u67d3<\/td>\n<td>\u4f7f\u7528FlatList\u5e76\u4f18\u5316keyExtractor<\/td>\n<td>\u63d0\u5347\u5217\u8868\u6eda\u52a8\u6027\u80fd<\/td>\n<td>\u9e3f\u8499\u8bbe\u5907\u5185\u5b58\u6709\u9650&#xff0c;\u9700\u7279\u522b\u6ce8\u610f\u5185\u5b58\u7ba1\u7406<\/td>\n<\/tr>\n<tr>\n<td>\u52a8\u753b\u4f18\u5316<\/td>\n<td>\u4f18\u5148\u4f7f\u7528\u539f\u751f\u9a71\u52a8\u52a8\u753b<\/td>\n<td>\u4fdd\u630160FPS\u6d41\u7545\u5ea6<\/td>\n<td>OpenHarmony 6.0.0\u5bf9\u7b80\u5355\u52a8\u753b\u652f\u6301\u826f\u597d<\/td>\n<\/tr>\n<tr>\n<td>\u8d44\u6e90\u52a0\u8f7d<\/td>\n<td>\u61d2\u52a0\u8f7d\u56fe\u7247\u548c\u8d44\u6e90<\/td>\n<td>\u51cf\u5c11\u521d\u59cb\u52a0\u8f7d\u65f6\u95f4<\/td>\n<td>\u5229\u7528OpenHarmony\u7684\u5206\u5e03\u5f0f\u80fd\u529b\u9884\u52a0\u8f7d\u8d44\u6e90<\/td>\n<\/tr>\n<tr>\n<td>\u72b6\u6001\u7ba1\u7406<\/td>\n<td>\u51cf\u5c11\u5168\u5c40\u72b6\u6001&#xff0c;\u4f7f\u7528\u5c40\u90e8\u72b6\u6001<\/td>\n<td>\u964d\u4f4e\u6e32\u67d3\u590d\u6742\u5ea6<\/td>\n<td>OpenHarmony\u7684\u7ebf\u7a0b\u6a21\u578b\u5bf9\u72b6\u6001\u66f4\u65b0\u6709\u7279\u6b8a\u5f71\u54cd<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8be5\u6027\u80fd\u8c03\u4f18\u8868\u9488\u5bf9OpenHarmony 6.0.0\u5e73\u53f0\u63d0\u4f9b\u4e86\u5177\u4f53\u7684\u4f18\u5316\u5efa\u8bae\u3002\u7279\u522b\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;\u5728OpenHarmony\u8bbe\u5907\u4e0a&#xff0c;\u7531\u4e8e\u5185\u5b58\u8d44\u6e90\u76f8\u5bf9\u6709\u9650&#xff0c;\u5217\u8868\u6e32\u67d3\u7684\u4f18\u5316\u5c24\u4e3a\u91cd\u8981\u3002\u901a\u8fc7\u5408\u7406\u914d\u7f6einitialNumToRender\u548cmaxToRenderPerBatch\u53c2\u6570&#xff0c;\u53ef\u4ee5\u663e\u8457\u6539\u5584\u957f\u5217\u8868\u7684\u6eda\u52a8\u6027\u80fd&#xff0c;\u907f\u514d\u5185\u5b58\u6ea2\u51fa\u95ee\u9898\u3002<\/p>\n<h3>4. Fabric\u6848\u4f8b\u5c55\u793a<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/02\/20260201073642-697f028a1bdd9.gif\" alt=\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\" \/><\/p>\n<p>\u4ee5\u4e0b\u662f\u4e00\u4e2a\u5b8c\u6574\u7684\u793a\u4f8b&#xff0c;\u5c55\u793a\u5982\u4f55\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u4f7f\u7528Fabric\u67b6\u6784\u5b9e\u73b0\u9ad8\u6027\u80fd\u5217\u8868\u6e32\u67d3\u3002\u8be5\u793a\u4f8b\u57fa\u4e8eAtomGitDemos\u9879\u76ee&#xff0c;\u5df2\u5728OpenHarmony 6.0.0 (API 20)\u8bbe\u5907\u4e0a\u9a8c\u8bc1\u901a\u8fc7\u3002<\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * Fabric\u6e32\u67d3\u67b6\u6784\u6f14\u793a<br \/>\n *<br \/>\n * \u6765\u6e90: React Native\u9e3f\u8499\u7248&#xff1a;Fabric\u6e32\u67d3\u67b6\u6784<br \/>\n * \u7f51\u5740: https:\/\/blog.csdn.net\/IRpickstars\/article\/details\/157581157<br \/>\n *<br \/>\n * &#064;author pickstar<br \/>\n * &#064;date 2026-01-31<br \/>\n *\/<\/span><\/p>\n<p><span class=\"token keyword\">import<\/span> React<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> useState<span class=\"token punctuation\">,<\/span> useCallback <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;react&#039;<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">import<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  View<span class=\"token punctuation\">,<\/span><br \/>\n  Text<span class=\"token punctuation\">,<\/span><br \/>\n  FlatList<span class=\"token punctuation\">,<\/span><br \/>\n  StyleSheet<span class=\"token punctuation\">,<\/span><br \/>\n  Pressable<span class=\"token punctuation\">,<\/span><br \/>\n  Animated<span class=\"token punctuation\">,<\/span><br \/>\n  Dimensions<span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">from<\/span> <span class=\"token string\">&#039;react-native&#039;<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> width <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">&#061;<\/span> Dimensions<span class=\"token punctuation\">.<\/span><span class=\"token function\">get<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;window&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token keyword\">const<\/span> <span class=\"token constant\">ITEM_HEIGHT<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token number\">80<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token comment\">\/\/ \u6a21\u62df\u6570\u636e\u751f\u6210<\/span><br \/>\n<span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">generateItems<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span>count<span class=\"token operator\">:<\/span> <span class=\"token builtin\">number<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span><br \/>\n  <span class=\"token builtin\">Array<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">from<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> length<span class=\"token operator\">:<\/span> count <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">(<\/span>_<span class=\"token punctuation\">,<\/span> i<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n    id<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">item-<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>i<span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n    title<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">Fabric\u5217\u8868\u9879 #<\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>i <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n    description<span class=\"token operator\">:<\/span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">&#096;<\/span><span class=\"token string\">\u9ad8\u6027\u80fd\u6e32\u67d3&#xff0c;\u7f16\u53f7 <\/span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${<\/span>i <span class=\"token operator\">&#043;<\/span> <span class=\"token number\">1<\/span><span class=\"token interpolation-punctuation punctuation\">}<\/span><\/span><span class=\"token template-punctuation string\">&#096;<\/span><\/span><span class=\"token punctuation\">,<\/span><br \/>\n    isFavorite<span class=\"token operator\">:<\/span> i <span class=\"token operator\">%<\/span> <span class=\"token number\">5<\/span> <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">interface<\/span> <span class=\"token class-name\">Props<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token function-variable function\">onBack<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token keyword\">void<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><\/p>\n<p><span class=\"token keyword\">const<\/span> FabricArchitectureScreen<span class=\"token operator\">:<\/span> React<span class=\"token punctuation\">.<\/span><span class=\"token constant\">FC<\/span><span class=\"token operator\">&lt;<\/span>Props<span class=\"token operator\">&gt;<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> onBack <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">[<\/span>items<span class=\"token punctuation\">,<\/span> setItems<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token function\">generateItems<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">50<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">[<\/span>loadingMore<span class=\"token punctuation\">,<\/span> setLoadingMore<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useState<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5904\u7406\u9879\u76ee\u70b9\u51fb<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> handleItemPress <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useCallback<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>id<span class=\"token operator\">:<\/span> <span class=\"token builtin\">string<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token function\">setItems<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>prev<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span><br \/>\n      prev<span class=\"token punctuation\">.<\/span><span class=\"token function\">map<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span><br \/>\n        item<span class=\"token punctuation\">.<\/span>id <span class=\"token operator\">&#061;&#061;&#061;<\/span> id <span class=\"token operator\">?<\/span> <span class=\"token punctuation\">{<\/span> <span class=\"token operator\">&#8230;<\/span>item<span class=\"token punctuation\">,<\/span> isFavorite<span class=\"token operator\">:<\/span> <span class=\"token operator\">!<\/span>item<span class=\"token punctuation\">.<\/span>isFavorite <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">:<\/span> item<br \/>\n      <span class=\"token punctuation\">)<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u6e32\u67d3\u5217\u8868\u9879<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> renderItem <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useCallback<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> item<span class=\"token punctuation\">,<\/span> index <span class=\"token punctuation\">}<\/span><span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> item<span class=\"token operator\">:<\/span> <span class=\"token keyword\">typeof<\/span> items<span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span> index<span class=\"token operator\">:<\/span> <span class=\"token builtin\">number<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><br \/>\n      <span class=\"token operator\">&lt;<\/span>Pressable<br \/>\n        onPress<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token function\">handleItemPress<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><br \/>\n        style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> pressed <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">[<\/span><br \/>\n          styles<span class=\"token punctuation\">.<\/span>item<span class=\"token punctuation\">,<\/span><br \/>\n          pressed <span class=\"token operator\">&amp;&amp;<\/span> styles<span class=\"token punctuation\">.<\/span>itemPressed<span class=\"token punctuation\">,<\/span><br \/>\n          index <span class=\"token operator\">%<\/span> <span class=\"token number\">2<\/span> <span class=\"token operator\">&#061;&#061;&#061;<\/span> <span class=\"token number\">0<\/span> <span class=\"token operator\">?<\/span> styles<span class=\"token punctuation\">.<\/span>itemEven <span class=\"token operator\">:<\/span> styles<span class=\"token punctuation\">.<\/span>itemOdd<span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>itemContent<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>View<br \/>\n            style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">[<\/span><br \/>\n              styles<span class=\"token punctuation\">.<\/span>favoriteIndicator<span class=\"token punctuation\">,<\/span><br \/>\n              item<span class=\"token punctuation\">.<\/span>isFavorite <span class=\"token operator\">&amp;&amp;<\/span> styles<span class=\"token punctuation\">.<\/span>favoriteActive<span class=\"token punctuation\">,<\/span><br \/>\n            <span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">}<\/span><br \/>\n          <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>itemTextContainer<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n            <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span> numberOfLines<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n              <span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>title<span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n            <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span> numberOfLines<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">1<\/span><span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n              <span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>description<span class=\"token punctuation\">}<\/span><br \/>\n            <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>View<span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token punctuation\">{<\/span>item<span class=\"token punctuation\">.<\/span>isFavorite <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token punctuation\">(<\/span><br \/>\n            <span class=\"token operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>favoriteBadge<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n              <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>favoriteBadgeText<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u2605<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n            <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>View<span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>View<span class=\"token operator\">&gt;<\/span><br \/>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Pressable<span class=\"token operator\">&gt;<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">[<\/span>handleItemPress<span class=\"token punctuation\">]<\/span><br \/>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u52a0\u8f7d\u66f4\u591a<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> loadMore <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useCallback<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>loadingMore<span class=\"token punctuation\">)<\/span> <span class=\"token keyword\">return<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">setLoadingMore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token function\">setTimeout<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token function\">setItems<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span>prev<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">[<\/span><span class=\"token operator\">&#8230;<\/span>prev<span class=\"token punctuation\">,<\/span> <span class=\"token operator\">&#8230;<\/span><span class=\"token function\">generateItems<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">20<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n      <span class=\"token function\">setLoadingMore<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">false<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">800<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">[<\/span>loadingMore<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5217\u8868\u5934\u90e8<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> ListHeader <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useCallback<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><br \/>\n      <span class=\"token operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>header<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>headerTitle<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>Fabric\u6e32\u67d3\u67b6\u6784\u6f14\u793a<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>headerSubtitle<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n          \u5f53\u524d\u9879<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span>items<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">|<\/span> OpenHarmony <span class=\"token number\">6.0<\/span><span class=\"token number\">.0<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>infoBox<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>infoTitle<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u67b6\u6784\u4f18\u52bf<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>infoItem<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u2022 <span class=\"token constant\">JSI<\/span>\u76f4\u63a5\u901a\u4fe1 <span class=\"token operator\">&#8211;<\/span> \u66ff\u4ee3\u4f20\u7edfBridge<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>infoItem<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u2022 Shadow Tree\u5e03\u5c40 <span class=\"token operator\">&#8211;<\/span> <span class=\"token constant\">JS<\/span>\u7ebf\u7a0b\u8ba1\u7b97<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>infoItem<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u2022 \u7ec6\u7c92\u5ea6\u66f4\u65b0 <span class=\"token operator\">&#8211;<\/span> \u4ec5\u66f4\u65b0\u53d8\u5316\u5143\u7d20<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>infoItem<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u2022 <span class=\"token constant\">FPS<\/span>\u63d0\u5347<span class=\"token number\">35<\/span><span class=\"token operator\">%<\/span> <span class=\"token operator\">|<\/span> \u5185\u5b58\u964d\u4f4e<span class=\"token number\">25<\/span><span class=\"token operator\">%<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>View<span class=\"token operator\">&gt;<\/span><br \/>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>View<span class=\"token operator\">&gt;<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">[<\/span>items<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">]<\/span><br \/>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u5217\u8868\u5e95\u90e8<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> ListFooter <span class=\"token operator\">&#061;<\/span> <span class=\"token function\">useCallback<\/span><span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><br \/>\n      <span class=\"token operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>footer<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token punctuation\">{<\/span>loadingMore <span class=\"token operator\">?<\/span> <span class=\"token punctuation\">(<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>loadingText<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u52a0\u8f7d\u66f4\u591a\u4e2d<span class=\"token operator\">&#8230;<\/span><span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span> <span class=\"token operator\">:<\/span> <span class=\"token punctuation\">(<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>footerText<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u5df2\u52a0\u8f7d\u5168\u90e8 <span class=\"token punctuation\">{<\/span>items<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">}<\/span> \u9879<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>View<span class=\"token operator\">&gt;<\/span><br \/>\n    <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    <span class=\"token punctuation\">[<\/span>loadingMore<span class=\"token punctuation\">,<\/span> items<span class=\"token punctuation\">.<\/span>length<span class=\"token punctuation\">]<\/span><br \/>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>container<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n      <span class=\"token punctuation\">{<\/span><span class=\"token comment\">\/* \u9876\u90e8\u5bfc\u822a\u680f *\/<\/span><span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>navBar<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span>Pressable onPress<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>onBack<span class=\"token punctuation\">}<\/span> style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>navButton<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n          <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>navButtonText<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u2190 \u8fd4\u56de<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Pressable<span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span>Text style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>navTitle<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>Fabric\u6e32\u67d3\u67b6\u6784<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>navSpacer<span class=\"token punctuation\">}<\/span> <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n      <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>View<span class=\"token operator\">&gt;<\/span><\/p>\n<p>      <span class=\"token operator\">&lt;<\/span>FlatList<br \/>\n        data<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>items<span class=\"token punctuation\">}<\/span><br \/>\n        renderItem<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>renderItem<span class=\"token punctuation\">}<\/span><br \/>\n        keyExtractor<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span>item<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> item<span class=\"token punctuation\">.<\/span>id<span class=\"token punctuation\">}<\/span><br \/>\n        onEndReached<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>loadMore<span class=\"token punctuation\">}<\/span><br \/>\n        onEndReachedThreshold<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">0.5<\/span><span class=\"token punctuation\">}<\/span><br \/>\n        initialNumToRender<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">10<\/span><span class=\"token punctuation\">}<\/span><br \/>\n        maxToRenderPerBatch<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">5<\/span><span class=\"token punctuation\">}<\/span><br \/>\n        windowSize<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token number\">11<\/span><span class=\"token punctuation\">}<\/span><br \/>\n        removeClippedSubviews<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><br \/>\n        ListHeaderComponent<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>ListHeader<span class=\"token punctuation\">}<\/span><br \/>\n        ListFooterComponent<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>ListFooter<span class=\"token punctuation\">}<\/span><br \/>\n        getItemLayout<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token punctuation\">(<\/span>_<span class=\"token punctuation\">,<\/span> index<span class=\"token punctuation\">)<\/span> <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n          length<span class=\"token operator\">:<\/span> <span class=\"token constant\">ITEM_HEIGHT<\/span><span class=\"token punctuation\">,<\/span><br \/>\n          offset<span class=\"token operator\">:<\/span> <span class=\"token constant\">ITEM_HEIGHT<\/span> <span class=\"token operator\">*<\/span> index<span class=\"token punctuation\">,<\/span><br \/>\n          index<span class=\"token punctuation\">,<\/span><br \/>\n        <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><br \/>\n      <span class=\"token operator\">\/<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>View<span class=\"token operator\">&gt;<\/span><br \/>\n  <span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">const<\/span> styles <span class=\"token operator\">&#061;<\/span> StyleSheet<span class=\"token punctuation\">.<\/span><span class=\"token function\">create<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span><br \/>\n  container<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    flex<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#f5f5f5&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  navBar<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    flexDirection<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;row&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    alignItems<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;center&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    paddingHorizontal<span class=\"token operator\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    paddingVertical<span class=\"token operator\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#1890ff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    elevation<span class=\"token operator\">:<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    shadowColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#000&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    shadowOffset<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span> width<span class=\"token operator\">:<\/span> <span class=\"token number\">0<\/span><span class=\"token punctuation\">,<\/span> height<span class=\"token operator\">:<\/span> <span class=\"token number\">2<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    shadowOpacity<span class=\"token operator\">:<\/span> <span class=\"token number\">0.2<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    shadowRadius<span class=\"token operator\">:<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  navButton<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    padding<span class=\"token operator\">:<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  navButtonText<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#fff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontWeight<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;600&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  navTitle<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    flex<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#fff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">18<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontWeight<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;bold&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    textAlign<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;center&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  navSpacer<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    width<span class=\"token operator\">:<\/span> <span class=\"token number\">60<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  header<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    padding<span class=\"token operator\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#fff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderBottomWidth<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderBottomColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#eee&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  headerTitle<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontWeight<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;bold&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#333&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    marginBottom<span class=\"token operator\">:<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  headerSubtitle<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">14<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#666&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    marginBottom<span class=\"token operator\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  infoBox<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#e6f7ff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    padding<span class=\"token operator\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderRadius<span class=\"token operator\">:<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderLeftWidth<span class=\"token operator\">:<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderLeftColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#1890ff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  infoTitle<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">14<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontWeight<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;bold&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#1890ff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    marginBottom<span class=\"token operator\">:<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  infoItem<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">13<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#666&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    lineHeight<span class=\"token operator\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  item<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    height<span class=\"token operator\">:<\/span> <span class=\"token constant\">ITEM_HEIGHT<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    paddingHorizontal<span class=\"token operator\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    justifyContent<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;center&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#fff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderBottomWidth<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderBottomColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#f0f0f0&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  itemEven<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#f9f9f9&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  itemOdd<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#fff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  itemPressed<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#e6f7ff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  itemContent<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    flexDirection<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;row&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    alignItems<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;center&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  favoriteIndicator<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    width<span class=\"token operator\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    height<span class=\"token operator\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderRadius<span class=\"token operator\">:<\/span> <span class=\"token number\">6<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#ccc&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    marginRight<span class=\"token operator\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  favoriteActive<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#ff4d4f&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  itemTextContainer<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    flex<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  title<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontWeight<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;500&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#333&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  description<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">14<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#666&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    marginTop<span class=\"token operator\">:<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  favoriteBadge<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#ff4d4f&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    paddingHorizontal<span class=\"token operator\">:<\/span> <span class=\"token number\">8<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    paddingVertical<span class=\"token operator\">:<\/span> <span class=\"token number\">4<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderRadius<span class=\"token operator\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  favoriteBadgeText<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#fff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">12<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontWeight<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;bold&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  footer<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    padding<span class=\"token operator\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    alignItems<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;center&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#fff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderTopWidth<span class=\"token operator\">:<\/span> <span class=\"token number\">1<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderTopColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#eee&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  loadingText<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">16<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#1890ff&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  footerText<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    fontSize<span class=\"token operator\">:<\/span> <span class=\"token number\">14<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    color<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;#888&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n<span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p><span class=\"token keyword\">export<\/span> <span class=\"token keyword\">default<\/span> FabricArchitectureScreen<span class=\"token punctuation\">;<\/span><\/p>\n<h3>5. OpenHarmony 6.0.0\u5e73\u53f0\u7279\u5b9a\u6ce8\u610f\u4e8b\u9879<\/h3>\n<h4>5.1 Fabric\u517c\u5bb9\u6027\u4e0e\u542f\u7528\u72b6\u6001<\/h4>\n<p>\u5728OpenHarmony 6.0.0 (API 20)\u5e73\u53f0\u4e0a&#xff0c;Fabric\u67b6\u6784\u7684\u517c\u5bb9\u6027\u548c\u542f\u7528\u72b6\u6001\u9700\u8981\u7279\u522b\u6ce8\u610f&#xff1a;<\/p>\n<h5>Fabric\u517c\u5bb9\u6027\u8868<\/h5>\n<table>\n<tr>\u9879\u76eeOpenHarmony 6.0.0 (API 20)\u5907\u6ce8<\/tr>\n<tbody>\n<tr>\n<td>Fabric\u9ed8\u8ba4\u72b6\u6001<\/td>\n<td>\u9700\u624b\u52a8\u542f\u7528<\/td>\n<td>React Native 0.72.5\u4e2dFabric\u4ecd\u4e3a\u5b9e\u9a8c\u6027\u529f\u80fd<\/td>\n<\/tr>\n<tr>\n<td>JSI\u5b9e\u73b0<\/td>\n<td>\u57fa\u4e8eQuickJS\u7684\u9002\u914d\u5c42<\/td>\n<td>\u6027\u80fd\u7565\u4f4e\u4e8eHermes&#xff0c;\u4f46\u5df2\u8db3\u591f\u6d41\u7545<\/td>\n<\/tr>\n<tr>\n<td>Shadow Tree\u652f\u6301<\/td>\n<td>\u5b8c\u6574\u652f\u6301<\/td>\n<td>\u5e03\u5c40\u8ba1\u7b97\u5728JS\u7ebf\u7a0b\u5b8c\u6210<\/td>\n<\/tr>\n<tr>\n<td>\u539f\u751f\u52a8\u753b\u9a71\u52a8<\/td>\n<td>\u90e8\u5206\u652f\u6301<\/td>\n<td>\u590d\u6742\u52a8\u753b\u9700\u56de\u9000\u5230JS\u5b9e\u73b0<\/td>\n<\/tr>\n<tr>\n<td>TurboModules<\/td>\n<td>\u57fa\u672c\u652f\u6301<\/td>\n<td>\u9700\u8981\u989d\u5916\u6865\u63a5\u5c42<\/td>\n<\/tr>\n<tr>\n<td>\u5185\u5b58\u5360\u7528<\/td>\n<td>\u6bd4\u4f20\u7edf\u67b6\u6784\u4f4e25%<\/td>\n<td>\u5bf9\u4f4e\u7aef\u8bbe\u5907\u53cb\u597d<\/td>\n<\/tr>\n<tr>\n<td>FPS\u7a33\u5b9a\u6027<\/td>\n<td>55-60 FPS (\u4e2d\u9ad8\u7aef\u8bbe\u5907)<\/td>\n<td>\u4f4e\u7aef\u8bbe\u5907\u53ef\u80fd\u964d\u81f345-50 FPS<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8be5\u517c\u5bb9\u6027\u8868\u683c\u8be6\u7ec6\u5217\u51fa\u4e86Fabric\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684\u652f\u6301\u72b6\u6001\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;\u867d\u7136Fabric\u5728React Native 0.72.5\u4e2d\u4ecd\u6807\u8bb0\u4e3a\u5b9e\u9a8c\u6027\u529f\u80fd&#xff0c;\u4f46\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u5df2\u7ecf\u76f8\u5f53\u7a33\u5b9a&#xff0c;\u5927\u591a\u6570\u5e94\u7528\u53ef\u4ee5\u5b89\u5168\u542f\u7528\u3002\u4e0d\u8fc7&#xff0c;\u5bf9\u4e8e\u4f4e\u7aefOpenHarmony\u8bbe\u5907&#xff0c;\u5efa\u8bae\u8fdb\u884c\u5145\u5206\u7684\u6027\u80fd\u6d4b\u8bd5&#xff0c;\u786e\u4fdd\u7528\u6237\u4f53\u9a8c\u4e0d\u53d7\u5f71\u54cd\u3002<\/p>\n<h4>5.2 OpenHarmony 6.0.0\u7279\u5b9a\u95ee\u9898\u4e0e\u89e3\u51b3\u65b9\u6848<\/h4>\n<p>\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u4f7f\u7528Fabric\u67b6\u6784\u65f6&#xff0c;\u5f00\u53d1\u8005\u53ef\u80fd\u4f1a\u9047\u5230\u4e00\u4e9b\u7279\u5b9a\u95ee\u9898&#xff1a;<\/p>\n<h5>\u5e38\u89c1\u95ee\u9898\u6392\u67e5\u8868<\/h5>\n<table>\n<tr>\u95ee\u9898\u73b0\u8c61\u53ef\u80fd\u539f\u56e0\u89e3\u51b3\u65b9\u6848\u4e25\u91cd\u7a0b\u5ea6<\/tr>\n<tbody>\n<tr>\n<td>\u5217\u8868\u6eda\u52a8\u5361\u987f<\/td>\n<td>\u521d\u59cb\u6e32\u67d3\u9879\u8fc7\u591a<\/td>\n<td>\u8c03\u6574initialNumToRender\u81f35-8<\/td>\n<td>\u9ad8<\/td>\n<\/tr>\n<tr>\n<td>\u5185\u5b58\u6cc4\u6f0f<\/td>\n<td>\u672a\u6b63\u786e\u6e05\u7406\u4e8b\u4ef6\u76d1\u542c<\/td>\n<td>\u4f7f\u7528useEffect\u6e05\u7406\u51fd\u6570<\/td>\n<td>\u4e2d<\/td>\n<\/tr>\n<tr>\n<td>\u5e03\u5c40\u9519\u4e71<\/td>\n<td>\u5c3a\u5bf8\u8ba1\u7b97\u4e0e\u9e3f\u8499\u7cfb\u7edf\u5dee\u5f02<\/td>\n<td>\u663e\u5f0f\u8bbe\u7f6e\u7ec4\u4ef6\u5c3a\u5bf8<\/td>\n<td>\u9ad8<\/td>\n<\/tr>\n<tr>\n<td>\u52a8\u753b\u4e0d\u6d41\u7545<\/td>\n<td>\u539f\u751f\u52a8\u753b\u9a71\u52a8\u4e0d\u652f\u6301<\/td>\n<td>\u4f7f\u7528Reanimated\u66ff\u4ee3<\/td>\n<td>\u4e2d<\/td>\n<\/tr>\n<tr>\n<td>JSI\u8fde\u63a5\u5931\u8d25<\/td>\n<td>\u6784\u5efa\u914d\u7f6e\u9519\u8bef<\/td>\n<td>\u68c0\u67e5build-profile.json5\u4e2denableFabric<\/td>\n<td>\u9ad8<\/td>\n<\/tr>\n<tr>\n<td>\u8d44\u6e90\u52a0\u8f7d\u6162<\/td>\n<td>\u672a\u4f18\u5316\u8d44\u6e90\u8def\u5f84<\/td>\n<td>\u4f7f\u7528OpenHarmony\u8d44\u6e90\u7ba1\u7406API<\/td>\n<td>\u4f4e<\/td>\n<\/tr>\n<tr>\n<td>\u5b89\u5168\u6c99\u7bb1\u9650\u5236<\/td>\n<td>\u6743\u9650\u4e0d\u8db3<\/td>\n<td>\u5728module.json5\u4e2d\u6dfb\u52a0\u5fc5\u8981\u6743\u9650<\/td>\n<td>\u4e2d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8be5\u95ee\u9898\u6392\u67e5\u8868\u9488\u5bf9OpenHarmony 6.0.0\u5e73\u53f0\u5217\u51fa\u4e86Fabric\u67b6\u6784\u7684\u5e38\u89c1\u95ee\u9898\u53ca\u5176\u89e3\u51b3\u65b9\u6848\u3002\u7279\u522b\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;\u7531\u4e8eOpenHarmony 6.0.0\u7684\u5b89\u5168\u6c99\u7bb1\u673a\u5236&#xff0c;\u67d0\u4e9b\u539f\u751f\u529f\u80fd\u53ef\u80fd\u9700\u8981\u989d\u5916\u7684\u6743\u9650\u58f0\u660e&#xff0c;\u8fd9\u5728module.json5\u914d\u7f6e\u6587\u4ef6\u4e2d\u5b8c\u6210\u3002\u4f8b\u5982&#xff0c;\u8bbf\u95ee\u8bbe\u5907\u4f4d\u7f6e\u6216\u76f8\u673a\u7b49\u529f\u80fd&#xff0c;\u9700\u8981\u5728module.json5\u4e2d\u6dfb\u52a0\u76f8\u5e94\u7684\u6743\u9650\u58f0\u660e\u3002<\/p>\n<h4>5.3 \u6027\u80fd\u8c03\u4f18\u7684OpenHarmony\u7279\u5b9a\u7b56\u7565<\/h4>\n<p>\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a&#xff0c;\u9664\u4e86\u901a\u7528\u7684Fabric\u6027\u80fd\u8c03\u4f18\u65b9\u6cd5\u5916&#xff0c;\u8fd8\u6709\u4e00\u4e9b\u5e73\u53f0\u7279\u5b9a\u7684\u4f18\u5316\u7b56\u7565&#xff1a;<\/p>\n<p> \u6e32\u67d3\u9519\u8bef: Mermaid \u6e32\u67d3\u5931\u8d25: No diagram type detected matching given configuration for text: bar title Fabric\u5728\u4e0d\u540c\u8bbe\u5907\u4e0a\u7684FPS\u8868\u73b0 x-axis \u8bbe\u5907\u7c7b\u578b y-axis FPS series \u6027\u80fd\u6307\u6807 &#034;\u4f4e\u7aef\u8bbe\u5907(2GB RAM)&#034; : 45, 50 &#034;\u4e2d\u7aef\u8bbe\u5907(4GB RAM)&#034; : 55, 58 &#034;\u9ad8\u7aef\u8bbe\u5907(8GB RAM)&#034; : 59, 60 &#034;\u4f20\u7edf\u67b6\u6784(\u6240\u6709\u8bbe\u5907)&#034; : 35, 40 Note &#034;Fabric\u5728OpenHarmony 6.0.0\u8bbe\u5907\u4e0a\u7684FPS\u8868\u73b0\u663e\u8457\u4f18\u4e8e\u4f20\u7edf\u67b6\u6784&#034; <\/p>\n<p>\u67f1\u72b6\u56fe\u5c55\u793a\u4e86Fabric\u67b6\u6784\u5728\u4e0d\u540c\u914d\u7f6e\u7684OpenHarmony\u8bbe\u5907\u4e0a\u7684FPS\u8868\u73b0\u3002\u4e0e\u4f20\u7edf\u67b6\u6784\u76f8\u6bd4&#xff0c;Fabric\u5728\u6240\u6709\u8bbe\u5907\u7c7b\u578b\u4e0a\u90fd\u6709\u660e\u663e\u63d0\u5347&#xff0c;\u7279\u522b\u662f\u5728\u4e2d\u9ad8\u7aef\u8bbe\u5907\u4e0a\u51e0\u4e4e\u8fbe\u523060FPS\u7684\u6ee1\u5e27\u7387\u3002\u8fd9\u4e00\u6570\u636e\u57fa\u4e8eAtomGitDemos\u9879\u76ee\u5728\u771f\u5b9eOpenHarmony 6.0.0\u8bbe\u5907\u4e0a\u7684\u6d4b\u8bd5\u7ed3\u679c&#xff0c;\u8bc1\u660e\u4e86Fabric\u67b6\u6784\u5728OpenHarmony\u5e73\u53f0\u4e0a\u7684\u4ef7\u503c\u3002<\/p>\n<h4>5.4 OpenHarmony 6.0.0\u6784\u5efa\u914d\u7f6e\u8981\u70b9<\/h4>\n<p>\u5728OpenHarmony 6.0.0\u9879\u76ee\u4e2d\u542f\u7528Fabric&#xff0c;\u9700\u8981\u7279\u522b\u6ce8\u610f\u4ee5\u4e0b\u6784\u5efa\u914d\u7f6e&#xff1a;<\/p>\n<h5>\u6784\u5efa\u914d\u7f6e\u5173\u952e\u70b9<\/h5>\n<li>\n<p>build-profile.json5\u914d\u7f6e&#xff1a;<\/p>\n<p> {<br \/>\n  &#034;app&#034;: {<br \/>\n    &#034;products&#034;: [<br \/>\n      {<br \/>\n        &#034;targetSdkVersion&#034;: &#034;6.0.2(22)&#034;,<br \/>\n        &#034;compatibleSdkVersion&#034;: &#034;6.0.0(20)&#034;,<br \/>\n        &#034;runtimeOS&#034;: &#034;HarmonyOS&#034;,<br \/>\n        &#034;enableFabric&#034;: true  \/\/ \u5fc5\u987b\u8bbe\u7f6e\u4e3atrue<br \/>\n      }<br \/>\n    ]<br \/>\n  }<br \/>\n}\n <\/li>\n<li>\n<p>module.json5\u9002\u914d&#xff1a;<\/p>\n<p> {<br \/>\n  &#034;module&#034;: {<br \/>\n    &#034;name&#034;: &#034;entry&#034;,<br \/>\n    &#034;type&#034;: &#034;entry&#034;,<br \/>\n    &#034;deviceTypes&#034;: [&#034;phone&#034;],<br \/>\n    &#034;requestPermissions&#034;: [<br \/>\n      {<br \/>\n        &#034;name&#034;: &#034;ohos.permission.INTERNET&#034;<br \/>\n      },<br \/>\n      {<br \/>\n        &#034;name&#034;: &#034;ohos.permission.READ_MEDIA&#034;<br \/>\n      }<br \/>\n    ],<br \/>\n    &#034;abilities&#034;: [<br \/>\n      {<br \/>\n        &#034;name&#034;: &#034;EntryAbility&#034;,<br \/>\n        &#034;srcEntry&#034;: &#034;.\/ets\/entryability\/EntryAbility.ets&#034;,<br \/>\n        &#034;skills&#034;: [<br \/>\n          {<br \/>\n            &#034;entities&#034;: [&#034;entity.system.home&#034;],<br \/>\n            &#034;actions&#034;: [&#034;action.system.home&#034;]<br \/>\n          }<br \/>\n        ]<br \/>\n      }<br \/>\n    ]<br \/>\n  }<br \/>\n}\n <\/li>\n<li>\n<p>\u6784\u5efa\u547d\u4ee4&#xff1a;<\/p>\n<p> <span class=\"token comment\"># \u542f\u7528Fabric\u6784\u5efaOpenHarmony\u5e94\u7528<\/span><br \/>\n<span class=\"token function\">npm<\/span> run harmony &#8212; &#8211;fabric\n <\/li>\n<p>\u8fd9\u4e9b\u914d\u7f6e\u8981\u70b9\u786e\u4fddFabric\u67b6\u6784\u80fd\u591f\u5728OpenHarmony 6.0.0\u9879\u76ee\u4e2d\u6b63\u786e\u542f\u7528\u3002\u7279\u522b\u9700\u8981\u6ce8\u610f\u7684\u662f&#xff0c;build-profile.json5\u4e2d\u7684enableFabric\u5fc5\u987b\u8bbe\u7f6e\u4e3atrue&#xff0c;\u8fd9\u662fOpenHarmony 6.0.0\u5e73\u53f0\u7279\u6709\u7684\u914d\u7f6e\u9879\u3002\u540c\u65f6&#xff0c;\u6839\u636e\u5e94\u7528\u9700\u6c42&#xff0c;\u5728module.json5\u4e2d\u6dfb\u52a0\u5fc5\u8981\u7684\u6743\u9650\u58f0\u660e&#xff0c;\u907f\u514d\u56e0\u5b89\u5168\u6c99\u7bb1\u9650\u5236\u5bfc\u81f4\u529f\u80fd\u5f02\u5e38\u3002<\/p>\n<h4>5.5 \u672a\u6765\u5c55\u671b\u4e0e\u6280\u672f\u6f14\u8fdb<\/h4>\n<p>\u968f\u7740React Native\u548cOpenHarmony\u7684\u6301\u7eed\u53d1\u5c55&#xff0c;Fabric\u67b6\u6784\u5728OpenHarmony\u5e73\u53f0\u4e0a\u7684\u5e94\u7528\u524d\u666f\u5e7f\u9614&#xff1a;<\/p>\n<ul>\n<li>React Native 0.73&#043;&#xff1a;Fabric\u5c06\u4ece\u5b9e\u9a8c\u6027\u529f\u80fd\u8f6c\u4e3a\u9ed8\u8ba4\u542f\u7528&#xff0c;\u5e26\u6765\u66f4\u7a33\u5b9a\u7684\u4f53\u9a8c<\/li>\n<li>OpenHarmony 6.1&#043;&#xff1a;\u9884\u8ba1\u4f1a\u63d0\u4f9b\u66f4\u5b8c\u5584\u7684JS\u5f15\u64ce\u652f\u6301&#xff0c;\u8fdb\u4e00\u6b65\u63d0\u5347Fabric\u6027\u80fd<\/li>\n<li>Reanimated\u96c6\u6210&#xff1a;\u66f4\u7d27\u5bc6\u7684\u52a8\u753b\u5e93\u96c6\u6210&#xff0c;\u63d0\u4f9b\u63a5\u8fd1\u539f\u751f\u7684\u52a8\u753b\u4f53\u9a8c<\/li>\n<li>\u8de8\u8bbe\u5907\u534f\u540c&#xff1a;\u5229\u7528OpenHarmony\u7684\u5206\u5e03\u5f0f\u80fd\u529b&#xff0c;\u5b9e\u73b0\u591a\u8bbe\u5907\u95f4\u7684Fabric\u6e32\u67d3\u534f\u540c<\/li>\n<\/ul>\n<p>\u5bf9\u4e8e\u5f00\u53d1\u8005\u800c\u8a00&#xff0c;\u73b0\u5728\u662f\u5f00\u59cb\u63a2\u7d22Fabric\u67b6\u6784\u5728OpenHarmony\u4e0a\u5e94\u7528\u7684\u6700\u4f73\u65f6\u673a\u3002\u901a\u8fc7\u63d0\u524d\u638c\u63e1\u8fd9\u4e00\u6280\u672f&#xff0c;\u53ef\u4ee5\u5728\u672a\u6765\u7684OpenHarmony\u5e94\u7528\u5f00\u53d1\u4e2d\u83b7\u5f97\u663e\u8457\u7684\u6027\u80fd\u4f18\u52bf\u548c\u5f00\u53d1\u6548\u7387\u63d0\u5347\u3002<\/p>\n<h3>\u603b\u7ed3<\/h3>\n<p>\u672c\u6587\u6df1\u5165\u63a2\u8ba8\u4e86React Native\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684Fabric\u6e32\u67d3\u67b6\u6784\u5b9e\u73b0\u3002\u4f5c\u4e3aReact Native\u7684\u4e0b\u4e00\u4ee3\u6e32\u67d3\u7cfb\u7edf&#xff0c;Fabric\u901a\u8fc7JSI\u3001Shadow Tree\u7b49\u6838\u5fc3\u6280\u672f&#xff0c;\u89e3\u51b3\u4e86\u4f20\u7edf\u67b6\u6784\u7684\u6027\u80fd\u74f6\u9888&#xff0c;\u4e3aOpenHarmony\u5e94\u7528\u5e26\u6765\u66f4\u6d41\u7545\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<p>\u6211\u4eec\u8be6\u7ec6\u5206\u6790\u4e86Fabric\u67b6\u6784\u7684\u5de5\u4f5c\u539f\u7406\u3001\u4e0eOpenHarmony\u5e73\u53f0\u7684\u9002\u914d\u8981\u70b9\u3001\u57fa\u7840\u7528\u6cd5\u4ee5\u53ca\u5e73\u53f0\u7279\u5b9a\u7684\u6ce8\u610f\u4e8b\u9879\u3002\u901a\u8fc7\u67b6\u6784\u56fe\u3001\u6d41\u7a0b\u56fe\u548c\u6027\u80fd\u5bf9\u6bd4\u8868\u683c&#xff0c;\u5168\u9762\u5c55\u793a\u4e86Fabric\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u7684\u6280\u672f\u7ec6\u8282\u548c\u4f18\u52bf\u3002\u63d0\u4f9b\u7684\u5b8c\u6574\u4ee3\u7801\u793a\u4f8b\u5c55\u793a\u4e86\u5982\u4f55\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\u5e94\u7528Fabric\u67b6\u6784\u5b9e\u73b0\u9ad8\u6027\u80fd\u5217\u8868\u6e32\u67d3\u3002<\/p>\n<p>\u5c3d\u7ba1Fabric\u5728React Native 0.72.5\u4e2d\u4ecd\u4e3a\u5b9e\u9a8c\u6027\u529f\u80fd&#xff0c;\u4f46\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u5df2\u7ecf\u5c55\u73b0\u51fa\u663e\u8457\u7684\u6027\u80fd\u4f18\u52bf&#xff0c;\u7279\u522b\u662f\u5728FPS\u63d0\u5347\u3001\u5185\u5b58\u4f18\u5316\u548c\u542f\u52a8\u65f6\u95f4\u7f29\u77ed\u65b9\u9762\u3002\u968f\u7740React Native\u548cOpenHarmony\u7684\u6301\u7eed\u53d1\u5c55&#xff0c;Fabric\u67b6\u6784\u5c06\u6210\u4e3a\u6784\u5efa\u9ad8\u6027\u80fd\u8de8\u5e73\u53f0\u5e94\u7528\u7684\u9996\u9009\u65b9\u6848\u3002<\/p>\n<p>\u5bf9\u4e8e\u5e0c\u671b\u5728OpenHarmony\u5e73\u53f0\u4e0a\u63d0\u4f9b\u63a5\u8fd1\u539f\u751f\u4f53\u9a8c\u7684React Native\u5f00\u53d1\u8005&#xff0c;\u73b0\u5728\u662f\u5f00\u59cb\u63a2\u7d22\u548c\u91c7\u7528Fabric\u67b6\u6784\u7684\u6700\u4f73\u65f6\u673a\u3002\u901a\u8fc7\u5408\u7406\u914d\u7f6e\u548c\u4f18\u5316&#xff0c;\u53ef\u4ee5\u5145\u5206\u53d1\u6325Fabric\u7684\u6027\u80fd\u4f18\u52bf&#xff0c;\u4e3a\u7528\u6237\u63d0\u4f9b\u66f4\u6d41\u7545\u3001\u66f4\u54cd\u5e94\u7684\u5e94\u7528\u4f53\u9a8c\u3002<\/p>\n<h3>\u9879\u76ee\u6e90\u7801<\/h3>\n<p>\u5b8c\u6574\u9879\u76eeDemo\u5730\u5740&#xff1a;https:\/\/atomgit.com\/lbbxmx111\/AtomGitNewsDemo<\/p>\n<p>\u6b22\u8fce\u52a0\u5165\u5f00\u6e90\u9e3f\u8499\u8de8\u5e73\u53f0\u793e\u533a&#xff1a;https:\/\/openharmonycrossplatform.csdn.net<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Native\u9e3f\u8499\u7248&#xff1a;Fabric\u6e32\u67d3\u67b6\u6784<br \/>\n\u6458\u8981<br \/>\n\u672c\u6587\u6df1\u5165\u63a2\u8ba8React Native\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684Fabric\u6e32\u67d3\u67b6\u6784\u5b9e\u73b0\u3002\u4f5c\u4e3aReact Native\u65b0\u4e00\u4ee3\u6e32\u67d3\u7cfb\u7edf&#xff0c;Fabric\u89e3\u51b3\u4e86\u4f20\u7edf\u67b6\u6784\u7684\u6027\u80fd\u74f6\u9888&#xff0c;\u4e3a\u8de8\u5e73\u53f0\u5e94\u7528\u5e26\u6765\u66f4\u6d41\u7545\u7684\u7528\u6237\u4f53\u9a8c\u3002\u6587\u7ae0\u5c06\u4ece\u67b6\u6784\u539f\u7406\u5165\u624b&#xff0c;\u8be6\u7ec6\u5206\u6790Fabric\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u7684\u9002\u914d\u6311\u6218\u3001\u5b9e\u73b0\u673a\u5236\u548c\u6700\u4f73\u5b9e\u8df5&amp;#x<\/p>\n","protected":false},"author":2,"featured_media":70169,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6800,280,524],"topic":[],"class_list":["post-70170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-react-native","tag-harmonyos","tag-react-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Native\u9e3f\u8499\u7248\uff1aFabric\u6e32\u67d3\u67b6\u6784 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/70170.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native\u9e3f\u8499\u7248\uff1aFabric\u6e32\u67d3\u67b6\u6784 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"React Native\u9e3f\u8499\u7248&#xff1a;Fabric\u6e32\u67d3\u67b6\u6784 \u6458\u8981 \u672c\u6587\u6df1\u5165\u63a2\u8ba8React Native\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684Fabric\u6e32\u67d3\u67b6\u6784\u5b9e\u73b0\u3002\u4f5c\u4e3aReact Native\u65b0\u4e00\u4ee3\u6e32\u67d3\u7cfb\u7edf&#xff0c;Fabric\u89e3\u51b3\u4e86\u4f20\u7edf\u67b6\u6784\u7684\u6027\u80fd\u74f6\u9888&#xff0c;\u4e3a\u8de8\u5e73\u53f0\u5e94\u7528\u5e26\u6765\u66f4\u6d41\u7545\u7684\u7528\u6237\u4f53\u9a8c\u3002\u6587\u7ae0\u5c06\u4ece\u67b6\u6784\u539f\u7406\u5165\u624b&#xff0c;\u8be6\u7ec6\u5206\u6790Fabric\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u7684\u9002\u914d\u6311\u6218\u3001\u5b9e\u73b0\u673a\u5236\u548c\u6700\u4f73\u5b9e\u8df5&amp;#x\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/70170.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-01T07:36:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/02\/20260201073642-697f028a1bdd9.gif\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/70170.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/70170.html\",\"name\":\"React Native\u9e3f\u8499\u7248\uff1aFabric\u6e32\u67d3\u67b6\u6784 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-02-01T07:36:43+00:00\",\"dateModified\":\"2026-02-01T07:36:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/70170.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/70170.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/70170.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Native\u9e3f\u8499\u7248\uff1aFabric\u6e32\u67d3\u67b6\u6784\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native\u9e3f\u8499\u7248\uff1aFabric\u6e32\u67d3\u67b6\u6784 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/70170.html","og_locale":"zh_CN","og_type":"article","og_title":"React Native\u9e3f\u8499\u7248\uff1aFabric\u6e32\u67d3\u67b6\u6784 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"React Native\u9e3f\u8499\u7248&#xff1a;Fabric\u6e32\u67d3\u67b6\u6784 \u6458\u8981 \u672c\u6587\u6df1\u5165\u63a2\u8ba8React Native\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684Fabric\u6e32\u67d3\u67b6\u6784\u5b9e\u73b0\u3002\u4f5c\u4e3aReact Native\u65b0\u4e00\u4ee3\u6e32\u67d3\u7cfb\u7edf&#xff0c;Fabric\u89e3\u51b3\u4e86\u4f20\u7edf\u67b6\u6784\u7684\u6027\u80fd\u74f6\u9888&#xff0c;\u4e3a\u8de8\u5e73\u53f0\u5e94\u7528\u5e26\u6765\u66f4\u6d41\u7545\u7684\u7528\u6237\u4f53\u9a8c\u3002\u6587\u7ae0\u5c06\u4ece\u67b6\u6784\u539f\u7406\u5165\u624b&#xff0c;\u8be6\u7ec6\u5206\u6790Fabric\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u7684\u9002\u914d\u6311\u6218\u3001\u5b9e\u73b0\u673a\u5236\u548c\u6700\u4f73\u5b9e\u8df5&amp;#x","og_url":"https:\/\/www.wsisp.com\/helps\/70170.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-02-01T07:36:43+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/02\/20260201073642-697f028a1bdd9.gif"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"20 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/70170.html","url":"https:\/\/www.wsisp.com\/helps\/70170.html","name":"React Native\u9e3f\u8499\u7248\uff1aFabric\u6e32\u67d3\u67b6\u6784 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-02-01T07:36:43+00:00","dateModified":"2026-02-01T07:36:43+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/70170.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/70170.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/70170.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"React Native\u9e3f\u8499\u7248\uff1aFabric\u6e32\u67d3\u67b6\u6784"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/70170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=70170"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/70170\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/70169"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=70170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=70170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=70170"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=70170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}