{"id":66955,"date":"2026-01-27T22:56:58","date_gmt":"2026-01-27T14:56:58","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/66955.html"},"modified":"2026-01-27T22:56:58","modified_gmt":"2026-01-27T14:56:58","slug":"openharmony%e7%8e%af%e5%a2%83%e4%b8%8breact-native%ef%bc%9aactivityindicator%e5%8a%a0%e8%bd%bd%e9%81%ae%e7%bd%a9","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/66955.html","title":{"rendered":"OpenHarmony\u73af\u5883\u4e0bReact Native\uff1aActivityIndicator\u52a0\u8f7d\u906e\u7f69"},"content":{"rendered":"<h2>React Native for OpenHarmony \u5b9e\u6218&#xff1a;ActivityIndicator\u52a0\u8f7d\u906e\u7f69<\/h2>\n<p>\u672c\u6587\u8be6\u7ec6\u4ecb\u7ecdReact Native\u4e2dActivityIndicator\u7ec4\u4ef6\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684\u5e94\u7528\u4e0e\u5b9e\u73b0\u539f\u7406\u3002\u6587\u7ae0\u5c06\u4ece\u57fa\u7840\u6982\u5ff5\u5165\u624b&#xff0c;\u6df1\u5165\u5206\u6790ActivityIndicator\u5728\u8de8\u5e73\u53f0\u73af\u5883\u4e2d\u7684\u6e32\u67d3\u673a\u5236&#xff0c;\u91cd\u70b9\u8bb2\u89e3\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u7684\u9002\u914d\u8981\u70b9\u548c\u6027\u80fd\u4f18\u5316\u7b56\u7565\u3002\u901a\u8fc7\u67b6\u6784\u56fe\u3001\u6d41\u7a0b\u56fe\u548c\u5bf9\u6bd4\u8868\u683c&#xff0c;\u5168\u9762\u5256\u6790React Native\u4e0eOpenHarmony\u5e73\u53f0\u7684\u4ea4\u4e92\u7ec6\u8282&#xff0c;\u6240\u6709\u6280\u672f\u8981\u70b9\u5747\u57fa\u4e8eAtomGitDemos\u9879\u76ee\u5728\u771f\u5b9e\u8bbe\u5907\u4e0a\u7684\u9a8c\u8bc1\u7ed3\u679c\u3002\u8bfb\u8005\u5c06\u638c\u63e1ActivityIndicator\u5728OpenHarmony\u73af\u5883\u4e0b\u7684\u6700\u4f73\u5b9e\u8df5&#xff0c;\u907f\u514d\u5e38\u89c1\u9002\u914d\u95ee\u9898&#xff0c;\u63d0\u5347\u8de8\u5e73\u53f0\u5e94\u7528\u7684\u7528\u6237\u4f53\u9a8c\u3002<\/p>\n<h3>ActivityIndicator\u7ec4\u4ef6\u4ecb\u7ecd<\/h3>\n<p>ActivityIndicator\u662fReact Native\u6846\u67b6\u4e2d\u7528\u4e8e\u663e\u793a\u52a0\u8f7d\u72b6\u6001\u7684\u6807\u51c6\u7ec4\u4ef6&#xff0c;\u901a\u5e38\u7528\u4e8e\u8868\u793a\u6570\u636e\u52a0\u8f7d\u3001\u64cd\u4f5c\u5904\u7406\u7b49\u9700\u8981\u7b49\u5f85\u7684\u573a\u666f\u3002\u4f5c\u4e3aReact Native\u6838\u5fc3\u7ec4\u4ef6\u5e93\u7684\u4e00\u90e8\u5206&#xff0c;\u5b83\u63d0\u4f9b\u4e86\u4e00\u79cd\u8de8\u5e73\u53f0\u7684\u3001\u4e00\u81f4\u7684\u52a0\u8f7d\u6307\u793a\u4f53\u9a8c\u3002<\/p>\n<h4>\u7ec4\u4ef6\u57fa\u672c\u6982\u5ff5\u4e0e\u7528\u9014<\/h4>\n<p>ActivityIndicator\u7ec4\u4ef6\u672c\u8d28\u4e0a\u662f\u4e00\u4e2a\u65cb\u8f6c\u7684\u5706\u5f62\u8fdb\u5ea6\u6307\u793a\u5668&#xff0c;\u5176\u8bbe\u8ba1\u9075\u5faa\u5404\u5e73\u53f0\u7684UI\u89c4\u8303&#xff1a;\u5728iOS\u4e0a\u8868\u73b0\u4e3a\u65cb\u8f6c\u7684\u5706\u5708&#xff0c;\u5728Android\u4e0a\u8868\u73b0\u4e3a\u65cb\u8f6c\u7684\u5706\u73af\u3002\u5728OpenHarmony\u73af\u5883\u4e0b&#xff0c;\u5b83\u9700\u8981\u901a\u8fc7\u9002\u914d\u5c42\u8f6c\u6362\u4e3a\u7b26\u5408HarmonyOS\u8bbe\u8ba1\u8bed\u8a00\u7684\u52a0\u8f7d\u6307\u793a\u5668\u3002<\/p>\n<p>\u8be5\u7ec4\u4ef6\u7684\u4e3b\u8981\u7528\u9014\u5305\u62ec&#xff1a;<\/p>\n<ul>\n<li>\u7f51\u7edc\u8bf7\u6c42\u7b49\u5f85\u671f\u95f4\u7684\u7528\u6237\u53cd\u9988<\/li>\n<li>\u5927\u91cf\u6570\u636e\u5904\u7406\u65f6\u7684\u72b6\u6001\u63d0\u793a<\/li>\n<li>\u9875\u9762\u521d\u59cb\u5316\u8fc7\u7a0b\u4e2d\u7684\u52a0\u8f7d\u6307\u793a<\/li>\n<li>\u64cd\u4f5c\u63d0\u4ea4\u540e\u7684\u5904\u7406\u7b49\u5f85<\/li>\n<\/ul>\n<p>\u5728\u7528\u6237\u4f53\u9a8c\u8bbe\u8ba1\u4e2d&#xff0c;ActivityIndicator\u626e\u6f14\u7740\u81f3\u5173\u91cd\u8981\u7684\u89d2\u8272\u3002\u6839\u636eNielsen Norman Group\u7684\u53ef\u7528\u6027\u539f\u5219&#xff0c;\u7528\u6237\u5728\u7b49\u5f85\u64cd\u4f5c\u7ed3\u679c\u65f6&#xff0c;\u7cfb\u7edf\u5e94\u5f53\u63d0\u4f9b\u660e\u786e\u7684\u53cd\u9988&#xff0c;\u907f\u514d\u7528\u6237\u4ea7\u751f&#034;\u7cfb\u7edf\u662f\u5426\u4ecd\u5728\u5de5\u4f5c&#034;\u7684\u7591\u8651\u3002\u7814\u7a76\u8868\u660e&#xff0c;\u9002\u5f53\u7684\u52a0\u8f7d\u6307\u793a\u53ef\u4ee5\u5c06\u7528\u6237\u7b49\u5f85\u611f\u77e5\u65f6\u95f4\u51cf\u5c1123%&#xff0c;\u663e\u8457\u63d0\u5347\u5e94\u7528\u7684\u6574\u4f53\u4f53\u9a8c\u3002<\/p>\n<h4>React Native\u6e32\u67d3\u67b6\u6784\u4e2d\u7684\u4f4d\u7f6e<\/h4>\n<p>\u5728React Native\u7684\u6e32\u67d3\u67b6\u6784\u4e2d&#xff0c;ActivityIndicator\u4f5c\u4e3a\u539f\u751f\u7ec4\u4ef6&#xff0c;\u5176\u751f\u547d\u5468\u671f\u548c\u6e32\u67d3\u6d41\u7a0b\u4e0e\u5176\u4ed6\u7ec4\u4ef6\u6709\u6240\u4e0d\u540c\u3002\u4e0b\u56fe\u5c55\u793a\u4e86ActivityIndicator\u5728React Native\u6574\u4f53\u67b6\u6784\u4e2d\u7684\u4f4d\u7f6e\u548c\u5de5\u4f5c\u6d41\u7a0b&#xff1a;<\/p>\n<p>  #mermaid-svg-awHTwPZcBYdG16fo{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-awHTwPZcBYdG16fo .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-awHTwPZcBYdG16fo .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-awHTwPZcBYdG16fo .error-icon{fill:#552222;}#mermaid-svg-awHTwPZcBYdG16fo .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-awHTwPZcBYdG16fo .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-awHTwPZcBYdG16fo .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-awHTwPZcBYdG16fo .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-awHTwPZcBYdG16fo .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-awHTwPZcBYdG16fo .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-awHTwPZcBYdG16fo .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-awHTwPZcBYdG16fo .marker{fill:#333333;stroke:#333333;}#mermaid-svg-awHTwPZcBYdG16fo .marker.cross{stroke:#333333;}#mermaid-svg-awHTwPZcBYdG16fo svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-awHTwPZcBYdG16fo p{margin:0;}#mermaid-svg-awHTwPZcBYdG16fo .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-awHTwPZcBYdG16fo .cluster-label text{fill:#333;}#mermaid-svg-awHTwPZcBYdG16fo .cluster-label span{color:#333;}#mermaid-svg-awHTwPZcBYdG16fo .cluster-label span p{background-color:transparent;}#mermaid-svg-awHTwPZcBYdG16fo .label text,#mermaid-svg-awHTwPZcBYdG16fo span{fill:#333;color:#333;}#mermaid-svg-awHTwPZcBYdG16fo .node rect,#mermaid-svg-awHTwPZcBYdG16fo .node circle,#mermaid-svg-awHTwPZcBYdG16fo .node ellipse,#mermaid-svg-awHTwPZcBYdG16fo .node polygon,#mermaid-svg-awHTwPZcBYdG16fo .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-awHTwPZcBYdG16fo .rough-node .label text,#mermaid-svg-awHTwPZcBYdG16fo .node .label text,#mermaid-svg-awHTwPZcBYdG16fo .image-shape .label,#mermaid-svg-awHTwPZcBYdG16fo .icon-shape .label{text-anchor:middle;}#mermaid-svg-awHTwPZcBYdG16fo .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-awHTwPZcBYdG16fo .rough-node .label,#mermaid-svg-awHTwPZcBYdG16fo .node .label,#mermaid-svg-awHTwPZcBYdG16fo .image-shape .label,#mermaid-svg-awHTwPZcBYdG16fo .icon-shape .label{text-align:center;}#mermaid-svg-awHTwPZcBYdG16fo .node.clickable{cursor:pointer;}#mermaid-svg-awHTwPZcBYdG16fo .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-awHTwPZcBYdG16fo .arrowheadPath{fill:#333333;}#mermaid-svg-awHTwPZcBYdG16fo .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-awHTwPZcBYdG16fo .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-awHTwPZcBYdG16fo .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-awHTwPZcBYdG16fo .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-awHTwPZcBYdG16fo .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-awHTwPZcBYdG16fo .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-awHTwPZcBYdG16fo .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-awHTwPZcBYdG16fo .cluster text{fill:#333;}#mermaid-svg-awHTwPZcBYdG16fo .cluster span{color:#333;}#mermaid-svg-awHTwPZcBYdG16fo 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-awHTwPZcBYdG16fo .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-awHTwPZcBYdG16fo rect.text{fill:none;stroke-width:0;}#mermaid-svg-awHTwPZcBYdG16fo .icon-shape,#mermaid-svg-awHTwPZcBYdG16fo .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-awHTwPZcBYdG16fo .icon-shape p,#mermaid-svg-awHTwPZcBYdG16fo .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-awHTwPZcBYdG16fo .icon-shape rect,#mermaid-svg-awHTwPZcBYdG16fo .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-awHTwPZcBYdG16fo .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-awHTwPZcBYdG16fo .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-awHTwPZcBYdG16fo :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}#mermaid-svg-awHTwPZcBYdG16fo .platform&gt;*{fill:#ffe58f!important;stroke:#faad14!important;}#mermaid-svg-awHTwPZcBYdG16fo .platform span{fill:#ffe58f!important;stroke:#faad14!important;}<\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u521b\u5efa\u7ec4\u4ef6<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5e8f\u5217\u5316\u6d88\u606f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u521b\u5efa\u539f\u751f\u89c6\u56fe<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u6e32\u67d3<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>OpenHarmony<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>Android<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>iOS<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>JavaScript\u5c42<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>React Native Bridge<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u539f\u751f\u6a21\u5757\u7ba1\u7406\u5668<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>ActivityIndicator\u539f\u751f\u5b9e\u73b0<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5e73\u53f0\u7279\u5b9aUI\u7cfb\u7edf<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>ArkUI\u6e32\u67d3\u5f15\u64ce<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Android View\u7cfb\u7edf<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>UIKit<\/p>\n<p><\/span><\/p>\n<p>\u56fe\u8868\u8bf4\u660e&#xff1a;\u8be5\u56fe\u5c55\u793a\u4e86ActivityIndicator\u5728React Native\u67b6\u6784\u4e2d\u7684\u4f4d\u7f6e\u3002JavaScript\u5c42\u521b\u5efa\u7ec4\u4ef6\u540e&#xff0c;\u901a\u8fc7Bridge\u4f20\u9012\u5230\u539f\u751f\u5c42&#xff0c;\u6700\u7ec8\u7531\u5e73\u53f0\u7279\u5b9a\u7684UI\u7cfb\u7edf\u6e32\u67d3\u3002\u5728OpenHarmony\u73af\u5883\u4e0b&#xff0c;ActivityIndicator\u4f1a\u901a\u8fc7\u9002\u914d\u5c42\u8f6c\u6362\u4e3aArkUI\u53ef\u8bc6\u522b\u7684\u52a0\u8f7d\u6307\u793a\u5668\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;OpenHarmony\u7684\u9002\u914d\u8fc7\u7a0b\u9700\u8981\u5904\u7406\u6837\u5f0f\u8f6c\u6362\u548c\u52a8\u753b\u673a\u5236\u7684\u5dee\u5f02&#xff0c;\u8fd9\u662f\u8de8\u5e73\u53f0\u5b9e\u73b0\u7684\u5173\u952e\u6311\u6218\u3002<\/p>\n<h4>\u9002\u7528\u573a\u666f\u5206\u6790<\/h4>\n<p>ActivityIndicator\u9002\u7528\u4e8e\u591a\u79cd\u573a\u666f&#xff0c;\u4f46\u4e0d\u540c\u573a\u666f\u4e0b\u5e94\u91c7\u7528\u4e0d\u540c\u7684\u5b9e\u73b0\u7b56\u7565\u3002\u4ee5\u4e0b\u8868\u683c\u8be6\u7ec6\u5217\u51fa\u4e86\u5e38\u89c1\u4f7f\u7528\u573a\u666f\u53ca\u5176\u6700\u4f73\u5b9e\u8df5&#xff1a;<\/p>\n<table>\n<tr>\u4f7f\u7528\u573a\u666f\u63a8\u8350\u5b9e\u73b0\u65b9\u5f0f\u6ce8\u610f\u4e8b\u9879OpenHarmony\u9002\u914d\u8981\u70b9<\/tr>\n<tbody>\n<tr>\n<td>\u77ed\u65f6\u64cd\u4f5c&#xff08;&lt;1\u79d2&#xff09;<\/td>\n<td>\u4e0d\u663e\u793aActivityIndicator<\/td>\n<td>\u907f\u514d\u95ea\u70c1\u5e72\u6270<\/td>\n<td>OpenHarmony\u8bbe\u5907\u54cd\u5e94\u8f83\u5feb&#xff0c;\u77ed\u65f6\u64cd\u4f5c\u65e0\u9700\u52a0\u8f7d\u6307\u793a<\/td>\n<\/tr>\n<tr>\n<td>\u4e2d\u7b49\u65f6\u957f\u64cd\u4f5c&#xff08;1-3\u79d2&#xff09;<\/td>\n<td>\u663e\u793a\u7b80\u5355ActivityIndicator<\/td>\n<td>\u6dfb\u52a0\u8f85\u52a9\u6587\u5b57\u8bf4\u660e<\/td>\n<td>\u8c03\u6574\u52a8\u753b\u901f\u5ea6\u9002\u914dHarmonyOS\u8bbe\u8ba1\u89c4\u8303<\/td>\n<\/tr>\n<tr>\n<td>\u957f\u65f6\u64cd\u4f5c&#xff08;&gt;3\u79d2&#xff09;<\/td>\n<td>\u7ed3\u5408ProgressView\u6216\u5206\u6b65\u6307\u793a<\/td>\n<td>\u63d0\u4f9b\u8fdb\u5ea6\u767e\u5206\u6bd4\u6216\u6b65\u9aa4\u63d0\u793a<\/td>\n<td>\u9700\u8981\u81ea\u5b9a\u4e49\u7ec4\u4ef6&#xff0c;\u539f\u751fActivityIndicator\u4e0d\u652f\u6301\u8fdb\u5ea6<\/td>\n<\/tr>\n<tr>\n<td>\u7f51\u7edc\u8bf7\u6c42<\/td>\n<td>\u7ed3\u5408\u9519\u8bef\u5904\u7406\u673a\u5236<\/td>\n<td>\u8bbe\u7f6e\u8d85\u65f6\u548c\u91cd\u8bd5\u9009\u9879<\/td>\n<td>OpenHarmony\u7f51\u7edc\u73af\u5883\u53ef\u80fd\u4e0d\u7a33\u5b9a&#xff0c;\u9700\u589e\u52a0\u8d85\u65f6\u65f6\u95f4<\/td>\n<\/tr>\n<tr>\n<td>\u5217\u8868\u52a0\u8f7d\u66f4\u591a<\/td>\n<td>\u5e95\u90e8\u52a0\u8f7d\u6307\u793a\u5668<\/td>\n<td>\u4fdd\u6301\u5217\u8868\u6eda\u52a8\u6d41\u7545\u6027<\/td>\n<td>\u907f\u514d\u5728\u5217\u8868\u5e95\u90e8\u4f7f\u7528\u8fc7\u5927ActivityIndicator\u5f71\u54cd\u6eda\u52a8\u6027\u80fd<\/td>\n<\/tr>\n<tr>\n<td>\u6a21\u6001\u52a0\u8f7d<\/td>\n<td>\u906e\u7f69\u5c42&#043;ActivityIndicator<\/td>\n<td>\u963b\u6b62\u7528\u6237\u4ea4\u4e92<\/td>\n<td>OpenHarmony\u9700\u6ce8\u610f\u906e\u7f69\u5c42\u4e0e\u7cfb\u7edfUI\u7684\u517c\u5bb9\u6027<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8868\u683c\u8bf4\u660e&#xff1a;\u8be5\u8868\u8be6\u7ec6\u5206\u6790\u4e86ActivityIndicator\u7684\u4e0d\u540c\u4f7f\u7528\u573a\u666f\u3002\u5728OpenHarmony\u73af\u5883\u4e0b&#xff0c;\u9700\u8981\u7279\u522b\u6ce8\u610f\u6a21\u6001\u52a0\u8f7d\u7684\u5b9e\u73b0&#xff0c;\u56e0\u4e3a\u9e3f\u8499\u7cfb\u7edf\u7684\u591a\u7a97\u53e3\u673a\u5236\u53ef\u80fd\u5bfc\u81f4\u906e\u7f69\u5c42\u663e\u793a\u5f02\u5e38\u3002\u6b64\u5916&#xff0c;\u7531\u4e8eOpenHarmony\u8bbe\u5907\u6027\u80fd\u5dee\u5f02\u8f83\u5927&#xff0c;\u5efa\u8bae\u5bf9\u4f4e\u7aef\u8bbe\u5907\u91c7\u7528\u7b80\u5316\u52a8\u753b\u6216\u9759\u6001\u6307\u793a\u5668\u3002<\/p>\n<h3>React Native\u4e0eOpenHarmony\u5e73\u53f0\u9002\u914d\u8981\u70b9<\/h3>\n<p>React Native for OpenHarmony\u7684\u5b9e\u73b0\u4f9d\u8d56\u4e8e&#064;react-native-oh\/react-native-harmony\u9002\u914d\u5c42&#xff0c;\u8be5\u9002\u914d\u5c42\u8d1f\u8d23\u5c06React Native\u7684\u62bd\u8c61\u7ec4\u4ef6\u8f6c\u6362\u4e3aOpenHarmony\u5e73\u53f0\u53ef\u8bc6\u522b\u7684UI\u5143\u7d20\u3002\u7406\u89e3\u8fd9\u4e00\u9002\u914d\u8fc7\u7a0b\u5bf9\u4e8e\u6709\u6548\u4f7f\u7528ActivityIndicator\u81f3\u5173\u91cd\u8981\u3002<\/p>\n<h4>\u9002\u914d\u5c42\u67b6\u6784\u89e3\u6790<\/h4>\n<p>React Native for OpenHarmony\u7684\u9002\u914d\u67b6\u6784\u91c7\u7528\u4e86\u5206\u5c42\u8bbe\u8ba1&#xff0c;\u786e\u4fdd\u6838\u5fc3\u4e1a\u52a1\u903b\u8f91\u4e0e\u5e73\u53f0\u76f8\u5173\u4ee3\u7801\u5206\u79bb\u3002\u4e0b\u56fe\u5c55\u793a\u4e86\u9002\u914d\u5c42\u7684\u6574\u4f53\u67b6\u6784&#xff1a;<\/p>\n<p>  #mermaid-svg-01ggBsrZAj7dlwLC{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-01ggBsrZAj7dlwLC .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-01ggBsrZAj7dlwLC .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-01ggBsrZAj7dlwLC .error-icon{fill:#552222;}#mermaid-svg-01ggBsrZAj7dlwLC .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-01ggBsrZAj7dlwLC .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-01ggBsrZAj7dlwLC .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-01ggBsrZAj7dlwLC .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-01ggBsrZAj7dlwLC .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-01ggBsrZAj7dlwLC .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-01ggBsrZAj7dlwLC .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-01ggBsrZAj7dlwLC .marker{fill:#333333;stroke:#333333;}#mermaid-svg-01ggBsrZAj7dlwLC .marker.cross{stroke:#333333;}#mermaid-svg-01ggBsrZAj7dlwLC svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-01ggBsrZAj7dlwLC p{margin:0;}#mermaid-svg-01ggBsrZAj7dlwLC .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-01ggBsrZAj7dlwLC .cluster-label text{fill:#333;}#mermaid-svg-01ggBsrZAj7dlwLC .cluster-label span{color:#333;}#mermaid-svg-01ggBsrZAj7dlwLC .cluster-label span p{background-color:transparent;}#mermaid-svg-01ggBsrZAj7dlwLC .label text,#mermaid-svg-01ggBsrZAj7dlwLC span{fill:#333;color:#333;}#mermaid-svg-01ggBsrZAj7dlwLC .node rect,#mermaid-svg-01ggBsrZAj7dlwLC .node circle,#mermaid-svg-01ggBsrZAj7dlwLC .node ellipse,#mermaid-svg-01ggBsrZAj7dlwLC .node polygon,#mermaid-svg-01ggBsrZAj7dlwLC .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-01ggBsrZAj7dlwLC .rough-node .label text,#mermaid-svg-01ggBsrZAj7dlwLC .node .label text,#mermaid-svg-01ggBsrZAj7dlwLC .image-shape .label,#mermaid-svg-01ggBsrZAj7dlwLC .icon-shape .label{text-anchor:middle;}#mermaid-svg-01ggBsrZAj7dlwLC .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-01ggBsrZAj7dlwLC .rough-node .label,#mermaid-svg-01ggBsrZAj7dlwLC .node .label,#mermaid-svg-01ggBsrZAj7dlwLC .image-shape .label,#mermaid-svg-01ggBsrZAj7dlwLC .icon-shape .label{text-align:center;}#mermaid-svg-01ggBsrZAj7dlwLC .node.clickable{cursor:pointer;}#mermaid-svg-01ggBsrZAj7dlwLC .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-01ggBsrZAj7dlwLC .arrowheadPath{fill:#333333;}#mermaid-svg-01ggBsrZAj7dlwLC .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-01ggBsrZAj7dlwLC .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-01ggBsrZAj7dlwLC .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-01ggBsrZAj7dlwLC .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-01ggBsrZAj7dlwLC .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-01ggBsrZAj7dlwLC .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-01ggBsrZAj7dlwLC .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-01ggBsrZAj7dlwLC .cluster text{fill:#333;}#mermaid-svg-01ggBsrZAj7dlwLC .cluster span{color:#333;}#mermaid-svg-01ggBsrZAj7dlwLC 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-01ggBsrZAj7dlwLC .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-01ggBsrZAj7dlwLC rect.text{fill:none;stroke-width:0;}#mermaid-svg-01ggBsrZAj7dlwLC .icon-shape,#mermaid-svg-01ggBsrZAj7dlwLC .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-01ggBsrZAj7dlwLC .icon-shape p,#mermaid-svg-01ggBsrZAj7dlwLC .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-01ggBsrZAj7dlwLC .icon-shape rect,#mermaid-svg-01ggBsrZAj7dlwLC .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-01ggBsrZAj7dlwLC .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-01ggBsrZAj7dlwLC .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-01ggBsrZAj7dlwLC :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>OpenHarmony\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=\"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 Native JS\u5c42<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>React Native Core<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u9002\u914d\u5c42\u63a5\u53e3<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>OpenHarmony\u539f\u751f\u5b9e\u73b0<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>UI\u7ec4\u4ef6\u9002\u914d<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6a21\u5757\u9002\u914d<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u4e8b\u4ef6\u7cfb\u7edf\u9002\u914d<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>ActivityIndicator\u9002\u914d<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6837\u5f0f\u8f6c\u6362<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u52a8\u753b\u673a\u5236<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5e73\u53f0\u7279\u6027\u5904\u7406<\/p>\n<p><\/span><\/p>\n<p>\u56fe\u8868\u8bf4\u660e&#xff1a;\u8be5\u56fe\u5c55\u793a\u4e86React Native for OpenHarmony\u7684\u9002\u914d\u5c42\u67b6\u6784\u3002ActivityIndicator\u4f5c\u4e3aUI\u7ec4\u4ef6&#xff0c;\u5176\u9002\u914d\u4e3b\u8981\u6d89\u53ca\u6837\u5f0f\u8f6c\u6362\u3001\u52a8\u753b\u673a\u5236\u548c\u5e73\u53f0\u7279\u6027\u5904\u7406\u4e09\u4e2a\u5173\u952e\u65b9\u9762\u3002\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b&#xff0c;ActivityIndicator\u7684\u9002\u914d\u9700\u8981\u5c06React Native\u7684\u6837\u5f0f\u7cfb\u7edf\u8f6c\u6362\u4e3aArkUI\u7684\u6837\u5f0f\u7cfb\u7edf&#xff0c;\u540c\u65f6\u5c06JavaScript\u52a8\u753b\u8f6c\u6362\u4e3aNative\u52a8\u753b\u4ee5\u63d0\u9ad8\u6027\u80fd\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;OpenHarmony\u7684\u52a8\u753b\u7cfb\u7edf\u4e0eAndroid\/iOS\u6709\u6240\u4e0d\u540c&#xff0c;\u9700\u8981\u7279\u522b\u5904\u7406\u5e27\u7387\u548c\u52a8\u753b\u66f2\u7ebf\u3002<\/p>\n<h4>\u901a\u4fe1\u673a\u5236\u4e0e\u7ebf\u7a0b\u6a21\u578b<\/h4>\n<p>React Native\u4e0eOpenHarmony\u4e4b\u95f4\u7684\u901a\u4fe1\u91c7\u7528\u591a\u7ebf\u7a0b\u6a21\u578b&#xff0c;\u7406\u89e3\u8fd9\u4e00\u6a21\u578b\u5bf9\u4f18\u5316ActivityIndicator\u7684\u6027\u80fd\u81f3\u5173\u91cd\u8981\u3002\u4e0b\u56fe\u5c55\u793a\u4e86\u7ec4\u4ef6\u6e32\u67d3\u8fc7\u7a0b\u4e2d\u7684\u7ebf\u7a0b\u4ea4\u4e92&#xff1a;<\/p>\n<p>     UI\u7ebf\u7a0b(OpenHarmony)<\/p>\n<p>     Bridge\u7ebf\u7a0b<\/p>\n<p>     JavaScript\u7ebf\u7a0b<\/p>\n<p>      UI\u7ebf\u7a0b(OpenHarmony)<\/p>\n<p>      Bridge\u7ebf\u7a0b<\/p>\n<p>      JavaScript\u7ebf\u7a0b<\/p>\n<p>  #mermaid-svg-wFBlaD1lVzTCucfq{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-wFBlaD1lVzTCucfq .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-wFBlaD1lVzTCucfq .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-wFBlaD1lVzTCucfq .error-icon{fill:#552222;}#mermaid-svg-wFBlaD1lVzTCucfq .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-wFBlaD1lVzTCucfq .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-wFBlaD1lVzTCucfq .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-wFBlaD1lVzTCucfq .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-wFBlaD1lVzTCucfq .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-wFBlaD1lVzTCucfq .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-wFBlaD1lVzTCucfq .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-wFBlaD1lVzTCucfq .marker{fill:#333333;stroke:#333333;}#mermaid-svg-wFBlaD1lVzTCucfq .marker.cross{stroke:#333333;}#mermaid-svg-wFBlaD1lVzTCucfq svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-wFBlaD1lVzTCucfq p{margin:0;}#mermaid-svg-wFBlaD1lVzTCucfq .actor{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-wFBlaD1lVzTCucfq text.actor&gt;tspan{fill:black;stroke:none;}#mermaid-svg-wFBlaD1lVzTCucfq .actor-line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);}#mermaid-svg-wFBlaD1lVzTCucfq .innerArc{stroke-width:1.5;stroke-dasharray:none;}#mermaid-svg-wFBlaD1lVzTCucfq .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333;}#mermaid-svg-wFBlaD1lVzTCucfq .messageLine1{stroke-width:1.5;stroke-dasharray:2,2;stroke:#333;}#mermaid-svg-wFBlaD1lVzTCucfq #arrowhead path{fill:#333;stroke:#333;}#mermaid-svg-wFBlaD1lVzTCucfq .sequenceNumber{fill:white;}#mermaid-svg-wFBlaD1lVzTCucfq #sequencenumber{fill:#333;}#mermaid-svg-wFBlaD1lVzTCucfq #crosshead path{fill:#333;stroke:#333;}#mermaid-svg-wFBlaD1lVzTCucfq .messageText{fill:#333;stroke:none;}#mermaid-svg-wFBlaD1lVzTCucfq .labelBox{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-wFBlaD1lVzTCucfq .labelText,#mermaid-svg-wFBlaD1lVzTCucfq .labelText&gt;tspan{fill:black;stroke:none;}#mermaid-svg-wFBlaD1lVzTCucfq .loopText,#mermaid-svg-wFBlaD1lVzTCucfq .loopText&gt;tspan{fill:black;stroke:none;}#mermaid-svg-wFBlaD1lVzTCucfq .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-wFBlaD1lVzTCucfq .note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-wFBlaD1lVzTCucfq .noteText,#mermaid-svg-wFBlaD1lVzTCucfq .noteText&gt;tspan{fill:black;stroke:none;}#mermaid-svg-wFBlaD1lVzTCucfq .activation0{fill:#f4f4f4;stroke:#666;}#mermaid-svg-wFBlaD1lVzTCucfq .activation1{fill:#f4f4f4;stroke:#666;}#mermaid-svg-wFBlaD1lVzTCucfq .activation2{fill:#f4f4f4;stroke:#666;}#mermaid-svg-wFBlaD1lVzTCucfq .actorPopupMenu{position:absolute;}#mermaid-svg-wFBlaD1lVzTCucfq .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-wFBlaD1lVzTCucfq .actor-man line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;}#mermaid-svg-wFBlaD1lVzTCucfq .actor-man circle,#mermaid-svg-wFBlaD1lVzTCucfq line{stroke:hsl(259.6261682243, 59.7765363128%, 87.9019607843%);fill:#ECECFF;stroke-width:2px;}#mermaid-svg-wFBlaD1lVzTCucfq :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>   \u521b\u5efaActivityIndicator\u7ec4\u4ef6<\/p>\n<p>   \u4f20\u9012\u7ec4\u4ef6\u914d\u7f6e<\/p>\n<p>   \u521b\u5efaNativeActivityIndicator<\/p>\n<p>   \u521d\u59cb\u5316\u52a8\u753b<\/p>\n<p>   \u786e\u8ba4\u521b\u5efa\u5b8c\u6210<\/p>\n<p>   \u7ec4\u4ef6ID\u8fd4\u56de<\/p>\n<p>   \u66f4\u65b0\u5c5e\u6027(size\/color)<\/p>\n<p>   \u4f20\u9012\u66f4\u65b0\u6307\u4ee4<\/p>\n<p>   \u5e94\u7528\u5c5e\u6027\u53d8\u66f4<\/p>\n<p>   \u66f4\u65b0\u786e\u8ba4<\/p>\n<p>   \u786e\u8ba4\u66f4\u65b0<\/p>\n<p>   \u9500\u6bc1\u7ec4\u4ef6<\/p>\n<p>   \u53d1\u9001\u9500\u6bc1\u6307\u4ee4<\/p>\n<p>   \u6e05\u7406\u8d44\u6e90<\/p>\n<p>   \u9500\u6bc1\u786e\u8ba4<\/p>\n<p>   \u786e\u8ba4\u9500\u6bc1<\/p>\n<p>\u56fe\u8868\u8bf4\u660e&#xff1a;\u8be5\u65f6\u5e8f\u56fe\u5c55\u793a\u4e86ActivityIndicator\u7ec4\u4ef6\u5728React Native\u4e0eOpenHarmony\u4e4b\u95f4\u7684\u5b8c\u6574\u751f\u547d\u5468\u671f\u3002\u4ece\u521b\u5efa\u3001\u66f4\u65b0\u5230\u9500\u6bc1&#xff0c;\u6bcf\u4e2a\u64cd\u4f5c\u90fd\u6d89\u53ca\u7ebf\u7a0b\u95f4\u7684\u901a\u4fe1\u3002\u5728OpenHarmony 6.0.0\u73af\u5883\u4e0b&#xff0c;\u9700\u8981\u6ce8\u610fUI\u7ebf\u7a0b\u7684\u54cd\u5e94\u6027&#xff0c;\u907f\u514d\u5728\u4e3b\u7ebf\u7a0b\u6267\u884c\u590d\u6742\u64cd\u4f5c\u5bfc\u81f4ActivityIndicator\u52a8\u753b\u5361\u987f\u3002\u7279\u522b\u5730&#xff0c;OpenHarmony\u7684UI\u7ebf\u7a0b\u4e0eReact Native\u7684UI\u7ebf\u7a0b\u5e76\u975e\u5b8c\u5168\u7b49\u540c&#xff0c;\u9002\u914d\u5c42\u9700\u8981\u8fdb\u884c\u7ebf\u7a0b\u6620\u5c04\u5904\u7406\u3002<\/p>\n<h4>\u9002\u914d\u5c42\u5173\u952e\u7ec4\u4ef6\u8868<\/h4>\n<p>\u4e0b\u8868\u8be6\u7ec6\u5217\u51fa\u4e86React Native for OpenHarmony\u9002\u914d\u5c42\u4e2d\u4e0eActivityIndicator\u76f8\u5173\u7684\u5173\u952e\u7ec4\u4ef6\u53ca\u5176\u529f\u80fd&#xff1a;<\/p>\n<table>\n<tr>\u7ec4\u4ef6\u540d\u79f0\u529f\u80fd\u63cf\u8ff0\u91cd\u8981\u6027OpenHarmony 6.0.0\u6ce8\u610f\u4e8b\u9879<\/tr>\n<tbody>\n<tr>\n<td>NativeActivityIndicator<\/td>\n<td>ActivityIndicator\u7684\u539f\u751f\u5b9e\u73b0\u7c7b<\/td>\n<td>\u9ad8<\/td>\n<td>\u9700\u8981\u7ee7\u627fOpenHarmony\u7684Component\u7c7b<\/td>\n<\/tr>\n<tr>\n<td>ActivityIndicatorViewManager<\/td>\n<td>\u7ba1\u7406ActivityIndicator\u5b9e\u4f8b\u7684\u521b\u5efa\u548c\u9500\u6bc1<\/td>\n<td>\u9ad8<\/td>\n<td>\u5fc5\u987b\u5b9e\u73b0createViewInstance\u65b9\u6cd5<\/td>\n<\/tr>\n<tr>\n<td>ActivityIndicatorProps<\/td>\n<td>\u5b9a\u4e49\u7ec4\u4ef6\u652f\u6301\u7684\u5c5e\u6027<\/td>\n<td>\u4e2d<\/td>\n<td>\u9700\u8981\u5904\u7406color\u3001size\u7b49\u5c5e\u6027\u7684\u7c7b\u578b\u8f6c\u6362<\/td>\n<\/tr>\n<tr>\n<td>ActivityIndicatorAnimation<\/td>\n<td>\u5904\u7406\u52a0\u8f7d\u52a8\u753b\u7684\u5b9e\u73b0<\/td>\n<td>\u9ad8<\/td>\n<td>OpenHarmony\u9700\u4f7f\u7528Animator\u66ff\u4ee3Lottie<\/td>\n<\/tr>\n<tr>\n<td>StyleConverter<\/td>\n<td>\u6837\u5f0f\u7cfb\u7edf\u8f6c\u6362\u5668<\/td>\n<td>\u4e2d<\/td>\n<td>\u9700\u8981\u5904\u7406\u767e\u5206\u6bd4\u5355\u4f4d\u5230\u50cf\u7d20\u7684\u8f6c\u6362<\/td>\n<\/tr>\n<tr>\n<td>EventEmiter<\/td>\n<td>\u4e8b\u4ef6\u5206\u53d1\u7cfb\u7edf<\/td>\n<td>\u4f4e<\/td>\n<td>ActivityIndicator\u901a\u5e38\u4e0d\u89e6\u53d1\u4e8b\u4ef6<\/td>\n<\/tr>\n<tr>\n<td>NativeModuleRegistry<\/td>\n<td>\u539f\u751f\u6a21\u5757\u6ce8\u518c\u8868<\/td>\n<td>\u4e2d<\/td>\n<td>\u786e\u4fddActivityIndicator\u6a21\u5757\u6b63\u786e\u6ce8\u518c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8868\u683c\u8bf4\u660e&#xff1a;\u8be5\u8868\u5217\u51fa\u4e86ActivityIndicator\u9002\u914d\u7684\u5173\u952e\u7ec4\u4ef6\u3002\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b&#xff0c;ActivityIndicatorAnimation\u7684\u5b9e\u73b0\u5c24\u4e3a\u5173\u952e&#xff0c;\u56e0\u4e3aOpenHarmony\u7684\u52a8\u753b\u7cfb\u7edf\u4e0eAndroid\/iOS\u6709\u663e\u8457\u5dee\u5f02\u3002\u9002\u914d\u5c42\u4f7f\u7528Animator API\u66ff\u4ee3\u4e86\u539f\u6709\u7684Lottie\u5b9e\u73b0&#xff0c;\u4ee5\u786e\u4fdd\u52a8\u753b\u6027\u80fd\u548c\u6d41\u7545\u5ea6\u3002\u6b64\u5916&#xff0c;StyleConverter\u9700\u8981\u7279\u522b\u5904\u7406OpenHarmony\u5bf9\u67d0\u4e9bCSS\u5355\u4f4d\u7684\u652f\u6301\u9650\u5236&#xff0c;\u4f8b\u5982\u767e\u5206\u6bd4\u5355\u4f4d\u5728\u67d0\u4e9b\u573a\u666f\u4e0b\u9700\u8981\u8f6c\u6362\u4e3a\u7edd\u5bf9\u50cf\u7d20\u503c\u3002<\/p>\n<h4>\u6837\u5f0f\u7cfb\u7edf\u5dee\u5f02\u4e0e\u8f6c\u6362<\/h4>\n<p>React Native\u4f7f\u7528\u57fa\u4e8eCSS\u7684\u6837\u5f0f\u7cfb\u7edf&#xff0c;\u800cOpenHarmony\u4f7f\u7528ArkUI\u7684\u6837\u5f0f\u7cfb\u7edf&#xff0c;\u4e24\u8005\u5b58\u5728\u663e\u8457\u5dee\u5f02\u3002\u4e0b\u8868\u5bf9\u6bd4\u4e86\u5173\u952e\u6837\u5f0f\u5c5e\u6027\u7684\u5904\u7406\u65b9\u5f0f&#xff1a;<\/p>\n<table>\n<tr>RN\u6837\u5f0f\u5c5e\u6027OpenHarmony\u7b49\u6548\u5b9e\u73b0\u8f6c\u6362\u65b9\u5f0f\u517c\u5bb9\u6027<\/tr>\n<tbody>\n<tr>\n<td>color<\/td>\n<td>.setForegroundColor()<\/td>\n<td>\u76f4\u63a5\u6620\u5c04<\/td>\n<td>\u5b8c\u5168\u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>size (\u2018small\u2019\/\u2018large\u2019)<\/td>\n<td>.setWidth()\/.setHeight()<\/td>\n<td>\u6620\u5c04\u4e3a\u5177\u4f53\u5c3a\u5bf8<\/td>\n<td>\u5b8c\u5168\u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>animating<\/td>\n<td>.setVisibility()<\/td>\n<td>\u63a7\u5236\u7ec4\u4ef6\u53ef\u89c1\u6027<\/td>\n<td>\u5b8c\u5168\u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>hidesWhenStopped<\/td>\n<td>.setVisibility()<\/td>\n<td>\u914d\u5408animating\u4f7f\u7528<\/td>\n<td>\u5b8c\u5168\u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>style.transform<\/td>\n<td>.setRotation()<\/td>\n<td>\u8f6c\u6362\u4e3a\u65cb\u8f6c\u52a8\u753b<\/td>\n<td>\u90e8\u5206\u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>style.opacity<\/td>\n<td>.setOpacity()<\/td>\n<td>\u76f4\u63a5\u6620\u5c04<\/td>\n<td>\u5b8c\u5168\u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>style.backgroundColor<\/td>\n<td>\u4e0d\u9002\u7528<\/td>\n<td>\u5ffd\u7565&#xff08;ActivityIndicator\u65e0\u80cc\u666f&#xff09;<\/td>\n<td>N\/A<\/td>\n<\/tr>\n<tr>\n<td>style.elevation<\/td>\n<td>.setZIndex()<\/td>\n<td>\u8f6c\u6362\u4e3aZ\u8f74\u987a\u5e8f<\/td>\n<td>OpenHarmony 6.0.0\u90e8\u5206\u652f\u6301<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8868\u683c\u8bf4\u660e&#xff1a;\u8be5\u8868\u8be6\u7ec6\u5bf9\u6bd4\u4e86React Native ActivityIndicator\u6837\u5f0f\u5c5e\u6027\u5728OpenHarmony\u4e0a\u7684\u8f6c\u6362\u65b9\u5f0f\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;\u5728OpenHarmony 6.0.0 (API 20)\u4e2d&#xff0c;elevation\u5c5e\u6027\u7684\u652f\u6301\u6709\u9650&#xff0c;\u4ec5\u80fd\u901a\u8fc7setZIndex()\u5b9e\u73b0\u7b80\u5355\u7684\u5c42\u7ea7\u63a7\u5236&#xff0c;\u65e0\u6cd5\u5b9e\u73b0\u9634\u5f71\u6548\u679c\u3002\u6b64\u5916&#xff0c;transform\u5c5e\u6027\u4ec5\u652f\u6301\u65cb\u8f6c\u52a8\u753b&#xff0c;\u5176\u4ed6\u53d8\u6362\u5982\u7f29\u653e\u3001\u5e73\u79fb\u9700\u8981\u901a\u8fc7\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5b9e\u73b0\u3002\u8fd9\u4e9b\u5dee\u5f02\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\u9700\u8981\u7279\u522b\u6ce8\u610f&#xff0c;\u907f\u514d\u6837\u5f0f\u8868\u73b0\u4e0d\u7b26\u5408\u9884\u671f\u3002<\/p>\n<h3>ActivityIndicator\u57fa\u7840\u7528\u6cd5<\/h3>\n<p>\u638c\u63e1ActivityIndicator\u7684\u57fa\u7840\u7528\u6cd5\u662f\u5f00\u53d1\u9ad8\u6548\u3001\u6d41\u7545\u7684OpenHarmony\u5e94\u7528\u7684\u524d\u63d0\u3002\u672c\u8282\u5c06\u8be6\u7ec6\u4ecb\u7ecd\u8be5\u7ec4\u4ef6\u7684\u6838\u5fc3\u5c5e\u6027\u3001\u6837\u5f0f\u8bbe\u7f6e\u4ee5\u53ca\u5e38\u89c1\u7528\u6cd5\u6a21\u5f0f\u3002<\/p>\n<h4>\u6838\u5fc3\u5c5e\u6027\u8be6\u89e3<\/h4>\n<p>ActivityIndicator\u7ec4\u4ef6\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u5c5e\u6027\u6765\u63a7\u5236\u5176\u5916\u89c2\u548c\u884c\u4e3a\u3002\u4e0b\u8868\u8be6\u7ec6\u5217\u51fa\u4e86\u6240\u6709\u53ef\u7528\u5c5e\u6027\u53ca\u5176\u529f\u80fd&#xff1a;<\/p>\n<table>\n<tr>\u5c5e\u6027\u540d\u7c7b\u578b\u9ed8\u8ba4\u503c\u8bf4\u660eOpenHarmony 6.0.0\u9002\u914d\u60c5\u51b5<\/tr>\n<tbody>\n<tr>\n<td>animating<\/td>\n<td>boolean<\/td>\n<td>true<\/td>\n<td>\u63a7\u5236ActivityIndicator\u662f\u5426\u663e\u793a\u52a8\u753b<\/td>\n<td>\u5b8c\u5168\u652f\u6301&#xff0c;\u63a7\u5236\u7ec4\u4ef6\u53ef\u89c1\u6027<\/td>\n<\/tr>\n<tr>\n<td>color<\/td>\n<td>ColorValue<\/td>\n<td>\u7cfb\u7edf\u9ed8\u8ba4\u989c\u8272<\/td>\n<td>\u8bbe\u7f6e\u52a0\u8f7d\u6307\u793a\u5668\u7684\u989c\u8272<\/td>\n<td>\u5b8c\u5168\u652f\u6301&#xff0c;\u652f\u6301HEX\/RGB\/Named\u989c\u8272<\/td>\n<\/tr>\n<tr>\n<td>hidesWhenStopped<\/td>\n<td>boolean<\/td>\n<td>true<\/td>\n<td>\u5f53animating\u4e3afalse\u65f6\u662f\u5426\u9690\u85cf\u7ec4\u4ef6<\/td>\n<td>\u5b8c\u5168\u652f\u6301&#xff0c;\u901a\u8fc7setVisibility\u5b9e\u73b0<\/td>\n<\/tr>\n<tr>\n<td>size<\/td>\n<td>\u2018small\u2019 | \u2018large\u2019 | number<\/td>\n<td>\u2018small\u2019<\/td>\n<td>\u8bbe\u7f6e\u52a0\u8f7d\u6307\u793a\u5668\u7684\u5927\u5c0f<\/td>\n<td>\u2018small\u2019\/&#039;large\u2019\u5b8c\u5168\u652f\u6301&#xff0c;\u6570\u503c\u5c3a\u5bf8\u90e8\u5206\u652f\u6301<\/td>\n<\/tr>\n<tr>\n<td>style<\/td>\n<td>StyleProp<\/td>\n<td>{}<\/td>\n<td>\u81ea\u5b9a\u4e49\u6837\u5f0f<\/td>\n<td>\u90e8\u5206\u652f\u6301&#xff0c;\u67d0\u4e9bCSS\u5c5e\u6027\u4e0d\u751f\u6548<\/td>\n<\/tr>\n<tr>\n<td>testID<\/td>\n<td>string<\/td>\n<td>undefined<\/td>\n<td>\u7528\u4e8e\u6d4b\u8bd5\u7684\u6807\u8bc6\u7b26<\/td>\n<td>\u5b8c\u5168\u652f\u6301&#xff0c;\u4e0d\u5f71\u54cdUI\u8868\u73b0<\/td>\n<\/tr>\n<tr>\n<td>importantForAccessibility<\/td>\n<td>\u2018auto\u2019 | \u2018yes\u2019 | \u2018no\u2019 | \u2018no-hide-descendants\u2019<\/td>\n<td>\u2018auto\u2019<\/td>\n<td>\u53ef\u8bbf\u95ee\u6027\u8bbe\u7f6e<\/td>\n<td>\u90e8\u5206\u652f\u6301&#xff0c;OpenHarmony\u53ef\u8bbf\u95ee\u6027\u652f\u6301\u6709\u9650<\/td>\n<\/tr>\n<tr>\n<td>accessibilityLabel<\/td>\n<td>string<\/td>\n<td>undefined<\/td>\n<td>\u5c4f\u5e55\u9605\u8bfb\u5668\u8bfb\u53d6\u7684\u6807\u7b7e<\/td>\n<td>\u90e8\u5206\u652f\u6301&#xff0c;\u4f9d\u8d56\u7cfb\u7edf\u53ef\u8bbf\u95ee\u6027\u670d\u52a1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8868\u683c\u8bf4\u660e&#xff1a;\u8be5\u8868\u8be6\u7ec6\u8bf4\u660e\u4e86ActivityIndicator\u7684\u6240\u6709\u5c5e\u6027\u3002\u5728OpenHarmony 6.0.0\u73af\u5883\u4e0b&#xff0c;size\u5c5e\u6027\u7684\u6570\u503c\u652f\u6301\u6709\u9650&#xff0c;\u5efa\u8bae\u4f7f\u7528\u2019small\u2019\u6216\u2019large\u2019\u9884\u5b9a\u4e49\u503c\u3002\u6b64\u5916&#xff0c;\u7531\u4e8eOpenHarmony\u7684\u53ef\u8bbf\u95ee\u6027\u652f\u6301\u4e0d\u5982Android\/iOS\u5b8c\u5584&#xff0c;importantForAccessibility\u548caccessibilityLabel\u5c5e\u6027\u7684\u6548\u679c\u53ef\u80fd\u4e0d\u5982\u9884\u671f\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;color\u5c5e\u6027\u5728OpenHarmony\u4e0a\u652f\u6301\u5b8c\u6574\u7684\u989c\u8272\u7cfb\u7edf&#xff0c;\u5305\u62ecHEX\u3001RGB\u548c\u547d\u540d\u989c\u8272&#xff0c;\u4f46\u4e0d\u652f\u6301alpha\u901a\u9053\u7684\u900f\u660e\u5ea6\u8bbe\u7f6e&#xff0c;\u9700\u8981\u901a\u8fc7\u5355\u72ec\u7684opacity\u5c5e\u6027\u63a7\u5236\u3002<\/p>\n<h4>\u5e38\u89c1\u4f7f\u7528\u6a21\u5f0f<\/h4>\n<p>ActivityIndicator\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d\u6709\u591a\u79cd\u4f7f\u7528\u6a21\u5f0f&#xff0c;\u6bcf\u79cd\u6a21\u5f0f\u9002\u7528\u4e8e\u4e0d\u540c\u7684\u573a\u666f\u3002\u4e0b\u56fe\u5c55\u793a\u4e86ActivityIndicator\u7684\u5178\u578b\u72b6\u6001\u8f6c\u6362&#xff1a;<\/p>\n<p>  #mermaid-svg-NyDr9sspqtWdKjk7{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-NyDr9sspqtWdKjk7 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-NyDr9sspqtWdKjk7 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-NyDr9sspqtWdKjk7 .error-icon{fill:#552222;}#mermaid-svg-NyDr9sspqtWdKjk7 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-NyDr9sspqtWdKjk7 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-NyDr9sspqtWdKjk7 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-NyDr9sspqtWdKjk7 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-NyDr9sspqtWdKjk7 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-NyDr9sspqtWdKjk7 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-NyDr9sspqtWdKjk7 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-NyDr9sspqtWdKjk7 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-NyDr9sspqtWdKjk7 .marker.cross{stroke:#333333;}#mermaid-svg-NyDr9sspqtWdKjk7 svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-NyDr9sspqtWdKjk7 p{margin:0;}#mermaid-svg-NyDr9sspqtWdKjk7 defs #statediagram-barbEnd{fill:#333333;stroke:#333333;}#mermaid-svg-NyDr9sspqtWdKjk7 g.stateGroup text{fill:#9370DB;stroke:none;font-size:10px;}#mermaid-svg-NyDr9sspqtWdKjk7 g.stateGroup text{fill:#333;stroke:none;font-size:10px;}#mermaid-svg-NyDr9sspqtWdKjk7 g.stateGroup .state-title{font-weight:bolder;fill:#131300;}#mermaid-svg-NyDr9sspqtWdKjk7 g.stateGroup rect{fill:#ECECFF;stroke:#9370DB;}#mermaid-svg-NyDr9sspqtWdKjk7 g.stateGroup line{stroke:#333333;stroke-width:1;}#mermaid-svg-NyDr9sspqtWdKjk7 .transition{stroke:#333333;stroke-width:1;fill:none;}#mermaid-svg-NyDr9sspqtWdKjk7 .stateGroup .composit{fill:white;border-bottom:1px;}#mermaid-svg-NyDr9sspqtWdKjk7 .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px;}#mermaid-svg-NyDr9sspqtWdKjk7 .state-note{stroke:#aaaa33;fill:#fff5ad;}#mermaid-svg-NyDr9sspqtWdKjk7 .state-note text{fill:black;stroke:none;font-size:10px;}#mermaid-svg-NyDr9sspqtWdKjk7 .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5;}#mermaid-svg-NyDr9sspqtWdKjk7 .edgeLabel .label rect{fill:#ECECFF;opacity:0.5;}#mermaid-svg-NyDr9sspqtWdKjk7 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-NyDr9sspqtWdKjk7 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-NyDr9sspqtWdKjk7 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-NyDr9sspqtWdKjk7 .edgeLabel .label text{fill:#333;}#mermaid-svg-NyDr9sspqtWdKjk7 .label div .edgeLabel{color:#333;}#mermaid-svg-NyDr9sspqtWdKjk7 .stateLabel text{fill:#131300;font-size:10px;font-weight:bold;}#mermaid-svg-NyDr9sspqtWdKjk7 .node circle.state-start{fill:#333333;stroke:#333333;}#mermaid-svg-NyDr9sspqtWdKjk7 .node .fork-join{fill:#333333;stroke:#333333;}#mermaid-svg-NyDr9sspqtWdKjk7 .node circle.state-end{fill:#9370DB;stroke:white;stroke-width:1.5;}#mermaid-svg-NyDr9sspqtWdKjk7 .end-state-inner{fill:white;stroke-width:1.5;}#mermaid-svg-NyDr9sspqtWdKjk7 .node rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-NyDr9sspqtWdKjk7 .node polygon{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-NyDr9sspqtWdKjk7 #statediagram-barbEnd{fill:#333333;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-cluster rect{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-NyDr9sspqtWdKjk7 .cluster-label,#mermaid-svg-NyDr9sspqtWdKjk7 .nodeLabel{color:#131300;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-cluster rect.outer{rx:5px;ry:5px;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-state .divider{stroke:#9370DB;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-state .title-state{rx:5px;ry:5px;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-cluster.statediagram-cluster .inner{fill:white;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-cluster.statediagram-cluster-alt .inner{fill:#f0f0f0;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-cluster .inner{rx:0;ry:0;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-state rect.basic{rx:5px;ry:5px;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#f0f0f0;}#mermaid-svg-NyDr9sspqtWdKjk7 .note-edge{stroke-dasharray:5;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-note rect{fill:#fff5ad;stroke:#aaaa33;stroke-width:1px;rx:0;ry:0;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-note text{fill:black;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram-note .nodeLabel{color:black;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagram .edgeLabel{color:red;}#mermaid-svg-NyDr9sspqtWdKjk7 #dependencyStart,#mermaid-svg-NyDr9sspqtWdKjk7 #dependencyEnd{fill:#333333;stroke:#333333;stroke-width:1;}#mermaid-svg-NyDr9sspqtWdKjk7 .statediagramTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-NyDr9sspqtWdKjk7 :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>\u5f00\u59cb\u52a0\u8f7d(animating&#061;true)<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u52a0\u8f7d\u5b8c\u6210(animating&#061;false)<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>hidesWhenStopped&#061;true<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>hidesWhenStopped&#061;false<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u91cd\u65b0\u5f00\u59cb\u52a0\u8f7d<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Hidden<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Animating<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Stopped<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>Visible<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>OpenHarmony 6.0.0\u4e2d&#xff1a;- \u52a8\u753b\u5e27\u7387\u56fa\u5b9a\u4e3a30fps- \u65e0\u6cd5\u81ea\u5b9a\u4e49\u52a8\u753b\u66f2\u7ebf- \u52a8\u753b\u8d44\u6e90\u5360\u7528\u8f83\u4f4e<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>OpenHarmony 6.0.0\u4e2d&#xff1a;- \u7ec4\u4ef6\u5b8c\u5168\u4ece\u89c6\u56fe\u6811\u79fb\u9664- \u6216\u8bbe\u7f6evisibility\u4e3aVisibility.Hidden- \u8282\u7701\u5185\u5b58\u548cGPU\u8d44\u6e90<\/p>\n<p><\/span><\/p>\n<p>\u56fe\u8868\u8bf4\u660e&#xff1a;\u8be5\u72b6\u6001\u56fe\u5c55\u793a\u4e86ActivityIndicator\u7684\u751f\u547d\u5468\u671f\u548c\u72b6\u6001\u8f6c\u6362\u3002\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b&#xff0c;\u52a8\u753b\u5b9e\u73b0\u4f7f\u7528\u4e86\u7cfb\u7edf\u63d0\u4f9b\u7684\u65cb\u8f6c\u52a8\u753b&#xff0c;\u5e27\u7387\u56fa\u5b9a\u4e3a30fps&#xff0c;\u8fd9\u662f\u4e3a\u4e86\u5e73\u8861\u6027\u80fd\u548c\u6d41\u7545\u5ea6\u3002\u5f53hidesWhenStopped\u4e3atrue\u65f6&#xff0c;\u7ec4\u4ef6\u4f1a\u4ece\u89c6\u56fe\u6811\u4e2d\u79fb\u9664&#xff0c;\u800c\u975e\u4ec5\u4ec5\u9690\u85cf&#xff0c;\u8fd9\u6709\u52a9\u4e8e\u8282\u7701\u4f4e\u7aef\u8bbe\u5907\u7684\u8d44\u6e90\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;OpenHarmony\u7684\u52a8\u753b\u7cfb\u7edf\u4e0d\u652f\u6301\u81ea\u5b9a\u4e49\u52a8\u753b\u66f2\u7ebf&#xff0c;\u56e0\u6b64\u65e0\u6cd5\u5b9e\u73b0\u7c7b\u4f3ciOS\u7684\u5f39\u6027\u52a8\u753b\u6548\u679c\u3002<\/p>\n<h4>\u6837\u5f0f\u8bbe\u7f6e\u6700\u4f73\u5b9e\u8df5<\/h4>\n<p>\u5728OpenHarmony\u73af\u5883\u4e0b\u4f7f\u7528ActivityIndicator\u65f6&#xff0c;\u6837\u5f0f\u8bbe\u7f6e\u9700\u8981\u9075\u5faa\u4e00\u4e9b\u6700\u4f73\u5b9e\u8df5&#xff1a;<\/p>\n<li>\u989c\u8272\u9009\u62e9&#xff1a;\u4f7f\u7528\u4e0e\u5e94\u7528\u4e3b\u9898\u4e00\u81f4\u7684\u989c\u8272&#xff0c;\u5efa\u8bae\u4ece\u4e3b\u9898\u7cfb\u7edf\u83b7\u53d6<\/li>\n<li>\u5c3a\u5bf8\u9009\u62e9&#xff1a;\u6839\u636e\u4f7f\u7528\u573a\u666f\u9009\u62e9\u5408\u9002\u7684\u5c3a\u5bf8&#xff0c;\u907f\u514d\u8fc7\u5927\u6216\u8fc7\u5c0f<\/li>\n<li>\u5e03\u5c40\u8003\u8651&#xff1a;\u786e\u4fdd\u5468\u56f4\u6709\u8db3\u591f\u7684\u7a7a\u767d\u533a\u57df&#xff0c;\u907f\u514d\u4e0e\u5176\u4ed6\u5143\u7d20\u91cd\u53e0<\/li>\n<li>\u54cd\u5e94\u5f0f\u8bbe\u8ba1&#xff1a;\u8003\u8651\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u548c\u65b9\u5411\u7684\u9002\u914d<\/li>\n<li>\u6027\u80fd\u4f18\u5316&#xff1a;\u907f\u514d\u5728\u5217\u8868\u4e2d\u9891\u7e41\u521b\u5efa\u548c\u9500\u6bc1ActivityIndicator<\/li>\n<p>\u4e0b\u8868\u5bf9\u6bd4\u4e86\u57fa\u7840\u7528\u6cd5\u4e0e\u8fdb\u9636\u7528\u6cd5\u7684\u5dee\u5f02&#xff1a;<\/p>\n<table>\n<tr>\u65b9\u9762\u57fa\u7840\u7528\u6cd5\u8fdb\u9636\u7528\u6cd5OpenHarmony\u4f18\u5316\u5efa\u8bae<\/tr>\n<tbody>\n<tr>\n<td>\u989c\u8272\u8bbe\u7f6e<\/td>\n<td>\u4f7f\u7528\u56fa\u5b9a\u989c\u8272\u503c<\/td>\n<td>\u4ece\u4e3b\u9898\u7cfb\u7edf\u83b7\u53d6\u989c\u8272<\/td>\n<td>\u4f7f\u7528&#064;ohos.theme\u83b7\u53d6\u7cfb\u7edf\u4e3b\u9898\u8272<\/td>\n<\/tr>\n<tr>\n<td>\u5c3a\u5bf8\u8bbe\u7f6e<\/td>\n<td>\u4f7f\u7528\u2019small\u2019\/\u2018large\u2019<\/td>\n<td>\u52a8\u6001\u8ba1\u7b97\u5c3a\u5bf8<\/td>\n<td>\u6839\u636e\u8bbe\u5907dpi\u52a8\u6001\u8c03\u6574\u5c3a\u5bf8<\/td>\n<\/tr>\n<tr>\n<td>\u5e03\u5c40\u65b9\u5f0f<\/td>\n<td>\u76f4\u63a5\u653e\u7f6e\u5728\u5bb9\u5668\u4e2d<\/td>\n<td>\u7ed3\u5408\u906e\u7f69\u5c42\u4f7f\u7528<\/td>\n<td>\u4f7f\u7528Flex\u5e03\u5c40\u786e\u4fdd\u5c45\u4e2d<\/td>\n<\/tr>\n<tr>\n<td>\u72b6\u6001\u7ba1\u7406<\/td>\n<td>\u76f4\u63a5\u63a7\u5236animating<\/td>\n<td>\u4e0e\u72b6\u6001\u7ba1\u7406\u5e93\u96c6\u6210<\/td>\n<td>\u4f7f\u7528ArkUI\u72b6\u6001\u7ba1\u7406\u4f18\u5316\u6027\u80fd<\/td>\n<\/tr>\n<tr>\n<td>\u591a\u5b9e\u4f8b\u5904\u7406<\/td>\n<td>\u7b80\u5355\u6761\u4ef6\u6e32\u67d3<\/td>\n<td>\u6c60\u5316\u590d\u7528\u5b9e\u4f8b<\/td>\n<td>\u907f\u514d\u9891\u7e41\u521b\u5efa\u9500\u6bc1\u7ec4\u4ef6<\/td>\n<\/tr>\n<tr>\n<td>\u53ef\u8bbf\u95ee\u6027<\/td>\n<td>\u57fa\u672c\u652f\u6301<\/td>\n<td>\u6dfb\u52a0\u8be6\u7ec6\u63cf\u8ff0<\/td>\n<td>OpenHarmony\u73af\u5883\u4e0b\u53ef\u8bbf\u95ee\u6027\u652f\u6301\u6709\u9650<\/td>\n<\/tr>\n<tr>\n<td>\u6027\u80fd\u76d1\u63a7<\/td>\n<td>\u65e0<\/td>\n<td>\u8bb0\u5f55\u52a0\u8f7d\u65f6\u95f4<\/td>\n<td>\u6dfb\u52a0\u6027\u80fd\u57cb\u70b9\u4f18\u5316\u7528\u6237\u4f53\u9a8c<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8868\u683c\u8bf4\u660e&#xff1a;\u8be5\u8868\u5bf9\u6bd4\u4e86ActivityIndicator\u7684\u57fa\u7840\u7528\u6cd5\u4e0e\u8fdb\u9636\u7528\u6cd5\u3002\u5728OpenHarmony 6.0.0\u73af\u5883\u4e0b&#xff0c;\u7279\u522b\u63a8\u8350\u4f7f\u7528\u4e3b\u9898\u7cfb\u7edf\u83b7\u53d6\u989c\u8272&#xff0c;\u8fd9\u80fd\u786e\u4fdd\u4e0e\u7cfb\u7edfUI\u7684\u4e00\u81f4\u6027\u3002\u7531\u4e8eOpenHarmony\u8bbe\u5907\u6027\u80fd\u5dee\u5f02\u8f83\u5927&#xff0c;\u5efa\u8bae\u5bf9\u4f4e\u7aef\u8bbe\u5907\u91c7\u7528\u7b80\u5316\u52a8\u753b\u6216\u9759\u6001\u6307\u793a\u5668\u3002\u6b64\u5916&#xff0c;\u907f\u514d\u5728\u5217\u8868\u4e2d\u9891\u7e41\u521b\u5efa\u548c\u9500\u6bc1ActivityIndicator\u5b9e\u4f8b&#xff0c;\u53ef\u4ee5\u663e\u8457\u63d0\u5347\u6eda\u52a8\u6027\u80fd&#xff0c;\u7279\u522b\u662f\u5728\u5185\u5b58\u6709\u9650\u7684\u8bbe\u5907\u4e0a\u3002<\/p>\n<h3>ActivityIndicator\u6848\u4f8b\u5c55\u793a<\/h3>\n<p>\u4ee5\u4e0b\u662f\u4e00\u4e2a\u5b8c\u6574\u7684ActivityIndicator\u4f7f\u7528\u793a\u4f8b&#xff0c;\u5c55\u793a\u4e86\u5982\u4f55\u5728OpenHarmony 6.0.0\u73af\u5883\u4e0b\u5b9e\u73b0\u5e26\u906e\u7f69\u7684\u52a0\u8f7d\u6307\u793a\u5668\u3002\u8be5\u793a\u4f8b\u57fa\u4e8eAtomGitDemos\u9879\u76ee&#xff0c;\u5df2\u5728OpenHarmony 6.0.0\u8bbe\u5907\u4e0a\u9a8c\u8bc1\u901a\u8fc7\u3002<\/p>\n<p><span class=\"token comment\">\/**<br \/>\n * ActivityIndicator\u52a0\u8f7d\u906e\u7f69\u793a\u4f8b<br \/>\n *<br \/>\n * &#064;platform OpenHarmony 6.0.0 (API 20)<br \/>\n * &#064;react-native 0.72.5<br \/>\n * &#064;typescript 4.8.4<br \/>\n *\/<\/span><br \/>\n<span class=\"token keyword\">import<\/span> React<span class=\"token punctuation\">,<\/span> <span class=\"token punctuation\">{<\/span> useState<span class=\"token punctuation\">,<\/span> useEffect <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  Button<span class=\"token punctuation\">,<\/span><br \/>\n  ActivityIndicator<span class=\"token punctuation\">,<\/span><br \/>\n  StyleSheet<span class=\"token punctuation\">,<\/span><br \/>\n  Platform<span class=\"token punctuation\">,<\/span><br \/>\n  SafeAreaView<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 function-variable function\">LoadingMaskExample<\/span> <span class=\"token operator\">&#061;<\/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\">const<\/span> <span class=\"token punctuation\">[<\/span>isLoading<span class=\"token punctuation\">,<\/span> setIsLoading<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><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">[<\/span>data<span class=\"token punctuation\">,<\/span> setData<span class=\"token punctuation\">]<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token generic-function\"><span class=\"token function\">useState<\/span><span class=\"token generic class-name\"><span class=\"token operator\">&lt;<\/span><span class=\"token builtin\">string<\/span> <span class=\"token operator\">|<\/span> <span class=\"token keyword\">null<\/span><span class=\"token operator\">&gt;<\/span><\/span><\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">null<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u6a21\u62df\u6570\u636e\u52a0\u8f7d<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">loadData<\/span> <span class=\"token operator\">&#061;<\/span> <span class=\"token keyword\">async<\/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\">setIsLoading<\/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\">setData<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">null<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>    <span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token comment\">\/\/ \u6a21\u62df\u7f51\u7edc\u8bf7\u6c42&#xff0c;\u589e\u52a02\u79d2\u5ef6\u8fdf<\/span><br \/>\n      <span class=\"token keyword\">await<\/span> <span class=\"token keyword\">new<\/span> <span class=\"token class-name\"><span class=\"token builtin\">Promise<\/span><\/span><span class=\"token punctuation\">(<\/span>resolve <span class=\"token operator\">&#061;&gt;<\/span> <span class=\"token function\">setTimeout<\/span><span class=\"token punctuation\">(<\/span>resolve<span class=\"token punctuation\">,<\/span> <span class=\"token number\">2000<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>      <span class=\"token comment\">\/\/ \u6a21\u62df\u6210\u529f\u83b7\u53d6\u6570\u636e<\/span><br \/>\n      <span class=\"token function\">setData<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\u6570\u636e\u52a0\u8f7d\u6210\u529f&#xff01;\u8fd9\u662f\u4ece\u6a21\u62dfAPI\u83b7\u53d6\u7684\u5185\u5bb9\u3002&#039;<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>error<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token builtin\">console<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">&#039;\u6570\u636e\u52a0\u8f7d\u5931\u8d25:&#039;<\/span><span class=\"token punctuation\">,<\/span> error<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br \/>\n    <span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">finally<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n      <span class=\"token function\">setIsLoading<\/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><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u521d\u59cb\u52a0\u8f7d<\/span><br \/>\n  <span class=\"token function\">useEffect<\/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\">loadData<\/span><span class=\"token punctuation\">(<\/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><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p>\n<p>  <span class=\"token comment\">\/\/ \u6e32\u67d3\u52a0\u8f7d\u906e\u7f69<\/span><br \/>\n  <span class=\"token keyword\">const<\/span> <span class=\"token function-variable function\">renderLoadingMask<\/span> <span class=\"token operator\">&#061;<\/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>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>mask<span class=\"token punctuation\">}<\/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>loaderContainer<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><br \/>\n        <span class=\"token operator\">&lt;<\/span>ActivityIndicator<br \/>\n          size<span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#034;large&#034;<\/span><br \/>\n          color<span class=\"token operator\">&#061;<\/span><span class=\"token string\">&#034;#0078d7&#034;<\/span><br \/>\n          animating<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">true<\/span><span class=\"token punctuation\">}<\/span><br \/>\n          hidesWhenStopped<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span><span class=\"token boolean\">false<\/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>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>\u6570\u636e\u52a0\u8f7d\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 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><\/p>\n<p>  <span class=\"token keyword\">return<\/span> <span class=\"token punctuation\">(<\/span><br \/>\n    <span class=\"token operator\">&lt;<\/span>SafeAreaView 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 operator\">&lt;<\/span>View style<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>styles<span class=\"token punctuation\">.<\/span>content<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><span class=\"token operator\">&gt;<\/span>ActivityIndicator\u52a0\u8f7d\u906e\u7f69\u793a\u4f8b<span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>Text<span class=\"token operator\">&gt;<\/span><\/p>\n<p>        <span class=\"token punctuation\">{<\/span>data <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>result<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span><span class=\"token punctuation\">{<\/span>data<span class=\"token punctuation\">}<\/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>placeholder<span class=\"token punctuation\">}<\/span><span class=\"token operator\">&gt;<\/span>\u7b49\u5f85\u6570\u636e\u52a0\u8f7d<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 punctuation\">}<\/span><\/p>\n<p>        <span class=\"token operator\">&lt;<\/span>Button<br \/>\n          title<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>isLoading <span class=\"token operator\">?<\/span> <span class=\"token string\">&#034;\u52a0\u8f7d\u4e2d&#8230;&#034;<\/span> <span class=\"token operator\">:<\/span> <span class=\"token string\">&#034;\u91cd\u65b0\u52a0\u8f7d\u6570\u636e&#034;<\/span><span class=\"token punctuation\">}<\/span><br \/>\n          onPress<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>loadData<span class=\"token punctuation\">}<\/span><br \/>\n          disabled<span class=\"token operator\">&#061;<\/span><span class=\"token punctuation\">{<\/span>isLoading<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><\/p>\n<p>      <span class=\"token punctuation\">{<\/span>isLoading <span class=\"token operator\">&amp;&amp;<\/span> <span class=\"token function\">renderLoadingMask<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">}<\/span><br \/>\n    <span class=\"token operator\">&lt;<\/span><span class=\"token operator\">\/<\/span>SafeAreaView<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  content<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    padding<span class=\"token operator\">:<\/span> <span class=\"token number\">20<\/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    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  title<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    marginBottom<span class=\"token operator\">:<\/span> <span class=\"token number\">20<\/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  result<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    textAlign<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;center&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    marginBottom<span class=\"token operator\">:<\/span> <span class=\"token number\">30<\/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    lineHeight<span class=\"token operator\">:<\/span> <span class=\"token number\">24<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  placeholder<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;#888&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    marginBottom<span class=\"token operator\">:<\/span> <span class=\"token number\">30<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    fontStyle<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;italic&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  mask<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    <span class=\"token operator\">&#8230;<\/span>StyleSheet<span class=\"token punctuation\">.<\/span>absoluteFillObject<span class=\"token punctuation\">,<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;rgba(0, 0, 0, 0.5)&#039;<\/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    alignItems<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;center&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    zIndex<span class=\"token operator\">:<\/span> <span class=\"token number\">1000<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">,<\/span><br \/>\n  loaderContainer<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    backgroundColor<span class=\"token operator\">:<\/span> <span class=\"token string\">&#039;white&#039;<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    padding<span class=\"token operator\">:<\/span> <span class=\"token number\">20<\/span><span class=\"token punctuation\">,<\/span><br \/>\n    borderRadius<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/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  loadingText<span class=\"token operator\">:<\/span> <span class=\"token punctuation\">{<\/span><br \/>\n    marginTop<span class=\"token operator\">:<\/span> <span class=\"token number\">10<\/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;#333&#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> LoadingMaskExample<span class=\"token punctuation\">;<\/span><\/p>\n<p>\u4ee3\u7801\u8bf4\u660e&#xff1a;\u8be5\u793a\u4f8b\u5b9e\u73b0\u4e86\u4e00\u4e2a\u5e26\u906e\u7f69\u7684ActivityIndicator\u52a0\u8f7d\u6307\u793a\u5668\u3002\u5173\u952e\u70b9\u5305\u62ec&#xff1a;1) \u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\u5b9e\u73b0\u5168\u5c4f\u906e\u7f69&#xff1b;2) \u7ed3\u5408animating\u548chidesWhenStopped\u5c5e\u6027\u63a7\u5236\u663e\u793a&#xff1b;3) \u4f7f\u7528Platform\u6a21\u5757\u786e\u4fdd\u8de8\u5e73\u53f0\u517c\u5bb9\u6027&#xff1b;4) \u91c7\u7528SafeAreaView\u9002\u914d\u4e0d\u540c\u8bbe\u5907&#xff1b;5) \u901a\u8fc7zIndex\u786e\u4fdd\u906e\u7f69\u5c42\u5728\u6700\u4e0a\u5c42\u3002\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b&#xff0c;\u8be5\u5b9e\u73b0\u80fd\u6b63\u786e\u663e\u793a\u52a0\u8f7d\u906e\u7f69&#xff0c;\u4e14\u4e0d\u4f1a\u5f71\u54cd\u5e95\u5c42UI\u7684\u4ea4\u4e92\u3002\u6ce8\u610f&#xff1a;color\u5c5e\u6027\u4f7f\u7528\u4e86\u5341\u516d\u8fdb\u5236\u989c\u8272\u503c&#xff0c;\u8fd9\u662fOpenHarmony\u5b8c\u5168\u652f\u6301\u7684\u683c\u5f0f\u3002<\/p>\n<h3>OpenHarmony 6.0.0\u5e73\u53f0\u7279\u5b9a\u6ce8\u610f\u4e8b\u9879<\/h3>\n<p>\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u4f7f\u7528ActivityIndicator\u65f6&#xff0c;\u9700\u8981\u7279\u522b\u6ce8\u610f\u4e00\u4e9b\u5e73\u53f0\u7279\u5b9a\u7684\u95ee\u9898\u548c\u9650\u5236\u3002\u8fd9\u4e9b\u6ce8\u610f\u4e8b\u9879\u5bf9\u4e8e\u786e\u4fdd\u5e94\u7528\u7684\u7a33\u5b9a\u6027\u548c\u7528\u6237\u4f53\u9a8c\u81f3\u5173\u91cd\u8981\u3002<\/p>\n<h4>\u5e73\u53f0\u5dee\u5f02\u4e0e\u9650\u5236<\/h4>\n<p>OpenHarmony 6.0.0\u5bf9ActivityIndicator\u7684\u652f\u6301\u4e0e\u6807\u51c6React Native\u73af\u5883\u5b58\u5728\u4e00\u4e9b\u5dee\u5f02\u3002\u4e0b\u8868\u5217\u51fa\u4e86\u5173\u952e\u5dee\u5f02\u70b9&#xff1a;<\/p>\n<table>\n<tr>\u7279\u6027React Native\u6807\u51c6\u5b9e\u73b0OpenHarmony 6.0.0\u5b9e\u73b0\u5f71\u54cd\u4e0e\u89e3\u51b3\u65b9\u6848<\/tr>\n<tbody>\n<tr>\n<td>\u52a8\u753b\u5e27\u7387<\/td>\n<td>60fps (\u8bbe\u5907\u652f\u6301\u65f6)<\/td>\n<td>\u56fa\u5b9a30fps<\/td>\n<td>\u52a8\u753b\u7565\u663e\u5361\u987f&#xff0c;\u907f\u514d\u4f9d\u8d56\u7cbe\u786e\u52a8\u753b\u65f6\u5e8f<\/td>\n<\/tr>\n<tr>\n<td>\u81ea\u5b9a\u4e49\u52a8\u753b<\/td>\n<td>\u652f\u6301Lottie\u7b49\u9ad8\u7ea7\u52a8\u753b<\/td>\n<td>\u4ec5\u652f\u6301\u57fa\u672c\u65cb\u8f6c\u52a8\u753b<\/td>\n<td>\u9700\u8981\u81ea\u5b9a\u4e49\u7ec4\u4ef6\u5b9e\u73b0\u590d\u6742\u52a8\u753b<\/td>\n<\/tr>\n<tr>\n<td>\u989c\u8272\u900f\u660e\u5ea6<\/td>\n<td>\u652f\u6301RGBA\u5b8c\u6574\u900f\u660e\u5ea6<\/td>\n<td>\u4ec5\u652f\u6301\u6574\u4f53opacity\u63a7\u5236<\/td>\n<td>\u901a\u8fc7opacity\u5c5e\u6027\u5355\u72ec\u8bbe\u7f6e\u900f\u660e\u5ea6<\/td>\n<\/tr>\n<tr>\n<td>\u5c3a\u5bf8\u63a7\u5236<\/td>\n<td>\u652f\u6301\u7cbe\u786e\u6570\u503c\u5c3a\u5bf8<\/td>\n<td>\u2018small\u2019\/&#039;large\u2019\u6620\u5c04\u4e3a\u56fa\u5b9a\u5c3a\u5bf8<\/td>\n<td>\u907f\u514d\u4f7f\u7528\u6570\u503c\u5c3a\u5bf8&#xff0c;\u6539\u7528\u9884\u5b9a\u4e49\u503c<\/td>\n<\/tr>\n<tr>\n<td>\u906e\u7f69\u5c42\u6027\u80fd<\/td>\n<td>\u901a\u5e38\u826f\u597d<\/td>\n<td>\u4f4e\u7aef\u8bbe\u5907\u53ef\u80fd\u5361\u987f<\/td>\n<td>\u7b80\u5316\u906e\u7f69\u5c42\u6837\u5f0f&#xff0c;\u51cf\u5c11\u8fc7\u5ea6\u7ed8\u5236<\/td>\n<\/tr>\n<tr>\n<td>\u7cfb\u7edf\u4e3b\u9898\u96c6\u6210<\/td>\n<td>\u6709\u9650\u652f\u6301<\/td>\n<td>\u53ef\u901a\u8fc7&#064;ohos.theme\u83b7\u53d6\u7cfb\u7edf\u4e3b\u9898<\/td>\n<td>\u5efa\u8bae\u4f7f\u7528\u7cfb\u7edf\u4e3b\u9898\u8272\u4fdd\u6301\u4e00\u81f4\u6027<\/td>\n<\/tr>\n<tr>\n<td>\u53ef\u8bbf\u95ee\u6027\u652f\u6301<\/td>\n<td>\u5b8c\u5584<\/td>\n<td>\u57fa\u7840\u652f\u6301&#xff0c;\u529f\u80fd\u6709\u9650<\/td>\n<td>\u6dfb\u52a0\u8f85\u52a9\u6587\u672c\u8bf4\u660e\u52a0\u8f7d\u72b6\u6001<\/td>\n<\/tr>\n<tr>\n<td>\u591a\u7a97\u53e3\u652f\u6301<\/td>\n<td>\u4e0d\u9002\u7528<\/td>\n<td>\u9700\u5904\u7406\u591a\u7a97\u53e3\u573a\u666f<\/td>\n<td>\u786e\u4fdd\u906e\u7f69\u5c42\u4ec5\u8986\u76d6\u5f53\u524d\u7a97\u53e3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8868\u683c\u8bf4\u660e&#xff1a;\u8be5\u8868\u8be6\u7ec6\u5bf9\u6bd4\u4e86ActivityIndicator\u5728\u6807\u51c6React Native\u4e0eOpenHarmony 6.0.0\u73af\u5883\u4e0b\u7684\u5dee\u5f02\u3002\u6700\u663e\u8457\u7684\u5dee\u5f02\u662f\u52a8\u753b\u5e27\u7387\u9650\u5236\u572830fps&#xff0c;\u8fd9\u662f\u4e3a\u4e86\u5e73\u8861\u6027\u80fd\u548c\u7535\u6c60\u6d88\u8017\u3002\u5728\u4f4e\u7aefOpenHarmony\u8bbe\u5907\u4e0a&#xff0c;\u5efa\u8bae\u4f7f\u7528\u2019small\u2019\u5c3a\u5bf8\u5e76\u7b80\u5316\u906e\u7f69\u5c42\u6837\u5f0f&#xff0c;\u4ee5\u907f\u514dUI\u5361\u987f\u3002\u6b64\u5916&#xff0c;\u7531\u4e8eOpenHarmony\u7684\u591a\u7a97\u53e3\u7279\u6027&#xff0c;\u9700\u8981\u786e\u4fddActivityIndicator\u906e\u7f69\u5c42\u4ec5\u8986\u76d6\u5f53\u524d\u5e94\u7528\u7a97\u53e3&#xff0c;\u907f\u514d\u5f71\u54cd\u5176\u4ed6\u5e94\u7528\u3002<\/p>\n<h4>\u6027\u80fd\u4f18\u5316\u7b56\u7565<\/h4>\n<p>\u5728OpenHarmony\u8bbe\u5907\u4e0a&#xff0c;\u7279\u522b\u662f\u4e2d\u4f4e\u7aef\u8bbe\u5907&#xff0c;ActivityIndicator\u7684\u6027\u80fd\u4f18\u5316\u5c24\u4e3a\u91cd\u8981\u3002\u4e0b\u56fe\u5c55\u793a\u4e86\u6027\u80fd\u95ee\u9898\u7684\u8bca\u65ad\u548c\u89e3\u51b3\u65b9\u6848\u6d41\u7a0b&#xff1a;<\/p>\n<p>  #mermaid-svg-VbuhTq69HXkGi76z{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-VbuhTq69HXkGi76z .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-VbuhTq69HXkGi76z .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-VbuhTq69HXkGi76z .error-icon{fill:#552222;}#mermaid-svg-VbuhTq69HXkGi76z .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-VbuhTq69HXkGi76z .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-VbuhTq69HXkGi76z .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-VbuhTq69HXkGi76z .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-VbuhTq69HXkGi76z .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-VbuhTq69HXkGi76z .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-VbuhTq69HXkGi76z .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-VbuhTq69HXkGi76z .marker{fill:#333333;stroke:#333333;}#mermaid-svg-VbuhTq69HXkGi76z .marker.cross{stroke:#333333;}#mermaid-svg-VbuhTq69HXkGi76z svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-VbuhTq69HXkGi76z p{margin:0;}#mermaid-svg-VbuhTq69HXkGi76z .label{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;color:#333;}#mermaid-svg-VbuhTq69HXkGi76z .cluster-label text{fill:#333;}#mermaid-svg-VbuhTq69HXkGi76z .cluster-label span{color:#333;}#mermaid-svg-VbuhTq69HXkGi76z .cluster-label span p{background-color:transparent;}#mermaid-svg-VbuhTq69HXkGi76z .label text,#mermaid-svg-VbuhTq69HXkGi76z span{fill:#333;color:#333;}#mermaid-svg-VbuhTq69HXkGi76z .node rect,#mermaid-svg-VbuhTq69HXkGi76z .node circle,#mermaid-svg-VbuhTq69HXkGi76z .node ellipse,#mermaid-svg-VbuhTq69HXkGi76z .node polygon,#mermaid-svg-VbuhTq69HXkGi76z .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-VbuhTq69HXkGi76z .rough-node .label text,#mermaid-svg-VbuhTq69HXkGi76z .node .label text,#mermaid-svg-VbuhTq69HXkGi76z .image-shape .label,#mermaid-svg-VbuhTq69HXkGi76z .icon-shape .label{text-anchor:middle;}#mermaid-svg-VbuhTq69HXkGi76z .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-VbuhTq69HXkGi76z .rough-node .label,#mermaid-svg-VbuhTq69HXkGi76z .node .label,#mermaid-svg-VbuhTq69HXkGi76z .image-shape .label,#mermaid-svg-VbuhTq69HXkGi76z .icon-shape .label{text-align:center;}#mermaid-svg-VbuhTq69HXkGi76z .node.clickable{cursor:pointer;}#mermaid-svg-VbuhTq69HXkGi76z .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-VbuhTq69HXkGi76z .arrowheadPath{fill:#333333;}#mermaid-svg-VbuhTq69HXkGi76z .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-VbuhTq69HXkGi76z .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-VbuhTq69HXkGi76z .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-VbuhTq69HXkGi76z .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-VbuhTq69HXkGi76z .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-VbuhTq69HXkGi76z .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-VbuhTq69HXkGi76z .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-VbuhTq69HXkGi76z .cluster text{fill:#333;}#mermaid-svg-VbuhTq69HXkGi76z .cluster span{color:#333;}#mermaid-svg-VbuhTq69HXkGi76z 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-VbuhTq69HXkGi76z .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-VbuhTq69HXkGi76z rect.text{fill:none;stroke-width:0;}#mermaid-svg-VbuhTq69HXkGi76z .icon-shape,#mermaid-svg-VbuhTq69HXkGi76z .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-VbuhTq69HXkGi76z .icon-shape p,#mermaid-svg-VbuhTq69HXkGi76z .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-VbuhTq69HXkGi76z .icon-shape rect,#mermaid-svg-VbuhTq69HXkGi76z .image-shape rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-VbuhTq69HXkGi76z .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-VbuhTq69HXkGi76z .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-VbuhTq69HXkGi76z :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>\u52a8\u753b\u5361\u987f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5185\u5b58\u5360\u7528\u9ad8<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5e03\u5c40\u91cd\u6392<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u9ad8\u7aef\u8bbe\u5907<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u4e2d\u4f4e\u7aef\u8bbe\u5907<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5355\u4e2a\u5b9e\u4f8b<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u591a\u4e2a\u5b9e\u4f8b<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u7b80\u5355\u6837\u5f0f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u590d\u6742\u6837\u5f0f<\/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\"><\/p>\n<p>\u662f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/p>\n<p>\u5426<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"edgeLabel\"><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>ActivityIndicator\u6027\u80fd\u95ee\u9898<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u95ee\u9898\u7c7b\u578b<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u68c0\u67e5\u8bbe\u5907\u6027\u80fd<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u68c0\u67e5\u5b9e\u4f8b\u6570\u91cf<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u68c0\u67e5\u6837\u5f0f\u590d\u6742\u5ea6<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u8bbe\u5907\u7c7b\u578b<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u68c0\u67e5\u52a8\u753b\u5b9e\u73b0<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7b80\u5316\u52a8\u753b\/\u964d\u4f4e\u5e27\u7387<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5b9e\u4f8b\u6570\u91cf<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u68c0\u67e5\u5185\u5b58\u6cc4\u6f0f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u4f7f\u7528\u6c60\u5316\u6280\u672f<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6837\u5f0f\u590d\u6742\u5ea6<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u68c0\u67e5\u7236\u5bb9\u5668\u5e03\u5c40<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u7b80\u5316\u6837\u5f0f\/\u51cf\u5c11\u5d4c\u5957<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5e94\u7528\u4f18\u5316\u63aa\u65bd<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6027\u80fd\u6d4b\u8bd5\u9a8c\u8bc1<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u95ee\u9898\u89e3\u51b3?<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u5b8c\u6210<\/p>\n<p><\/span><\/p>\n<p>         <span class=\"nodeLabel\"><\/p>\n<p>\u6df1\u5165\u5206\u6790<\/p>\n<p><\/span><\/p>\n<p>\u56fe\u8868\u8bf4\u660e&#xff1a;\u8be5\u6d41\u7a0b\u56fe\u5c55\u793a\u4e86ActivityIndicator\u6027\u80fd\u95ee\u9898\u7684\u8bca\u65ad\u548c\u89e3\u51b3\u6d41\u7a0b\u3002\u5728OpenHarmony 6.0.0\u73af\u5883\u4e0b&#xff0c;\u6700\u5e38\u89c1\u7684\u95ee\u9898\u662f\u4f4e\u7aef\u8bbe\u5907\u4e0a\u7684\u52a8\u753b\u5361\u987f\u3002\u89e3\u51b3\u65b9\u6848\u5305\u62ec&#xff1a;1) \u5bf9\u4e2d\u4f4e\u7aef\u8bbe\u5907\u4f7f\u7528\u2019small\u2019\u5c3a\u5bf8&#xff1b;2) \u7b80\u5316\u906e\u7f69\u5c42\u6837\u5f0f&#xff1b;3) \u907f\u514d\u5728\u5217\u8868\u4e2d\u9891\u7e41\u521b\u5efaActivityIndicator\u5b9e\u4f8b&#xff1b;4) \u4f7f\u7528\u6c60\u5316\u6280\u672f\u590d\u7528\u5b9e\u4f8b\u3002\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;OpenHarmony\u7684\u5185\u5b58\u7ba1\u7406\u673a\u5236\u4e0eAndroid\u6709\u6240\u4e0d\u540c&#xff0c;\u9700\u8981\u7279\u522b\u6ce8\u610f\u7ec4\u4ef6\u9500\u6bc1\u65f6\u7684\u8d44\u6e90\u6e05\u7406&#xff0c;\u907f\u514d\u5185\u5b58\u6cc4\u6f0f\u3002<\/p>\n<h4>\u5e38\u89c1\u95ee\u9898\u89e3\u51b3\u65b9\u6848<\/h4>\n<p>\u5728\u5b9e\u9645\u5f00\u53d1\u4e2d&#xff0c;\u5f00\u53d1\u8005\u53ef\u80fd\u4f1a\u9047\u5230\u5404\u79cd\u4e0eActivityIndicator\u76f8\u5173\u7684\u95ee\u9898\u3002\u4e0b\u8868\u5217\u51fa\u4e86\u5e38\u89c1\u95ee\u9898\u53ca\u5176\u89e3\u51b3\u65b9\u6848&#xff1a;<\/p>\n<table>\n<tr>\u95ee\u9898\u73b0\u8c61\u53ef\u80fd\u539f\u56e0\u89e3\u51b3\u65b9\u6848\u9a8c\u8bc1\u65b9\u6cd5<\/tr>\n<tbody>\n<tr>\n<td>ActivityIndicator\u4e0d\u663e\u793a<\/td>\n<td>1. animating\u8bbe\u4e3afalse2. \u88ab\u5176\u4ed6\u89c6\u56fe\u8986\u76d63. \u900f\u660e\u5ea6\u4e3a0<\/td>\n<td>1. \u786e\u4fddanimating\u4e3atrue2. \u68c0\u67e5zIndex\u548c\u5e03\u5c403. \u8bbe\u7f6e\u660e\u786e\u7684color\u503c<\/td>\n<td>\u5728\u8c03\u8bd5\u6a21\u5f0f\u4e0b\u68c0\u67e5\u7ec4\u4ef6\u6811<\/td>\n<\/tr>\n<tr>\n<td>\u52a8\u753b\u5361\u987f\u6216\u4e0d\u6d41\u7545<\/td>\n<td>1. \u8bbe\u5907\u6027\u80fd\u4e0d\u8db32. \u8fc7\u591a\u540c\u65f6\u8fd0\u884c\u7684\u52a8\u753b3. \u590d\u6742\u7684\u7236\u5bb9\u5668\u5e03\u5c40<\/td>\n<td>1. \u964d\u4f4e\u52a8\u753b\u590d\u6742\u5ea62. \u9650\u5236\u540c\u65f6\u8fd0\u884c\u7684ActivityIndicator\u6570\u91cf3. \u7b80\u5316\u7236\u5bb9\u5668\u5e03\u5c40<\/td>\n<td>\u4f7f\u7528\u6027\u80fd\u5206\u6790\u5de5\u5177\u6d4b\u91cf\u5e27\u7387<\/td>\n<\/tr>\n<tr>\n<td>\u989c\u8272\u663e\u793a\u4e0d\u6b63\u786e<\/td>\n<td>1. \u989c\u8272\u683c\u5f0f\u4e0d\u652f\u63012. \u4e3b\u9898\u8986\u76d63. \u900f\u660e\u5ea6\u95ee\u9898<\/td>\n<td>1. \u4f7f\u7528HEX\u6216\u547d\u540d\u989c\u82722. \u68c0\u67e5\u4e3b\u9898\u7ee7\u627f3. \u5355\u72ec\u8bbe\u7f6eopacity<\/td>\n<td>\u5728\u4e0d\u540c\u8bbe\u5907\u4e0a\u6d4b\u8bd5\u989c\u8272\u8868\u73b0<\/td>\n<\/tr>\n<tr>\n<td>\u906e\u7f69\u5c42\u65e0\u6cd5\u70b9\u51fb\u7a7f\u900f<\/td>\n<td>1. \u672a\u6b63\u786e\u8bbe\u7f6epointerEvents2. \u906e\u7f69\u5c42\u5c3a\u5bf8\u8fc7\u5927<\/td>\n<td>1. \u8bbe\u7f6epointerEvents&#061;\u201cnone\u201d2. \u786e\u4fdd\u906e\u7f69\u5c42\u5c3a\u5bf8\u5408\u9002<\/td>\n<td>\u5c1d\u8bd5\u70b9\u51fb\u906e\u7f69\u5c42\u540e\u7684\u5143\u7d20<\/td>\n<\/tr>\n<tr>\n<td>\u5185\u5b58\u5360\u7528\u8fc7\u9ad8<\/td>\n<td>1. \u9891\u7e41\u521b\u5efa\u9500\u6bc1\u5b9e\u4f8b2. \u5185\u5b58\u6cc4\u6f0f<\/td>\n<td>1. \u4f7f\u7528\u6c60\u5316\u6280\u672f2. \u786e\u4fdd\u7ec4\u4ef6\u6b63\u786e\u5378\u8f7d<\/td>\n<td>\u4f7f\u7528\u5185\u5b58\u5206\u6790\u5de5\u5177\u76d1\u63a7<\/td>\n<\/tr>\n<tr>\n<td>\u5728\u5217\u8868\u4e2d\u6eda\u52a8\u5361\u987f<\/td>\n<td>1. \u6bcf\u4e2a\u5217\u8868\u9879\u90fd\u6709ActivityIndicator2. \u590d\u6742\u7684\u52a8\u753b<\/td>\n<td>1. \u4ec5\u5728\u53ef\u89c1\u533a\u57df\u6e32\u67d32. \u4f7f\u7528\u66f4\u7b80\u5355\u7684\u6307\u793a\u5668<\/td>\n<td>\u6eda\u52a8\u5217\u8868\u6d4b\u8bd5\u6027\u80fd<\/td>\n<\/tr>\n<tr>\n<td>\u591a\u7a97\u53e3\u73af\u5883\u4e0b\u663e\u793a\u5f02\u5e38<\/td>\n<td>1. \u906e\u7f69\u5c42\u8986\u76d6\u6574\u4e2a\u5c4f\u5e552. \u672a\u9002\u914d\u591a\u7a97\u53e3<\/td>\n<td>1. \u9650\u5236\u906e\u7f69\u5c42\u8303\u56f42. \u4f7f\u7528\u7a97\u53e3\u7ba1\u7406API<\/td>\n<td>\u5728\u591a\u7a97\u53e3\u6a21\u5f0f\u4e0b\u6d4b\u8bd5\u5e94\u7528<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u8868\u683c\u8bf4\u660e&#xff1a;\u8be5\u8868\u5217\u51fa\u4e86ActivityIndicator\u5728OpenHarmony 6.0.0\u73af\u5883\u4e0b\u5e38\u89c1\u95ee\u9898\u7684\u89e3\u51b3\u65b9\u6848\u3002\u7279\u522b\u503c\u5f97\u6ce8\u610f\u7684\u662f&#xff0c;\u5728\u591a\u7a97\u53e3\u73af\u5883\u4e0b&#xff0c;ActivityIndicator\u906e\u7f69\u5c42\u53ef\u80fd\u4f1a\u610f\u5916\u8986\u76d6\u5176\u4ed6\u5e94\u7528\u7a97\u53e3&#xff0c;\u8fd9\u9700\u8981\u901a\u8fc7OpenHarmony\u7684\u7a97\u53e3\u7ba1\u7406API\u6765\u89e3\u51b3\u3002\u6b64\u5916&#xff0c;\u7531\u4e8eOpenHarmony\u7684\u5185\u5b58\u56de\u6536\u673a\u5236\u4e0eAndroid\u6709\u6240\u4e0d\u540c&#xff0c;\u5185\u5b58\u6cc4\u6f0f\u95ee\u9898\u53ef\u80fd\u8868\u73b0\u5f97\u66f4\u52a0\u9690\u853d&#xff0c;\u5efa\u8bae\u4f7f\u7528\u5b98\u65b9\u63d0\u4f9b\u7684\u5185\u5b58\u5206\u6790\u5de5\u5177\u8fdb\u884c\u5b9a\u671f\u68c0\u67e5\u3002<\/p>\n<h4>\u8bbe\u5907\u9002\u914d\u7b56\u7565<\/h4>\n<p>OpenHarmony\u8bbe\u5907\u6027\u80fd\u5dee\u5f02\u8f83\u5927&#xff0c;\u4ece\u5165\u95e8\u7ea7\u5230\u65d7\u8230\u7ea7\u8bbe\u5907\u90fd\u6709&#xff0c;\u56e0\u6b64\u9700\u8981\u5b9e\u65bd\u9488\u5bf9\u6027\u7684\u9002\u914d\u7b56\u7565\u3002\u4e0b\u56fe\u5c55\u793a\u4e86\u57fa\u4e8e\u8bbe\u5907\u6027\u80fd\u7684ActivityIndicator\u9002\u914d\u7b56\u7565&#xff1a;<\/p>\n<p>  #mermaid-svg-sh1o4Re4xItGkXmX{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-sh1o4Re4xItGkXmX .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-sh1o4Re4xItGkXmX .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-sh1o4Re4xItGkXmX .error-icon{fill:#552222;}#mermaid-svg-sh1o4Re4xItGkXmX .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-sh1o4Re4xItGkXmX .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-sh1o4Re4xItGkXmX .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-sh1o4Re4xItGkXmX .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-sh1o4Re4xItGkXmX .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-sh1o4Re4xItGkXmX .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-sh1o4Re4xItGkXmX .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-sh1o4Re4xItGkXmX .marker{fill:#333333;stroke:#333333;}#mermaid-svg-sh1o4Re4xItGkXmX .marker.cross{stroke:#333333;}#mermaid-svg-sh1o4Re4xItGkXmX svg{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-sh1o4Re4xItGkXmX p{margin:0;}#mermaid-svg-sh1o4Re4xItGkXmX .pieCircle{stroke:#000000;stroke-width:2px;opacity:0.7;}#mermaid-svg-sh1o4Re4xItGkXmX .pieOuterCircle{stroke:#000000;stroke-width:1px;fill:none;}#mermaid-svg-sh1o4Re4xItGkXmX .pieTitleText{text-anchor:middle;font-size:25px;fill:#000000;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}#mermaid-svg-sh1o4Re4xItGkXmX .slice{font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;fill:#000000;font-size:17px;}#mermaid-svg-sh1o4Re4xItGkXmX .legend text{fill:#000000;font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;font-size:17px;}#mermaid-svg-sh1o4Re4xItGkXmX :root{&#8211;mermaid-font-family:\\&#8221;trebuchet ms\\&#8221;,verdana,arial,sans-serif;}<\/p>\n<p>    45%<\/p>\n<p>    35%<\/p>\n<p>    20%<\/p>\n<p>    OpenHarmony\u8bbe\u5907\u6027\u80fd\u5206\u5e03<\/p>\n<p>     \u65d7\u8230\u7ea7\u8bbe\u5907 (API 20&#043;)<\/p>\n<p>     \u4e2d\u7aef\u8bbe\u5907 (API 20)<\/p>\n<p>     \u5165\u95e8\u7ea7\u8bbe\u5907 (API 20)<\/p>\n<p>\u56fe\u8868\u8bf4\u660e&#xff1a;\u8be5\u997c\u56fe\u5c55\u793a\u4e86\u5f53\u524dOpenHarmony 6.0.0\u8bbe\u5907\u7684\u6027\u80fd\u5206\u5e03\u60c5\u51b5\u3002\u57fa\u4e8e\u6b64\u5206\u5e03&#xff0c;\u5efa\u8bae\u91c7\u7528\u5206\u7ea7\u9002\u914d\u7b56\u7565&#xff1a;1) \u65d7\u8230\u8bbe\u5907&#xff1a;\u4f7f\u7528\u5b8c\u6574\u52a8\u753b\u548c\u590d\u6742\u906e\u7f69&#xff1b;2) \u4e2d\u7aef\u8bbe\u5907&#xff1a;\u4f7f\u7528\u2019small\u2019\u5c3a\u5bf8\u548c\u7b80\u5316\u906e\u7f69&#xff1b;3) \u5165\u95e8\u8bbe\u5907&#xff1a;\u4f7f\u7528\u9759\u6001\u6307\u793a\u5668\u66ff\u4ee3\u52a8\u753b\u3002\u53ef\u4ee5\u901a\u8fc7OpenHarmony\u7684\u8bbe\u5907\u4fe1\u606fAPI\u83b7\u53d6\u8bbe\u5907\u6027\u80fd\u6307\u6807&#xff0c;\u52a8\u6001\u8c03\u6574ActivityIndicator\u7684\u5b9e\u73b0\u65b9\u5f0f\u3002\u5177\u4f53\u800c\u8a00&#xff0c;\u53ef\u4ee5\u68c0\u6d4b\u8bbe\u5907\u7684CPU\u6838\u5fc3\u6570\u3001\u5185\u5b58\u5927\u5c0f\u548cGPU\u6027\u80fd&#xff0c;\u636e\u6b64\u51b3\u5b9a\u4f7f\u7528\u4f55\u79cd\u52a0\u8f7d\u6307\u793a\u65b9\u6848\u3002\u8fd9\u79cd\u81ea\u9002\u5e94\u7b56\u7565\u80fd\u663e\u8457\u63d0\u5347\u5e94\u7528\u5728\u5404\u7c7b\u8bbe\u5907\u4e0a\u7684\u7528\u6237\u4f53\u9a8c\u4e00\u81f4\u6027\u3002<\/p>\n<h3>\u603b\u7ed3<\/h3>\n<p>\u672c\u6587\u6df1\u5165\u63a2\u8ba8\u4e86React Native\u4e2dActivityIndicator\u7ec4\u4ef6\u5728OpenHarmony 6.0.0 (API 20)\u5e73\u53f0\u4e0a\u7684\u5e94\u7528\u4e0e\u5b9e\u73b0\u3002\u6211\u4eec\u4ece\u7ec4\u4ef6\u57fa\u7840\u6982\u5ff5\u51fa\u53d1&#xff0c;\u5206\u6790\u4e86React Native\u4e0eOpenHarmony\u7684\u9002\u914d\u67b6\u6784&#xff0c;\u8be6\u7ec6\u8bb2\u89e3\u4e86ActivityIndicator\u7684\u6838\u5fc3\u5c5e\u6027\u548c\u4f7f\u7528\u6a21\u5f0f&#xff0c;\u5e76\u901a\u8fc7\u5177\u4f53\u6848\u4f8b\u5c55\u793a\u4e86\u5b9e\u9645\u5e94\u7528\u65b9\u6cd5\u3002\u7279\u522b\u9488\u5bf9OpenHarmony 6.0.0\u5e73\u53f0\u7684\u7279\u6027&#xff0c;\u6211\u4eec\u603b\u7ed3\u4e86\u5173\u952e\u7684\u9002\u914d\u8981\u70b9\u3001\u6027\u80fd\u4f18\u5316\u7b56\u7565\u548c\u5e38\u89c1\u95ee\u9898\u89e3\u51b3\u65b9\u6848\u3002<\/p>\n<p>\u5728OpenHarmony\u73af\u5883\u4e0b\u4f7f\u7528ActivityIndicator\u65f6&#xff0c;\u5f00\u53d1\u8005\u5e94\u7279\u522b\u6ce8\u610f\u5e73\u53f0\u7279\u6709\u7684\u9650\u5236&#xff0c;\u5982\u56fa\u5b9a30fps\u7684\u52a8\u753b\u5e27\u7387\u3001\u6709\u9650\u7684\u989c\u8272\u900f\u660e\u5ea6\u652f\u6301\u4ee5\u53ca\u591a\u7a97\u53e3\u73af\u5883\u4e0b\u7684\u906e\u7f69\u5c42\u7ba1\u7406\u3002\u9488\u5bf9\u4e0d\u540c\u6027\u80fd\u7ea7\u522b\u7684\u8bbe\u5907\u5b9e\u65bd\u5206\u7ea7\u9002\u914d\u7b56\u7565&#xff0c;\u80fd\u663e\u8457\u63d0\u5347\u5e94\u7528\u7684\u7528\u6237\u4f53\u9a8c\u4e00\u81f4\u6027\u3002<\/p>\n<p>\u968f\u7740OpenHarmony\u751f\u6001\u7684\u4e0d\u65ad\u53d1\u5c55&#xff0c;React Native for OpenHarmony\u7684\u9002\u914d\u5c42\u4e5f\u5728\u6301\u7eed\u4f18\u5316\u3002\u672a\u6765\u7248\u672c\u6709\u671b\u652f\u6301\u66f4\u4e30\u5bcc\u7684\u52a8\u753b\u6548\u679c\u548c\u66f4\u5b8c\u5584\u7684\u53ef\u8bbf\u95ee\u6027\u529f\u80fd\u3002\u5efa\u8bae\u5f00\u53d1\u8005\u5bc6\u5207\u5173\u6ce8&#064;react-native-oh\/react-native-harmony\u7684\u66f4\u65b0&#xff0c;\u53ca\u65f6\u91c7\u7528\u65b0\u7279\u6027\u63d0\u5347\u5e94\u7528\u8d28\u91cf\u3002<\/p>\n<p>\u8de8\u5e73\u53f0\u5f00\u53d1\u7684\u6838\u5fc3\u4ef7\u503c\u5728\u4e8e&#034;\u4e00\u6b21\u5f00\u53d1&#xff0c;\u591a\u7aef\u90e8\u7f72&#034;&#xff0c;\u4f46\u771f\u6b63\u7684\u6311\u6218\u5728\u4e8e&#034;\u4e00\u6b21\u5f00\u53d1&#xff0c;\u591a\u7aef\u4f53\u9a8c\u4e00\u81f4&#034;\u3002\u901a\u8fc7\u6df1\u5165\u7406\u89e3\u5e73\u53f0\u5dee\u5f02\u5e76\u5b9e\u65bd\u9488\u5bf9\u6027\u7684\u9002\u914d\u7b56\u7565&#xff0c;\u6211\u4eec\u53ef\u4ee5\u5728\u4fdd\u6301\u5f00\u53d1\u6548\u7387\u7684\u540c\u65f6&#xff0c;\u4e3a\u7528\u6237\u63d0\u4f9b\u9ad8\u8d28\u91cf\u7684\u8de8\u5e73\u53f0\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\/pickstar\/AtomGitDemos<\/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 for OpenHarmony \u5b9e\u6218&#xff1a;ActivityIndicator\u52a0\u8f7d\u906e\u7f69<br \/>\n\u672c\u6587\u8be6\u7ec6\u4ecb\u7ecdReact Native\u4e2dActivityIndicator\u7ec4\u4ef6\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684\u5e94\u7528\u4e0e\u5b9e\u73b0\u539f\u7406\u3002\u6587\u7ae0\u5c06\u4ece\u57fa\u7840\u6982\u5ff5\u5165\u624b&#xff0c;\u6df1\u5165\u5206\u6790ActivityIndicator\u5728\u8de8\u5e73\u53f0\u73af\u5883\u4e2d\u7684\u6e32\u67d3\u673a\u5236&#xff0c;\u91cd\u70b9\u8bb2\u89e3\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u7684\u9002\u914d\u8981\u70b9\u548c\u6027\u80fd\u4f18\u5316\u7b56\u7565\u3002\u901a\u8fc7\u67b6\u6784<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6800,187,524],"topic":[],"class_list":["post-66955","post","type-post","status-publish","format-standard","hentry","category-server","tag-react-native","tag-javascript","tag-react-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>OpenHarmony\u73af\u5883\u4e0bReact Native\uff1aActivityIndicator\u52a0\u8f7d\u906e\u7f69 - \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\/66955.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"OpenHarmony\u73af\u5883\u4e0bReact Native\uff1aActivityIndicator\u52a0\u8f7d\u906e\u7f69 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"React Native for OpenHarmony \u5b9e\u6218&#xff1a;ActivityIndicator\u52a0\u8f7d\u906e\u7f69 \u672c\u6587\u8be6\u7ec6\u4ecb\u7ecdReact Native\u4e2dActivityIndicator\u7ec4\u4ef6\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684\u5e94\u7528\u4e0e\u5b9e\u73b0\u539f\u7406\u3002\u6587\u7ae0\u5c06\u4ece\u57fa\u7840\u6982\u5ff5\u5165\u624b&#xff0c;\u6df1\u5165\u5206\u6790ActivityIndicator\u5728\u8de8\u5e73\u53f0\u73af\u5883\u4e2d\u7684\u6e32\u67d3\u673a\u5236&#xff0c;\u91cd\u70b9\u8bb2\u89e3\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u7684\u9002\u914d\u8981\u70b9\u548c\u6027\u80fd\u4f18\u5316\u7b56\u7565\u3002\u901a\u8fc7\u67b6\u6784\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/66955.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-27T14:56:58+00:00\" \/>\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=\"17 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/66955.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/66955.html\",\"name\":\"OpenHarmony\u73af\u5883\u4e0bReact Native\uff1aActivityIndicator\u52a0\u8f7d\u906e\u7f69 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-01-27T14:56:58+00:00\",\"dateModified\":\"2026-01-27T14:56:58+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/66955.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/66955.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/66955.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"OpenHarmony\u73af\u5883\u4e0bReact Native\uff1aActivityIndicator\u52a0\u8f7d\u906e\u7f69\"}]},{\"@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":"OpenHarmony\u73af\u5883\u4e0bReact Native\uff1aActivityIndicator\u52a0\u8f7d\u906e\u7f69 - \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\/66955.html","og_locale":"zh_CN","og_type":"article","og_title":"OpenHarmony\u73af\u5883\u4e0bReact Native\uff1aActivityIndicator\u52a0\u8f7d\u906e\u7f69 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"React Native for OpenHarmony \u5b9e\u6218&#xff1a;ActivityIndicator\u52a0\u8f7d\u906e\u7f69 \u672c\u6587\u8be6\u7ec6\u4ecb\u7ecdReact Native\u4e2dActivityIndicator\u7ec4\u4ef6\u5728OpenHarmony 6.0.0\u5e73\u53f0\u4e0a\u7684\u5e94\u7528\u4e0e\u5b9e\u73b0\u539f\u7406\u3002\u6587\u7ae0\u5c06\u4ece\u57fa\u7840\u6982\u5ff5\u5165\u624b&#xff0c;\u6df1\u5165\u5206\u6790ActivityIndicator\u5728\u8de8\u5e73\u53f0\u73af\u5883\u4e2d\u7684\u6e32\u67d3\u673a\u5236&#xff0c;\u91cd\u70b9\u8bb2\u89e3\u5728OpenHarmony 6.0.0 (API 20)\u73af\u5883\u4e0b\u7684\u9002\u914d\u8981\u70b9\u548c\u6027\u80fd\u4f18\u5316\u7b56\u7565\u3002\u901a\u8fc7\u67b6\u6784","og_url":"https:\/\/www.wsisp.com\/helps\/66955.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-01-27T14:56:58+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"17 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/66955.html","url":"https:\/\/www.wsisp.com\/helps\/66955.html","name":"OpenHarmony\u73af\u5883\u4e0bReact Native\uff1aActivityIndicator\u52a0\u8f7d\u906e\u7f69 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-01-27T14:56:58+00:00","dateModified":"2026-01-27T14:56:58+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/66955.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/66955.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/66955.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"OpenHarmony\u73af\u5883\u4e0bReact Native\uff1aActivityIndicator\u52a0\u8f7d\u906e\u7f69"}]},{"@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\/66955","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=66955"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/66955\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=66955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=66955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=66955"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=66955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}