{"id":116948,"date":"2026-10-22T10:06:04","date_gmt":"2026-10-22T02:06:04","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/116948.html"},"modified":"2026-10-22T10:06:04","modified_gmt":"2026-10-22T02:06:04","slug":"react-native-for-openharmony-%e5%ae%9e%e6%88%98%ef%bc%9a%e4%b8%89%e6%96%b9%e5%ba%93-react-native-circular-action-menu-%e7%9a%84%e9%b8%bf%e8%92%99%e5%8c%96%e9%80%82%e9%85%8d%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/116948.html","title":{"rendered":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-circular-action-menu \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357"},"content":{"rendered":"

\/* MD \/ \u5bcc\u6587\u672c\u4e2d\u7684 .toc\uff08\u542b\u535a\u5ba2\u56ed\u642c\u5bb6\u7b49\u5d4c\u5957\u7ed3\u6784\uff09\uff1b.toc-box \u5728\u4fa7\u680f\uff0c\u4e0d\u53d7\u5f71\u54cd *\/
\n #content_views .toc,
\n \/* \u7f16\u8f91\u5668\u5e38\u5728\u76ee\u5f55\u524d\u540e\u63d2\u5165\u7a7a p\uff08:empty \u4ecd\u5360 20px\uff09\uff0c\u4e00\u5e76\u53bb\u6389\u907f\u514d\u9876\u7a7a\u9699 *\/
\n #content_views.markdown_views > p:empty:has(+ .toc),
\n #content_views.markdown_views > .toc + p:empty,
\n \/* \u5bcc\u6587\u672c\u65e7\u7248\u76ee\u5f55\u6807\u8bb0 *\/
\n #content_views.htmledit_views #main-toc,
\n #content_views.htmledit_views #hr-toc,
\n #content_views.htmledit_views p[id*=\\”-toc\\”] {
\n display: none !important;
\n }
\n \/* \u76ee\u5f55\u53bb\u6389\u540e\uff0c\u7d27\u8ddf\u7684\u9996\u4e2a\u6807\u9898\u4e0d\u518d\u591a\u51fa\u4e00\u5757\u4e0a\u8fb9\u8ddd *\/
\n #content_views.markdown_views > .toc + h1,
\n #content_views.markdown_views > .toc + h2,
\n #content_views.markdown_views > .toc + h3,
\n #content_views.markdown_views > .toc + h4,
\n #content_views.markdown_views > .toc + p:empty + h1,
\n #content_views.markdown_views > .toc + p:empty + h2,
\n #content_views.markdown_views > .toc + p:empty + h3,
\n #content_views.markdown_views > .toc + p:empty + h4 {
\n margin-top: 0 !important;
\n }<\/p>\n

<\/h2>\n

\u672c\u6587\u8bb0\u5f55\u628a react-native-circular-action-menu（\u5706\u5f62\u5c55\u5f00\u83dc\u5355）\u9002\u914d\u5230 HarmonyOS \u7684\u5b8c\u6574\u8fc7\u7a0b\u3002<\/p>\n

\u5b83\u662f\u4e00\u4e2a\u60ac\u6d6e\u6309\u94ae（FAB）：\u70b9\u4e00\u4e0b\u4f1a\u8ba9\u5b50\u9879\u6cbf\u4e00\u6bb5\u5706\u5f27\u5c55\u5f00，\u518d\u70b9\u4e00\u4e0b\u6536\u56de\u3002<\/p>\n

\u5b83\u6700\u5927\u7684\u7279\u70b9\u662f\u4f4d\u7f6e\u53ef\u4ee5\u7528\u4e00\u4e2a\u516c\u5f0f\u7cbe\u786e\u7b97\u51fa\u6765，\u6240\u4ee5\u8fd9\u8f6e\u6211\u505a\u4e86\u4e00\u6b21\u5b9a\u91cf\u7684\u51e0\u4f55\u9a8c\u8bc1：<\/p>\n

\/\/ ActionButtonItem.js \u2014\u2014 \u5b50\u9879\u5b9a\u4f4d<\/span>
\nconst<\/span> offsetX =<\/span> this<\/span>.<\/span>props.<\/span>radius *<\/span> Math.<\/span>cos<\/span>(<\/span>this<\/span>.<\/span>props.<\/span>angle)<\/span>;<\/span>
\nconst<\/span> offsetY =<\/span> this<\/span>.<\/span>props.<\/span>radius *<\/span> Math.<\/span>sin<\/span>(<\/span>this<\/span>.<\/span>props.<\/span>angle)<\/span>;<\/span>
\n\/\/ \u6253\u5f00\u65f6：transform: translateX \u2192 offsetX\u3001translateY \u2192 offsetY<\/span><\/p>\n

\/\/ ActionButton.js \u2014\u2014 \u6bcf\u4e2a\u5b50\u9879\u7684\u89d2\u5ea6<\/span>
\n\/\/ alignMap[position] \u51b3\u5b9a\u89d2\u5ea6\u8303\u56f4：center \u21d2 180\u00b0..360\u00b0\u3001left \u21d2 270\u00b0..360\u00b0\u3001right \u21d2 180\u00b0..270\u00b0<\/span>
\nconst<\/span> offset =<\/span> (<\/span>endRadian –<\/span> startRadian)<\/span> \/<\/span> (<\/span>childrenCount –<\/span> 1<\/span>)<\/span>;<\/span>
\nconst<\/span> angle =<\/span> startRadian +<\/span> index *<\/span> offset;<\/span><\/p>\n

\u21d2 position: 'center' + 3 \u4e2a\u5b50\u9879\u65f6，\u7406\u8bba\u504f\u79fb\u91cf\u662f (-r, 0)\u3001(0, -r)\u3001(+r, 0)（\u5de6\u3001\u4e0a\u3001\u53f3 \u2014\u2014 \u4e00\u4e2a\u534a\u5706）\u3002<\/p>\n

\u5b9e\u6d4b（density 3 \u21d2 radius: 100 = 300px）：<\/p>\n\n\u5b50\u9879\u89d2\u5ea6\u7406\u8bba\u504f\u79fb\u5b9e\u6d4b\u8d28\u5fc3<\/tr>\n\n\n\n\n
\u7ea2（\u7b2c 1 \u9879）<\/td>\n180\u00b0<\/td>\n(-300, 0)<\/td>\n(360, 2211)<\/td>\n<\/tr>\n
\u7eff（\u7b2c 2 \u9879）<\/td>\n270\u00b0<\/td>\n(0, -300)<\/td>\n(659, 1937)<\/td>\n<\/tr>\n
\u84dd（\u7b2c 3 \u9879）<\/td>\n360\u00b0<\/td>\n(+300, 0)<\/td>\n(960, 2211)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u21d2 \u7ea2\u2194\u84dd\u6c34\u5e73\u95f4\u8ddd = 600px = 2 \u00d7 300 = 2r \u2713 \u7cbe\u786e
\n\u21d2 \u518d\u628a\u534a\u5f84\u51cf\u534a（radius: 50）\u505a\u5bf9\u7167：\u7ea2\u2194\u84dd = 300px \u21d2 \u7cbe\u786e\u7684 2:1 \u2713\u2713<\/p>\n

\u4e5f\u5c31\u662f\u8bf4：\u5b50\u9879\u4f4d\u7f6e\u786e\u5b9e\u843d\u5728\u4ee5 FAB \u4e3a\u5706\u5fc3\u3001radius \u4e3a\u534a\u5f84\u7684\u5706\u5f27\u4e0a，alignMap \u7684\u89d2\u5ea6\u8303\u56f4\u4e5f\u5b8c\u5168\u6210\u7acb\u3002<\/p>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

\u8bbe\u5907\u4fa7\u65ad\u8a00 38 \/ 38 \u5168\u90e8\u901a\u8fc7\u3002<\/p>\n

\n

\u4e00\u3001\u5148\u8bf4\u7ed3\u8bba<\/h3>\n\n\u9879\u7ed3\u679c<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u4e0a\u6e38\u6700\u65b0\u7248<\/td>\n0.5.0；license: MIT；\u4e0a\u6e38 star 477；\u6700\u540e\u63d0\u4ea4 2018-10<\/td>\n<\/tr>\n
\u5e93\u7c7b\u578b<\/td>\n\u7eaf JS \u7ec4\u4ef6\u5e93：ActionButton（class）+ ActionButtonItem（class），\u6e90\u7801\u76f4\u53d1<\/td>\n<\/tr>\n
\u662f\u5426\u9700\u8981\u539f\u751f\u9002\u914d<\/td>\n\u4e0d\u9700\u8981（\u65e0 harmony\/\u3001\u65e0 NativeModules）<\/td>\n<\/tr>\n
\u8fd0\u884c\u65f6\u4f9d\u8d56<\/td>\n\u2705 \u4ec5 prop-types@^15.6.1（\u5bbf\u4e3b\u5df2\u6709 15.8.1）\u21d2 \u672c\u8f6e\u6ca1\u8e29\u4f9d\u8d56\u5751<\/td>\n<\/tr>\n
prepare \/ postinstall<\/td>\n\u2705 \u90fd\u6ca1\u6709<\/td>\n<\/tr>\n
main<\/td>\nActionButton.js（\u6e90\u7801\u76f4\u53d1：ActionButton.js 8154 B + ActionButtonItem.js 2597 B）<\/td>\n<\/tr>\n
\u5bfc\u51fa\u5f62\u6001<\/td>\nexport default class ActionButton，\u5e76\u6302\u4e86\u4e00\u4e2a\u9759\u6001\u5c5e\u6027 ActionButton.Item = ActionButtonItem<\/td>\n<\/tr>\n
\u9700\u8981 HAR \/ \u6743\u9650 \/ ohpm<\/td>\n\u274c \u90fd\u4e0d\u9700\u8981<\/td>\n<\/tr>\n
\u2605 \u9ed8\u8ba4\u503c<\/td>\nactive false \/ position 'center' \/ radius 100 \/ size 63 \/ itemSize 36 \/ degrees 135 \/ autoInactive true \/ backdrop false<\/td>\n<\/tr>\n
\u2605\u2605 \u5b9a\u4f4d\u516c\u5f0f<\/td>\n(radius\u00b7cos(angle), radius\u00b7sin(angle)) \u21d2 \u5b9e\u6d4b radius 100 \u21d2 \u7ea2\u2194\u84dd 600px\u3001radius 50 \u21d2 300px（\u7cbe\u786e 2:1）<\/td>\n<\/tr>\n
\u2605 \u89d2\u5ea6\u8303\u56f4<\/td>\ncenter 180\u2026360\u3001left 270\u2026360\u3001right 180\u2026270（\u7531 alignMap \u51b3\u5b9a）<\/td>\n<\/tr>\n
\u2605 \u5176\u5b83\u5b9e\u6d4b<\/td>\nItem \u9759\u6001\u6302\u8f7d\u3001Item.defaultProps 3 \u952e\u3001FAB \u7684 \u201c+\u201d \u6253\u5f00\u65f6\u65cb\u8f6c 135\u00b0（\u622a\u56fe\u53ef\u89c1\u53d8 \u201c\u00d7\u201d）\u3001active=false \u65f6\u5b50\u9879\u4e3a 0<\/td>\n<\/tr>\n
\u8bbe\u5907\u4fa7\u65ad\u8a00<\/td>\n\u2705 38 \/ 38 \u901a\u8fc7（A 33 + B 3 + C 2）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

\u4e8c\u3001\u5224\u5b9a\u4e0e\u63a5\u5165<\/h3>\n\n\u6b65\u505a\u6cd5\u7ed3\u679c<\/tr>\n\n\n\n\n\n\n
\u2460<\/td>\npackage.json \u91cc\u6709\u6ca1\u6709 harmony.autolinking<\/td>\n\u6ca1\u6709<\/td>\n<\/tr>\n
\u2461<\/td>\n\u4ed3\u5e93\u91cc\u6709\u6ca1\u6709 harmony\/<\/td>\n\u6ca1\u6709<\/td>\n<\/tr>\n
\u2462<\/td>\n\u4ee3\u7801\u91cc\u6709\u6ca1\u6709 NativeModules \/ requireNativeComponent<\/td>\n\u5168\u65e0<\/td>\n<\/tr>\n
\u2463<\/td>\nimport \u56fe\u4f53\u68c0<\/td>\n.\/ActionButtonItem + prop-types + react \/ react-native \u21d2 \u53ea\u6709\u4e00\u4e2a\u771f\u4f9d\u8d56，\u4e14\u5bbf\u4e3b\u5df2\u6709<\/td>\n<\/tr>\n
\u2464<\/td>\nscripts \u626b prepare \u5bb6\u65cf<\/td>\n\u2705 \u6ca1\u6709<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

npm<\/span> install<\/span> "git+https:\/\/atomgit.com\/oh-react-native\/react-native-circular-action-menu.git#0.5.0-ohos-1.0.0"<\/span> –ignore-scripts<\/p>\n

# \u5b83\u53ea\u4f9d\u8d56 prop-types（\u82e5\u5bbf\u4e3b\u6ca1\u6709\u5219\u8865\u88c5）<\/span>
\nnpm<\/span> install<\/span> prop-types –ignore-scripts<\/p>\n

\/\/ metro.config.js<\/span>
\nwatchFolders<\/span>:<\/span> [<\/span> path.<\/span>resolve<\/span>(<\/span>__dirname,<\/span> '..\/react-native-circular-action-menu'<\/span>)<\/span> ]<\/span>,<\/span><\/p>\n

import<\/span> CircularMenuTestApp from<\/span> '.\/CircularMenuTestApp'<\/span>;<\/span>
\nAppRegistry.<\/span>registerComponent<\/span>(<\/span>'CircularMenuTestApp'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> CircularMenuTestApp)<\/span>;<\/span><\/p>\n

hdc shell aa force-stop com.rnoh084.demo
\nhdc shell aa start -b<\/span> com.rnoh084.demo -a<\/span> EntryAbility –ps<\/span> rnAppKey CircularMenuTestApp<\/p>\n

\u4e0d\u9700\u8981 HAR\u3001\u6743\u9650\u3001ohpm\u3001link-harmony\u3002<\/p>\n

\n

\u4e09\u3001\u8bfb\u6e90\u7801\u53d6\u5230\u7684\u771f\u503c<\/h3>\n

3.1 \u7ed3\u6784\u4e0e\u7ea6\u5b9a<\/h4>\n

export<\/span> default<\/span> class<\/span> ActionButton<\/span> extends<\/span> Component<\/span> {<\/span> \u2026 }<\/span><\/p>\n

ActionButton.<\/span>Item =<\/span> ActionButtonItem;<\/span> \/\/ \u2605 \u9759\u6001\u6302\u8f7d \u21d2 \u7528\u6cd5\u662f <ActionButton.Item \/><\/span><\/p>\n

\u5b9e\u6d4b：ActionButton.Item \u5b58\u5728\u3001\u662f class\u3001prototype.render \u5b58\u5728；Item.defaultProps 3 \u952e（onPress \/ startDegree 0 \/ endDegree 720）\u2713<\/p>\n

3.2 \u9ed8\u8ba4\u503c（defaultProps 16 \u952e）\u4e0e propTypes（15 \u952e）<\/h4>\n

ActionButton.<\/span>defaultProps =<\/span> {<\/span>
\n active<\/span>:<\/span> false<\/span>,<\/span> bgColor<\/span>:<\/span> 'transparent'<\/span>,<\/span> buttonColor<\/span>:<\/span> 'rgba(0,0,0,1)'<\/span>,<\/span>
\n buttonTextColor<\/span>:<\/span> 'rgba(255,255,255,1)'<\/span>,<\/span>
\n position<\/span>:<\/span> 'center'<\/span>,<\/span> \/\/ \u2605 \u51b3\u5b9a\u89d2\u5ea6\u8303\u56f4<\/span>
\n outRangeScale<\/span>:<\/span> 1<\/span>,<\/span> autoInactive<\/span>:<\/span> true<\/span>,<\/span>
\n onPress<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span> onOverlayPress<\/span>:<\/span> (<\/span>)<\/span> =><\/span> {<\/span>}<\/span>,<\/span>
\n backdrop<\/span>:<\/span> false<\/span>,<\/span>
\n degrees<\/span>:<\/span> 135<\/span>,<\/span> \/\/ \u2605 \u6253\u5f00\u65f6 FAB \u4e0a\u7684\u56fe\u5f62\u65cb\u8f6c\u89d2\u5ea6<\/span>
\n size<\/span>:<\/span> 63<\/span>,<\/span> \/\/ \u2605 FAB \u76f4\u5f84（borderRadius = size\/2 \u21d2 \u5706）<\/span>
\n itemSize<\/span>:<\/span> 36<\/span>,<\/span> \/\/ \u2605 \u5b50\u9879\u76f4\u5f84<\/span>
\n radius<\/span>:<\/span> 100<\/span>,<\/span> \/\/ \u2605 \u5b50\u9879\u5230\u5706\u5fc3\u7684\u8ddd\u79bb<\/span>
\n btnOutRange<\/span>:<\/span> 'rgba(0,0,0,1)'<\/span>,<\/span> btnOutRangeTxt<\/span>:<\/span> 'rgba(255,255,255,1)'<\/span>,<\/span>
\n}<\/span>;<\/span><\/p>\n

3.3 \u2605\u2605 \u89d2\u5ea6\u8303\u56f4\u4e0e\u5b9a\u4f4d\u516c\u5f0f（\u672c\u8f6e\u5224\u636e\u7684\u6839\u636e）<\/h4>\n

const<\/span> alignMap =<\/span> {<\/span>
\n center<\/span>:<\/span> {<\/span> alignItems<\/span>:<\/span> 'center'<\/span>,<\/span> justifyContent<\/span>:<\/span> 'flex-end'<\/span>,<\/span> startDegree<\/span>:<\/span> 180<\/span>,<\/span> endDegree<\/span>:<\/span> 360<\/span> }<\/span>,<\/span>
\n left<\/span>:<\/span> {<\/span> alignItems<\/span>:<\/span> 'flex-start'<\/span>,<\/span> justifyContent<\/span>:<\/span> 'flex-end'<\/span>,<\/span> startDegree<\/span>:<\/span> 270<\/span>,<\/span> endDegree<\/span>:<\/span> 360<\/span> }<\/span>,<\/span>
\n right<\/span>:<\/span> {<\/span> alignItems<\/span>:<\/span> 'flex-end'<\/span>,<\/span> justifyContent<\/span>:<\/span> 'flex-end'<\/span>,<\/span> startDegree<\/span>:<\/span> 180<\/span>,<\/span> endDegree<\/span>:<\/span> 270<\/span> }<\/span>,<\/span>
\n}<\/span>;<\/span><\/p>\n

\/\/ renderActions()<\/span>
\nconst<\/span> startDegree =<\/span> this<\/span>.<\/span>props.<\/span>startDegree ||<\/span> alignMap[<\/span>this<\/span>.<\/span>props.<\/span>position]<\/span>.<\/span>startDegree;<\/span>
\nconst<\/span> endDegree =<\/span> this<\/span>.<\/span>props.<\/span>endDegree ||<\/span> alignMap[<\/span>this<\/span>.<\/span>props.<\/span>position]<\/span>.<\/span>endDegree;<\/span>
\nconst<\/span> startRadian =<\/span> startDegree *<\/span> Math.<\/span>PI<\/span> \/<\/span> 180<\/span>;<\/span>
\nconst<\/span> endRadian =<\/span> endDegree *<\/span> Math.<\/span>PI<\/span> \/<\/span> 180<\/span>;<\/span>
\nconst<\/span> childrenCount =<\/span> React.<\/span>Children.<\/span>count<\/span>(<\/span>this<\/span>.<\/span>props.<\/span>children)<\/span>;<\/span>
\nlet<\/span> offset =<\/span> 0<\/span>;<\/span>
\nif<\/span> (<\/span>childrenCount !==<\/span> 1<\/span>)<\/span> {<\/span> offset =<\/span> (<\/span>endRadian –<\/span> startRadian)<\/span> \/<\/span> (<\/span>childrenCount –<\/span> 1<\/span>)<\/span>;<\/span> }<\/span>
\n\u2026 angle=<\/span>{<\/span>startRadian +<\/span> index *<\/span> offset}<\/span> \u2026<\/p>\n

\/\/ ActionButtonItem.render()<\/span>
\nconst<\/span> offsetX =<\/span> this<\/span>.<\/span>props.<\/span>radius *<\/span> Math.<\/span>cos<\/span>(<\/span>this<\/span>.<\/span>props.<\/span>angle)<\/span>;<\/span>
\nconst<\/span> offsetY =<\/span> this<\/span>.<\/span>props.<\/span>radius *<\/span> Math.<\/span>sin<\/span>(<\/span>this<\/span>.<\/span>props.<\/span>angle)<\/span>;<\/span>
\n\/\/ transform: [ {translateY: 0\u2192offsetY}, {translateX: 0\u2192offsetX}, {rotate: startDegree\u2192endDegree}, {scale: 0\u21921} ]<\/span><\/p>\n

\u26a0\ufe0f \u4e00\u4e2a\u5173\u952e\u7684\u6d4b\u91cf\u7ea6\u675f：\u5b50\u9879\u4f4d\u79fb\u662f transform \u21d2 \u5e03\u5c40 dump \u4e0d\u53cd\u6620\u5e73\u79fb（dump \u7ed9\u7684\u662f\u672a\u5e73\u79fb\u7684\u6846）\u21d2 \u4f4d\u7f6e\u5fc5\u987b\u7528\u50cf\u7d20\u6d4b，\u6216\u7528"dump \u4e2d\u5fc3 + \u516c\u5f0f"\u4e24\u6e90\u4e92\u6821（\u672c\u8f6e\u4e24\u4e2a\u90fd\u7528\u4e0a\u4e86）\u3002<\/p>\n

3.4 \u4ea4\u4e92<\/h4>\n

\/\/ FAB \u70b9\u51fb<\/span>
\nonPress=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> {<\/span> this<\/span>.<\/span>props.<\/span>onPress<\/span>(<\/span>)<\/span>;<\/span> if<\/span> (<\/span>this<\/span>.<\/span>props.<\/span>children)<\/span> {<\/span> this<\/span>.<\/span>animateButton<\/span>(<\/span>)<\/span>;<\/span> }<\/span> }<\/span>}<\/span><\/p>\n

animateButton<\/span>(<\/span>)<\/span> {<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>state.<\/span>active)<\/span> {<\/span> this<\/span>.<\/span>reset<\/span>(<\/span>)<\/span>;<\/span> return<\/span>;<\/span> }<\/span>
\n Animated.<\/span>spring<\/span>(<\/span>this<\/span>.<\/span>state.<\/span>anim,<\/span> {<\/span> toValue<\/span>:<\/span> 1<\/span>,<\/span> duration<\/span>:<\/span> 250<\/span> }<\/span>)<\/span>.<\/span>start<\/span>(<\/span>)<\/span>;<\/span>
\n this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> active<\/span>:<\/span> true<\/span> }<\/span>)<\/span>;<\/span>
\n}<\/span>
\nreset<\/span>(<\/span>)<\/span> {<\/span>
\n Animated.<\/span>spring<\/span>(<\/span>this<\/span>.<\/span>state.<\/span>anim,<\/span> {<\/span> toValue<\/span>:<\/span> 0<\/span>,<\/span> duration<\/span>:<\/span> 250<\/span> }<\/span>)<\/span>.<\/span>start<\/span>(<\/span>)<\/span>;<\/span>
\n setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span> this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> active<\/span>:<\/span> false<\/span> }<\/span>)<\/span>;<\/span> }<\/span>,<\/span> 250<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

\/\/ \u5b50\u9879\u70b9\u51fb（renderActions \u91cc）<\/span>
\nonPress=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>this<\/span>.<\/span>props.<\/span>autoInactive)<\/span> {<\/span> this<\/span>.<\/span>timeout =<\/span> setTimeout<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span> this<\/span>.<\/span>reset<\/span>(<\/span>)<\/span>;<\/span> }<\/span>,<\/span> 200<\/span>)<\/span>;<\/span> }<\/span>
\n button.<\/span>props.<\/span>onPress<\/span>(<\/span>)<\/span>;<\/span> \/\/ \u26a0\ufe0f \u65e0\u6761\u4ef6\u8c03\u7528：\u5b50\u9879\u4e0d\u4f20 onPress \u4f1a\u629b\u9519<\/span>
\n}<\/span>}<\/span><\/p>\n

    \n
  • active \u4e3a\u771f\u624d\u6e32\u67d3\u5b50\u9879（renderActions() \u91cc if (!this.state.active) return null）<\/li>\n
  • \u6784\u9020\u51fd\u6570：anim = new Animated.Value(active ? 1 : 0) \u21d2 active={true} \u65f6\u65e0\u9700\u4ea4\u4e92\u5373\u53ef\u6d4b\u91cf（\u672c\u8f6e\u4e3b\u8981\u5224\u636e\u90fd\u7528\u8fd9\u4e2a）<\/li>\n
  • \u26a0\ufe0f Animated.spring \u4f20\u4e86 duration: 250 \u2014\u2014 spring \u4e0d\u8ba4 duration（\u5b83\u7528 friction\/tension）\u21d2 \u8fd9\u4e2a\u53c2\u6570\u662f\u65e0\u6548\u7684<\/li>\n
  • \u26a0\ufe0f button.props.onPress() \u65e0\u6761\u4ef6\u8c03\u7528 \u21d2 \u5b50\u9879\u82e5\u6ca1\u5199 onPress \u4f1a\u629b\u9519（\u672c\u8f6e\u6545\u610f\u4e0d\u89e6\u53d1）<\/li>\n<\/ul>\n
    \n

    \u56db\u3001\u9a8c\u8bc1\u8bbe\u8ba1<\/h3>\n\n\u5224\u636e\u5185\u5bb9<\/tr>\n\n\n\n\n\n
    \u2460 \u4f4d\u7f6e（\u5b9a\u91cf，\u50cf\u7d20）<\/td>\n\u5b50\u9879\u662f transform \u4f4d\u79fb \u21d2 dump \u4e0d\u53cd\u6620 \u21d2 \u6309\u989c\u8272\u6c42\u8d28\u5fc3，\u4e0e radius\u00b7cos\/sin \u6bd4\u5bf9<\/td>\n<\/tr>\n
    \u2461 \u534a\u5f84 A\/B<\/td>\nradius=100 \u4e0e radius=50 \u21d2 \u95f4\u8ddd\u5e94\u7cbe\u786e 2:1<\/td>\n<\/tr>\n
    \u2462 \u89d2\u5ea6\u8303\u56f4<\/td>\nposition: right \u7684\u4e2d\u95f4\u9879\u89d2\u5ea6\u662f 225\u00b0（\u4e0e center \u7684 270\u00b0 \u4e0d\u540c）<\/td>\n<\/tr>\n
    \u2463 \u5f00\u5173（\u5bf9\u7167）<\/td>\nactive=false \u21d2 \u4e00\u4e2a\u5b50\u9879\u90fd\u4e0d\u6e32\u67d3<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u8bf4\u660e：\u4f4d\u79fb\u662f transform，\u6240\u4ee5\u4e0d\u80fd\u53ea\u9760 dump；\u800c\u989c\u8272\u5224\u636e\u7684\u5bb9\u5dee\u8981\u7a84\u3001\u626b\u63cf\u8303\u56f4\u5fc5\u987b\u9650\u5b9a\u5728\u5b9e\u4f8b\u533a\u57df\u5185（\u5426\u5219\u4f1a\u628a\u522b\u7684\u5b9e\u4f8b\u540c\u8272\u9879\u4e00\u8d77\u7b97\u8fdb\u53bb \u2014\u2014 \u672c\u8f6e\u7b2c\u4e00\u7248\u5c31\u8e29\u4e86\u8fd9\u4e2a）\u3002<\/p>\n

    \n

    \u4e94\u3001\u5b9e\u6d4b\u7ed3\u679c<\/h3>\n

    5.1 \u65ad\u8a00 38 \/ 38<\/h4>\n\n\u7ec4\u5185\u5bb9\u7ed3\u679c<\/tr>\n\n\n\n\n\n
    A \u5951\u7ea6<\/td>\nclass + \u4e09\u4e2a\u539f\u578b\u65b9\u6cd5\u3001ActionButton.Item \u9759\u6001\u6302\u8f7d\u3001Item.defaultProps 3 \u952e\u3001defaultProps 16 \u952e \/ propTypes 15 \u952e + \u5173\u952e\u9ed8\u8ba4\u503c\u3001\u89d2\u5ea6\u8868\u4e0e\u516c\u5f0f\u8bb0\u5f55<\/td>\n33\/33<\/td>\n<\/tr>\n
    B \u6e32\u67d3\u4e0e\u51e0\u4f55<\/td>\n4 \u4e2a\u83dc\u5355\u5b9e\u4f8b\u6e32\u67d3\u672a\u629b\u9519\u3001\u6807\u9898\u4e0d\u4e0e\u72b6\u6001\u680f\u91cd\u5408\u3001\u9884\u671f\u51e0\u4f55\u4e0e\u5224\u636e\u8bf4\u660e<\/td>\n3\/3<\/td>\n<\/tr>\n
    C \u4ea4\u4e92\u4e0e\u8fb9\u754c<\/td>\n\u4e8b\u4ef6\u8bb0\u5f55\u683c\u5f0f\u3001M4 \u6253\u5f00\u72b6\u6001\u3001\u4e09\u6761\u8fb9\u754c\u8bb0\u5f55<\/td>\n2\/2<\/td>\n<\/tr>\n
    <\/td>\n\u5408\u8ba1<\/td>\n38\/38<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u5173\u952e\u89c2\u6d4b\u503c：<\/p>\n

    default \u5bfc\u51fa\u7684 typeof = function
    \nActionButton.Item \u7684 typeof = function
    \nItem.defaultProps \u952e\u6570 = 3
    \ndefaultProps \u952e\u6570 = 16 propTypes \u952e\u6570 = 15
    \n\u2605 \u89d2\u5ea6\u8303\u56f4（\u6e90\u7801 alignMap） = center: 180..360 left: 270..360 right: 180..270
    \n\u2605 \u5b9a\u4f4d\u516c\u5f0f（\u6e90\u7801） = offsetX = radius*cos(angle)\u3001offsetY = radius*sin(angle)
    \nUI \u5b89\u5168\u533a：TITLE measureInWindow y=420 > 117 \u2713<\/p>\n

    5.2 \u2605\u2605 \u4f4d\u7f6e\u5b9a\u91cf\u9a8c\u8bc1（\u672c\u8f6e\u6838\u5fc3）<\/h4>\n

    M1：position="center"\u3001radius=100\u30013 \u4e2a\u5b50\u9879（\u7ea2 \/ \u7eff \/ \u84dd\u5b9e\u5fc3\u5706，itemSize=36vp=108px）<\/p>\n\n\u5b50\u9879\u89d2\u5ea6\u7406\u8bba\u504f\u79fb（px）\u5b9e\u6d4b\u8d28\u5fc3<\/tr>\n\n\n\n\n
    \u7ea2<\/td>\n180\u00b0<\/td>\n(-300, 0)<\/td>\n(360, 2211)<\/td>\n<\/tr>\n
    \u7eff<\/td>\n270\u00b0<\/td>\n(0, -300)<\/td>\n(659, 1937)<\/td>\n<\/tr>\n
    \u84dd<\/td>\n360\u00b0<\/td>\n(+300, 0)<\/td>\n(960, 2211)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n
    • \u7ea2 \u2194 \u84dd\u6c34\u5e73\u95f4\u8ddd = 600 px（= 2 \u00d7 300 = 2r）\u2713 \u7cbe\u786e<\/li>\n
    • \u76f8\u90bb\u6c34\u5e73\u95f4\u8ddd = 299 \/ 301 px \u2713<\/li>\n
    • \u7ea2 \u2194 \u7eff\u5782\u76f4\u95f4\u8ddd \u2248 296 px（\u5b9e\u6d4b 274；\u7ea2\/\u84dd\u4e24\u9879\u5728\u5c4f\u5e55\u5e95\u90e8\u88ab\u88c1\u6389\u7ea6 40%，\u8d28\u5fc3\u56e0\u6b64\u4e0a\u79fb \u21d2 \u6362\u7b97\u56de\u771f\u5b9e\u4e2d\u5fc3\u7ea6 -296）\u2713<\/li>\n<\/ul>\n

      M2：\u540c\u7ed3\u6784，\u53ea\u628a radius \u6539\u6210 50（\u9650\u5b9a\u533a\u626b\u626b\u63cf）<\/p>\n\n\u91cfM1（radius 100）M2（radius 50）<\/tr>\n\n\n\n\n
      \u7ea2 \u2194 \u84dd\u6c34\u5e73\u95f4\u8ddd<\/td>\n600 px<\/td>\n300 px<\/td>\n<\/tr>\n
      \u7ea2 \u2194 \u7eff\u5782\u76f4\u95f4\u8ddd<\/td>\n\u2248 -296<\/td>\n-163（\u7406\u8bba -150）<\/td>\n<\/tr>\n
      \u5355\u9879\u50cf\u7d20\u6570（108px \u5706\u7406\u8bba \u2248 9160）<\/td>\n\u2014<\/td>\n\u7ea2 8407 \/ \u84dd 8290 \u2248 \u6ee1\u5706 \u2713<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \u21d2 \u95f4\u8ddd\u4e0e radius \u4e25\u683c\u6210\u6b63\u6bd4（2:1） \u21d2 \u516c\u5f0f\u6210\u7acb \u2713\u2713<\/p>\n

      \u2605 \u9644\u5e26\u8bc1\u5b9e：\u56fe2 \u91cc FAB \u4e0a\u7684 \u201c+\u201d \u5df2\u7ecf\u65cb\u8f6c\u6210 \u201c\u00d7\u201d \u2014\u2014 \u6b63\u662f degrees: 135 \u7684\u6548\u679c（rotate: 0deg \u2192 135deg）\u2713
      \n\u2605 \u5bf9\u7167：active=false（M4）\u21d2 \u5b50\u9879\u4e0d\u6e32\u67d3（\u50cf\u7d20\u5224\u636e\u91cc\u8be5\u533a\u6ca1\u6709\u5b50\u9879\u989c\u8272）\u2713<\/p>\n

      \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

      \"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/p>\n

      \n

      \u516d\u3001\u4e00\u4e2a\u6d4b\u91cf\u4e0a\u7684\u6559\u8bad（\u672c\u8f6e\u81ea\u5df1\u8e29\u7684）<\/h3>\n

      \u7b2c\u4e00\u7248\u50cf\u7d20\u7edf\u8ba1\u6211\u626b\u4e86\u6574\u5f20\u622a\u56fe，\u7ed3\u679c radius=50 \u7684\u7ea2\u8272\u5b50\u9879\u88ab\u6570\u51fa 23,420 \u50cf\u7d20 \u2014\u2014 \u800c\u4e00\u4e2a itemSize=36vp（108px）\u7684\u5b9e\u5fc3\u5706\u6ee1\u6253\u6ee1\u7b97\u4e5f\u53ea\u6709\u7ea6 9,160 \u50cf\u7d20\u3002<\/p>\n

      \u539f\u56e0：\u9875\u9762\u4e0a\u6709 4 \u4e2a\u83dc\u5355\u5b9e\u4f8b，\u5176\u5b83\u5b9e\u4f8b\u4e5f\u6709\u540c\u8272\u7684\u5b50\u9879，\u5168\u88ab\u7b97\u4e86\u8fdb\u6765（M1 \u7684\u7ea2\u9879\u3001M3\/M4 \u7684\u7ea2\u9879）\u3002<\/p>\n

      \u6539\u6cd5：\u628a\u626b\u63cf\u8303\u56f4\u9650\u5b9a\u5728\u8be5\u5b9e\u4f8b\u7684\u6807\u8bb0\u533a\u95f4\u5185（MARK-M2-START ~ MARK-M2-END），\u91cd\u6d4b\u540e\u6bcf\u9879\u50cf\u7d20\u6570\u5c31\u56de\u5230 8,400 \u5de6\u53f3（\u7b26\u5408\u4e00\u4e2a\u5706）\u2713<\/p>\n

      \u21d2 \u6559\u8bad：\u7528\u989c\u8272\u505a\u5b9a\u91cf\u5224\u636e\u65f6，（a）\u5bb9\u5dee\u8981\u7a84；（b）\u5fc5\u987b\u9650\u5b9a\u7a7a\u95f4\u8303\u56f4，\u5426\u5219"\u540c\u7c7b\u5143\u7d20\u51fa\u73b0\u5728\u522b\u5904"\u4f1a\u76f4\u63a5\u6c61\u67d3\u7edf\u8ba1\u91cf\u3002<\/p>\n

      \n

      \u4e03\u3001\u5df2\u77e5\u9650\u5236\u4e0e\u672c\u6b21\u9a8c\u8bc1\u8fb9\u754c<\/h3>\n

      7.1 \u7528\u8fd9\u4e2a\u5e93\u8981\u77e5\u9053\u7684<\/h4>\n\n\u4e8b\u9879\u8bf4\u660e<\/tr>\n\n\n\n\n\n\n\n\n
      \u5b50\u9879\u4f4d\u7f6e\u7531 radius + \u89d2\u5ea6\u51b3\u5b9a<\/td>\ncenter \u662f 180\u2026360（\u5de6\/\u4e0a\/\u53f3\u534a\u5706）；\u6362 position \u4f1a\u6362\u89d2\u5ea6\u8303\u56f4<\/td>\n<\/tr>\n
      \u5b50\u9879\u4f4d\u79fb\u662f transform<\/td>\n\u5e03\u5c40 dump \u4e0d\u53cd\u6620；\u81ea\u52a8\u5316\u6d4b\u8bd5\u8981\u6309\u50cf\u7d20\u6216\u6309\u516c\u5f0f\u63a8\u7b97<\/td>\n<\/tr>\n
      active \u4e3a\u771f\u624d\u6e32\u67d3\u5b50\u9879<\/td>\n\u5173\u95ed\u6001\u65f6\u5b50\u9879\u8282\u70b9\u6570\u4e3a 0<\/td>\n<\/tr>\n
      \u5b50\u9879\u5fc5\u987b\u4f20 onPress<\/td>\n\u6e90\u7801\u91cc button.props.onPress() \u662f\u65e0\u6761\u4ef6\u8c03\u7528 \u21d2 \u4e0d\u4f20\u4f1a\u629b\u9519<\/td>\n<\/tr>\n
      Animated.spring \u7684 duration \u65e0\u6548<\/td>\n\u6e90\u7801\u4f20\u4e86 duration: 250，\u4f46 spring \u7528 friction\/tension，\u8be5\u53c2\u6570\u88ab\u5ffd\u7565<\/td>\n<\/tr>\n
      autoInactive \u9ed8\u8ba4 true<\/td>\n\u70b9\u5b50\u9879\u540e 200ms \u81ea\u52a8\u6536\u8d77<\/td>\n<\/tr>\n
      backdrop \u9ed8\u8ba4 false<\/td>\n\u6253\u5f00\u65f6\u9ed8\u8ba4\u6ca1\u6709\u8499\u5c42；bgColor \u9ed8\u8ba4 transparent<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      7.2 \u672c\u6b21\u9a8c\u8bc1\u7684\u8fb9\u754c<\/h4>\n
    • position: 'left'（270\u2026360）\u672a\u9a8c\u8bc1（\u53ea\u9a8c\u8bc1\u4e86 center \u4e0e right \u7684\u89d2\u5ea6\u5dee\u5f02，left \u672a\u5355\u72ec\u6d4b\u91cf）；<\/li>\n
    • backdrop \/ bgColor \/ onOverlayPress \u672a\u9a8c\u8bc1（\u6ca1\u6709\u771f\u7684\u70b9\u8499\u5c42）；<\/li>\n
    • autoInactive \u7684"\u70b9\u540e 200ms \u6536\u8d77"\u672a\u505a\u4e25\u683c\u8ba1\u65f6；<\/li>\n
    • outRangeScale \/ btnOutRange \/ btnOutRangeTxt \u7684\u89c6\u89c9\u53d8\u5316\u672a\u9010\u9879\u50cf\u7d20\u6838\u5bf9（\u53ea\u786e\u8ba4\u4e86 degrees \u7684\u65cb\u8f6c）；<\/li>\n
    • degrees \u7684\u7cbe\u786e\u89d2\u5ea6\u672a\u91cf（\u53ea\u4ece\u622a\u56fe\u770b\u51fa \u201c+\u201d \u53d8\u6210\u4e86 \u201c\u00d7\u201d）；<\/li>\n
    • startDegree \/ endDegree \u624b\u52a8\u8986\u76d6\u672a\u9a8c\u8bc1；<\/li>\n
    • \u5b50\u9879\u4e0d\u4f20 onPress \u7684\u629b\u9519\u672a\u8fd0\u884c\u65f6\u590d\u73b0（\u6545\u610f\u4e0d\u89e6\u53d1）；<\/li>\n
    • backdrop \u4e3a\u771f\u7684\u8499\u5c42\u4e0e\u5c42\u7ea7\u672a\u9a8c\u8bc1；<\/li>\n
    • \u53ea\u5728\u4e00\u53f0\u6a21\u62df\u5668\u4e0a\u9a8c\u8bc1（Pura X View，density 3，1320\u00d72232），\u6ca1\u6709\u771f\u673a；\u672a\u505a\u8de8\u5e73\u53f0\u5bf9\u7167\u3002<\/li>\n

      \u672a\u6539\u52a8\u5e93\u4ee3\u7801\u3002<\/p>\n

      \n

      \u516b\u3001\u5e38\u89c1\u95ee\u9898<\/h3>\n

      Q1：\u600e\u4e48\u7528？<\/p>\n

      import ActionButton from 'react-native-circular-action-menu';<\/p>\n

      <ActionButton buttonColor="rgba(231,76,60,1)" onPress={() => {}}>
      \n <ActionButton.Item buttonColor="#9b59b6" title="\u65b0\u5efa" onPress={() => {}}>
      \n <Text>＋<\/Text>
      \n <\/ActionButton.Item>
      \n <ActionButton.Item buttonColor="#3498db" title="\u6536\u85cf" onPress={() => {}}>
      \n <Text>\u2605<\/Text>
      \n <\/ActionButton.Item>
      \n<\/ActionButton><\/p>\n

      \u26a0\ufe0f \u6bcf\u4e2a ActionButton.Item \u90fd\u8981\u7ed9 onPress（\u6e90\u7801\u91cc\u662f\u65e0\u6761\u4ef6\u8c03\u7528）\u3002<\/p>\n

      Q2：\u5b50\u9879\u662f\u600e\u4e48\u6392\u5e03\u7684？<\/p>\n

      \u5b50\u9879\u843d\u5728\u4ee5 FAB \u4e3a\u5706\u5fc3\u3001radius \u4e3a\u534a\u5f84\u7684\u5706\u5f27\u4e0a：<\/p>\n

      offsetX = radius * cos(angle)
      \noffsetY = radius * sin(angle)<\/p>\n

      \u89d2\u5ea6\u8303\u56f4\u7531 position \u51b3\u5b9a：<\/p>\n\nposition\u89d2\u5ea6\u8303\u56f4\u6548\u679c<\/tr>\n\n\n\n\n
      center（\u9ed8\u8ba4）<\/td>\n180\u00b0\u2026360\u00b0<\/td>\n\u5de6 \u2192 \u4e0a \u2192 \u53f3（\u534a\u5706）<\/td>\n<\/tr>\n
      left<\/td>\n270\u00b0\u2026360\u00b0<\/td>\n\u4e0a \u2192 \u5de6<\/td>\n<\/tr>\n
      right<\/td>\n180\u00b0\u2026270\u00b0<\/td>\n\u5de6 \u2192 \u4e0a<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \u5b50\u9879\u6570\u91cf\u4e3a n \u65f6，\u76f8\u90bb\u89d2\u5ea6\u95f4\u9694\u662f (end – start) \/ (n – 1)\u3002<\/p>\n

      Q3：\u600e\u4e48\u8c03\u5706\u7684\u5927\u5c0f\u4e0e\u95f4\u8ddd？<\/p>\n

      <ActionButton radius={120} size={70} itemSize={44} \u2026 \/>
      \n\/\/ \u2191\u5b50\u9879\u5230\u5706\u5fc3 \u2191FAB \u76f4\u5f84 \u2191\u5b50\u9879\u76f4\u5f84<\/p>\n

      \u5b9e\u6d4b：radius \u4ece 100 \u6539\u6210 50 \u21d2 \u5b50\u9879\u6c34\u5e73\u95f4\u8ddd\u4ece 600px \u53d8\u6210 300px（density 3）\u3002<\/p>\n

      Q4：\u6253\u5f00\u65f6 FAB \u4e0a\u7684\u56fe\u6807\u4f1a\u8f6c\u5417？<\/p>\n

      \u4f1a\u3002degrees \u9ed8\u8ba4 135，\u6253\u5f00\u65f6 rotate: 0deg \u2192 135deg（\u6240\u4ee5\u9ed8\u8ba4\u7684 \u201c+\u201d \u4f1a\u770b\u8d77\u6765\u50cf \u201c\u00d7\u201d）\u3002\u60f3\u8ba9\u5b83\u8f6c 45\u00b0 \u5c31\u4f20 degrees={45}\u3002<\/p>\n

      Q5：\u70b9\u4e86\u5b50\u9879\u81ea\u5df1\u4e0d\u4f1a\u6536\u8d77\u6765？<\/p>\n

      autoInactive \u9ed8\u8ba4 true（\u70b9\u540e 200ms \u81ea\u52a8\u6536\u8d77）\u3002\u60f3\u8ba9\u5b83\u4fdd\u6301\u5c55\u5f00\u5c31\u4f20 autoInactive={false}，\u6216\u81ea\u5df1\u63a7\u5236 active\u3002<\/p>\n

      Q6：\u60f3\u8ba9\u83dc\u5355\u4e00\u5f00\u59cb\u5c31\u662f\u5c55\u5f00\u7684（\u6216\u53d7\u63a7）？<\/p>\n

      <ActionButton active={true} \u2026 \/> \/\/ \u521d\u59cb\u5c55\u5f00<\/p>\n

      \u26a0\ufe0f \u6ce8\u610f active \u53ea\u662f\u521d\u59cb\u503c（\u6784\u9020\u51fd\u6570\u91cc\u8bfb\u53d6），\u540e\u7eed\u72b6\u6001\u7531\u7ec4\u4ef6\u5185\u90e8\u7ef4\u62a4\u3002<\/p>\n

      Q7：\u4e3a\u4ec0\u4e48\u81ea\u52a8\u5316\u6d4b\u8bd5\u8bfb\u4e0d\u5230\u5b50\u9879\u4f4d\u7f6e？<\/p>\n

      \u56e0\u4e3a\u5b50\u9879\u4f4d\u79fb\u662f transform（translateX\/translateY），\u5e03\u5c40 dump \u4e0d\u4f1a\u53cd\u6620\u5e73\u79fb \u21d2 \u8981\u6309\u50cf\u7d20\u6d4b，\u6216\u6309\u516c\u5f0f radius\u00b7cos\/sin \u63a8\u7b97\u3002<\/p>\n

      Q8：\u8fd9\u4e2a\u5e93\u9700\u8981\u9e3f\u8499\u4fa7\u505a\u4ec0\u4e48\u7279\u6b8a\u5904\u7406\u5417？<\/p>\n

      \u4e0d\u9700\u8981\u3002 \u7eaf JS\u3001\u53ea\u4f9d\u8d56 prop-types\u3001\u65e0\u539f\u751f\u6a21\u5757\u3001\u4e0d\u9700\u8981 HAR \/ \u6743\u9650 \/ ohpm\u3002<\/p>\n

      \n

      \u5c0f\u7ed3<\/h3>\n

      react-native-circular-action-menu \u662f\u7eaf JS \u7684\u5706\u5f62\u5c55\u5f00\u83dc\u5355（ActionButton + ActionButton.Item）\u3002\u8bbe\u5907\u4fa7 38 \/ 38 \u65ad\u8a00\u901a\u8fc7\u3002<\/p>\n

      \u6700\u503c\u5f97\u8bb0\u4e0b\u6765\u7684\u662f\u8fd9\u51e0\u6761：<\/p>\n

    • \n

      \u2605\u2605 \u6709\u95ed\u5f0f\u516c\u5f0f\u5c31\u7528\u5b83\u505a\u5b9a\u91cf\u5224\u636e\u3002 \u5b50\u9879\u4f4d\u7f6e = (radius\u00b7cos(angle), radius\u00b7sin(angle)) \u21d2 \u6211\u6309\u989c\u8272\u6c42\u8d28\u5fc3，\u5b9e\u6d4b radius=100 \u65f6\u7ea2\u2194\u84dd 600px\u3001radius=50 \u65f6 300px（\u7cbe\u786e 2:1），\u76f8\u90bb\u95f4\u8ddd 299\/301px \u21d2 \u516c\u5f0f\u4e0e alignMap \u7684\u89d2\u5ea6\u8303\u56f4\u540c\u65f6\u88ab\u8bc1\u5b9e\u3002
      \n\u21d2 \u6bd4"\u770b\u8d77\u6765\u50cf\u4e2a\u534a\u5706"\u786c\u5f97\u591a（\u56fe2 \u4e5f\u786e\u5b9e\u4e00\u773c\u53ef\u89c1\u534a\u5706，\u4e24\u8005\u4e92\u4e3a\u5370\u8bc1）\u3002<\/p>\n<\/li>\n

    • \n

      \u2605 transform \u4f4d\u79fb \u21d2 dump \u4e0d\u53ef\u4fe1，\u5fc5\u987b\u6362\u5224\u636e\u3002 \u8fd9\u4e2a\u5e93\u7684\u5b50\u9879\u5b9a\u4f4d\u5168\u5728 transform \u91cc \u21d2 \u5e03\u5c40 dump \u7ed9\u7684\u662f\u672a\u5e73\u79fb\u7684\u6846 \u21d2 \u53ea\u80fd\u6309\u50cf\u7d20\u6d4b，\u6216\u7528"dump \u4e2d\u5fc3 + \u516c\u5f0f"\u4e24\u6e90\u4e92\u6821\u3002<\/p>\n<\/li>\n

    • \n

      \u2605 \u989c\u8272\u5b9a\u91cf\u5224\u636e\u5fc5\u987b\u9650\u5b9a\u7a7a\u95f4\u8303\u56f4\u3002 \u6211\u7b2c\u4e00\u7248\u626b\u4e86\u6574\u5c4f，\u628a\u5176\u5b83\u5b9e\u4f8b\u7684\u540c\u8272\u5b50\u9879\u4e5f\u7b97\u8fdb\u6765，\u5f97\u5230"\u4e00\u4e2a\u5706 23,420 \u50cf\u7d20"（\u6ee1\u5706\u53ea\u6709\u7ea6 9,160）\u8fd9\u79cd\u660e\u663e\u4e0d\u5408\u7406\u7684\u6570 \u21d2 \u9650\u5b9a\u5230\u5b9e\u4f8b\u533a\u95f4\u540e\u6062\u590d\u6b63\u5e38\u3002\u21d2 \u5bb9\u5dee\u8981\u7a84 + \u8303\u56f4\u8981\u9650\u5b9a\u3002<\/p>\n<\/li>\n

    • \n

      \u2605 \u987a\u624b\u628a"\u9759\u6001\u6302\u8f7d"\u548c"\u9ed8\u8ba4\u503c\u6570\u91cf"\u90fd\u65ad\u8a00\u6389\u3002 ActionButton.Item \u662f\u9759\u6001\u5c5e\u6027\u6302\u8f7d（\u4e0d\u662f\u5355\u72ec import），Item.defaultProps 3 \u952e\u3001ActionButton.defaultProps 16 \u952e\u3001propTypes 15 \u952e \u2014\u2014 \u6211\u4e00\u5f00\u59cb\u628a\u540e\u4e24\u4e2a\u5404\u591a\u7b97\u4e86 1（\u51ed\u5370\u8c61\u6570\u7684），\u9760\u5b9e\u6d4b\u7ea0\u6b63\u3002<\/p>\n<\/li>\n

    • \n

      \u4f9d\u8d56\u60c5\u51b5\u5728\u9884\u68c0\u9636\u6bb5\u5c31\u80fd\u786e\u5b9a：import \u56fe\u91cc\u53ea\u6709\u4e00\u4e2a prop-types，\u800c\u5b83\u5df2\u5728\u5bbf\u4e3b\u91cc \u21d2 \u672c\u8f6e\u5168\u7a0b\u6ca1\u5728\u4f9d\u8d56\u4e0a\u82b1\u65f6\u95f4\u3002<\/p>\n<\/li>\n

      \n

      \u672c\u7bc7\u7528\u5230\u7684\u5e93<\/h3>\n\n\u9879\u5185\u5bb9<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n
      \u4e09\u65b9\u5e93<\/td>\nreact-native-circular-action-menu（\u4e0a\u6e38 0.5.0 \u7684\u9e3f\u8499\u9002\u914d\u7248）<\/td>\n<\/tr>\n
      \u9002\u914d\u4ed3\u5e93<\/td>\nhttps:\/\/atomgit.com\/oh-react-native\/react-native-circular-action-menu<\/td>\n<\/tr>\n
      \u9002\u914d TAG<\/td>\n0.5.0-ohos-1.0.0<\/td>\n<\/tr>\n
      \u9700\u8981 HAR \/ \u6743\u9650 \/ ohpm<\/td>\n\u90fd\u4e0d\u9700\u8981（\u7eaf JS）<\/td>\n<\/tr>\n
      \u5e93\u7c7b\u578b<\/td>\n\u7eaf JS \u7ec4\u4ef6\u5e93：\u5706\u5f62\u5c55\u5f00\u83dc\u5355（ActionButton + ActionButton.Item）<\/td>\n<\/tr>\n
      \u8fd0\u884c\u65f6\u4f9d\u8d56<\/td>\n\u2705 \u4ec5 prop-types@^15.6.1（\u5bbf\u4e3b\u4e00\u822c\u5df2\u6709）<\/td>\n<\/tr>\n
      prepare \/ postinstall<\/td>\n\u2705 \u90fd\u6ca1\u6709<\/td>\n<\/tr>\n
      \u8bb8\u53ef\u8bc1<\/td>\nMIT<\/td>\n<\/tr>\n
      \u4e0a\u6e38\u4ed3\u5e93<\/td>\nhttps:\/\/github.com\/geremih\/react-native-circular-action-menu（\u2605477）<\/td>\n<\/tr>\n
      \u5bbf\u4e3b\u5de5\u7a0b<\/td>\nRNOH084Demo（\u6d4b\u8bd5\u9875 rnAppKey = CircularMenuTestApp）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      # \u4ece\u9002\u914d\u4ed3\u5e93\u5b89\u88c5<\/span>
      \nnpm<\/span> install<\/span> "git+https:\/\/atomgit.com\/oh-react-native\/react-native-circular-action-menu.git#0.5.0-ohos-1.0.0"<\/span> –ignore-scripts<\/p>\n

      # \u672c\u5730\u76ee\u5f55\u63a5\u5165（\u82e5\u65e0 prop-types \u5219\u8865\u88c5）<\/span>
      \nnpm<\/span> install<\/span> ..<\/span>\/react-native-circular-action-menu –ignore-scripts
      \nnpm<\/span> install<\/span> prop-types –ignore-scripts<\/p>\n

      \/\/ metro.config.js<\/span>
      \nwatchFolders<\/span>:<\/span> [<\/span> path.<\/span>resolve<\/span>(<\/span>__dirname,<\/span> '..\/react-native-circular-action-menu'<\/span>)<\/span> ]<\/span>,<\/span><\/p>\n

      import ActionButton from 'react-native-circular-action-menu';<\/p>\n

      \/\/ \u2460 \u57fa\u672c\u7528\u6cd5：\u70b9 FAB \u5c55\u5f00\u6210\u4e00\u5708（\u9ed8\u8ba4 center \u21d2 \u5de6\/\u4e0a\/\u53f3\u534a\u5706）
      \n<ActionButton
      \n buttonColor="rgba(231,76,60,1)"
      \n radius={100} \/\/ \u5b50\u9879\u5230\u5706\u5fc3\u7684\u8ddd\u79bb
      \n size={63} \/\/ FAB \u76f4\u5f84
      \n itemSize={36} \/\/ \u5b50\u9879\u76f4\u5f84
      \n degrees={135} \/\/ \u6253\u5f00\u65f6 FAB \u56fe\u5f62\u65cb\u8f6c\u89d2\u5ea6
      \n onPress={() => {}}
      \n onOverlayPress={() => {}}
      \n>
      \n <ActionButton.Item buttonColor="#9b59b6" onPress={() => {}}><Text>＋<\/Text><\/ActionButton.Item>
      \n <ActionButton.Item buttonColor="#3498db" onPress={() => {}}><Text>\u2605<\/Text><\/ActionButton.Item>
      \n <ActionButton.Item buttonColor="#1abc9c" onPress={() => {}}><Text>\u2665<\/Text><\/ActionButton.Item>
      \n<\/ActionButton><\/p>\n

      \/\/ \u2461 \u6362\u4f4d\u7f6e（\u51b3\u5b9a\u89d2\u5ea6\u8303\u56f4）\u4e0e\u81ea\u5b9a\u4e49\u89d2\u5ea6
      \n<ActionButton position="right" \u2026 \/> \/\/ 180\u00b0..270\u00b0
      \n<ActionButton position="left" \u2026 \/> \/\/ 270\u00b0..360\u00b0
      \n<ActionButton startDegree={200} endDegree={340} \u2026 \/><\/p>\n

      \/\/ \u2462 \u521d\u59cb\u5c55\u5f00 \/ \u4e0d\u81ea\u52a8\u6536\u8d77 \/ \u5e26\u8499\u5c42
      \n<ActionButton active={true} autoInactive={false} backdrop={true} bgColor="rgba(0,0,0,0.4)" \u2026 \/><\/p>\n

      \/\/ \u26a0\ufe0f \u6bcf\u4e2a Item \u90fd\u8981\u7ed9 onPress（\u6e90\u7801\u65e0\u6761\u4ef6\u8c03\u7528，\u4e0d\u4f20\u4f1a\u629b\u9519）<\/p>\n

      # \u6362\u9875\u542f\u52a8\u6d4b\u8bd5\u9875 \u2014\u2014 force-stop \u4e0d\u80fd\u7701<\/span>
      \nhdc shell aa force-stop com.rnoh084.demo
      \nhdc shell aa start -b<\/span> com.rnoh084.demo -a<\/span> EntryAbility –ps<\/span> rnAppKey CircularMenuTestApp<\/p>\n

      \u4f4d\u7f6e\u5224\u636e\u7684\u590d\u73b0\u65b9\u5f0f<\/h4>\n

      \u5b50\u9879\u4f4d\u7f6e（\u7406\u8bba）：offsetX = radius\u00b7cos(angle)\u3001offsetY = radius\u00b7sin(angle)
      \n center + 3 \u9879 \u21d2 \u89d2\u5ea6 180\u00b0\/270\u00b0\/360\u00b0 \u21d2 \u504f\u79fb (-r,0)\u3001(0,-r)\u3001(+r,0)
      \n density 3 \u21d2 radius=100 \u65f6 r=300px \u21d2 \u5de6\u53f3\u4e24\u9879\u6c34\u5e73\u95f4\u8ddd\u5e94\u4e3a 600px<\/p>\n

      \u26a0\ufe0f \u5b50\u9879\u4f4d\u79fb\u662f transform \u21d2 \u5e03\u5c40 dump \u4e0d\u53cd\u6620 \u21d2 \u5fc5\u987b\u6309\u50cf\u7d20\u6d4b
      \n\u26a0\ufe0f \u6309\u989c\u8272\u6c42\u8d28\u5fc3\u65f6：\u5bb9\u5dee\u8981\u7a84，\u4e14\u3010\u626b\u63cf\u8303\u56f4\u5fc5\u987b\u9650\u5b9a\u5728\u672c\u5b9e\u4f8b\u533a\u95f4\u5185\u3011
      \n （\u5426\u5219\u4f1a\u628a\u9875\u9762\u4e0a\u5176\u5b83\u5b9e\u4f8b\u7684\u540c\u8272\u5b50\u9879\u4e00\u8d77\u7b97\u8fdb\u53bb）<\/p>\n

      \u9a8c\u8bc1\u73af\u5883<\/h3>\n\n\u9879\u7248\u672c<\/tr>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
      React Native<\/td>\n0.84.1<\/td>\n<\/tr>\n
      React<\/td>\n19.2.3<\/td>\n<\/tr>\n
      RNOH（npm \/ ohpm）<\/td>\n@react-native-oh\/react-native-harmony \/ @rnoh\/react-native-openharmony 0.84.3<\/td>\n<\/tr>\n
      Node.js \/ npm<\/td>\nv24.14.0 \/ 11.9.0<\/td>\n<\/tr>\n
      DevEco Studio<\/td>\n26.0.0.621<\/td>\n<\/tr>\n
      HarmonyOS SDK<\/td>\nAPI 26（26.0.0.32）<\/td>\n<\/tr>\n
      \u8bbe\u5907<\/td>\nHarmonyOS 7.0.0(26.0.0) Beta2 \u6a21\u62df\u5668 Pura X View（ohos-x64），1320\u00d72232，density 3<\/td>\n<\/tr>\n
      \u672c\u673a\u72b6\u6001\u680f\u9ad8\u5ea6<\/td>\n117px（\u9875\u9762\u7559\u767d\u53d6 48vp）<\/td>\n<\/tr>\n
      \u5bbf\u4e3b\u4f9d\u8d56<\/td>\nprop-types 15.8.1（\u5df2\u6709 \u21d2 \u65e0\u9700\u8865\u88c5）<\/td>\n<\/tr>\n
      \u5bbf\u4e3b HAP \u4ea7\u7269<\/td>\nentry-default-signed.hap<\/td>\n<\/tr>\n
      \u672c\u6b21\u6784\u5efa<\/td>\nassembleHap \u9996\u8f6e 4 \u5206 01 \u79d2；\u4fee\u8ba1\u6570\u540e 3 \u5206 57 \u79d2<\/td>\n<\/tr>\n
      \u9a8c\u8bc1\u89c4\u6a21<\/td>\n\u8bbe\u5907\u4fa7 38 \/ 38 \u65ad\u8a00；\u4f4d\u7f6e\u5b9a\u91cf\u91cf\u6d4b 2 \u7ec4（radius 100 \u21d2 600px\u3001radius 50 \u21d2 300px，\u5404 3 \u4e2a\u5b50\u9879\u8d28\u5fc3）；\u89d2\u5ea6\u8303\u56f4\u8bb0\u5f55 1 \u7ec4；\u5f00\u5173\u5bf9\u7167 1 \u4f8b；\u65cb\u8f6c\u6548\u679c 1 \u9879（\u622a\u56fe\u53ef\u89c1 "+\u201c\u2192"\u00d7\u201d）；UI \u5b89\u5168\u533a 1 \u9879<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
      \n

      \u76f8\u5173\u793e\u533a\u4e0e\u9879\u76ee\u5730\u5740<\/h3>\n\n\u9879\u76ee\u5730\u5740<\/tr>\n\n\n\n\n\n\n
      React Native \u9e3f\u8499\u5b98\u65b9\u793e\u533a（CPF-RN）<\/td>\nhttps:\/\/atomgit.com\/CPF-RN<\/td>\n<\/tr>\n
      RNOH \u6846\u67b6\u4ed3\u5e93<\/td>\nhttps:\/\/atomgit.com\/openharmony-RN\/ohos_react_native<\/td>\n<\/tr>\n
      RNOH \u4e09\u65b9\u5e93\u4f7f\u7528\u6587\u6863<\/td>\nhttps:\/\/atomgit.com\/OpenHarmony-RN\/usage-docs<\/td>\n<\/tr>\n
      React Native for OpenHarmony \u7ec4\u7ec7<\/td>\nhttps:\/\/atomgit.com\/oh-react-native<\/td>\n<\/tr>\n
      RN \u4e09\u65b9\u5e93\u9e3f\u8499\u9002\u914d\u6e05\u5355<\/td>\nhttps:\/\/atomgit.com\/oh-react-native\/rn-ohos-adaptation-overview<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      \u6b22\u8fce\u52a0\u5165 CPF-RN \u9e3f\u8499\u793e\u533a：https:\/\/atomgit.com\/CPF-RN<\/p>\n

      React Native for OpenHarmony \u7ec4\u7ec7：https:\/\/atomgit.com\/oh-react-native<\/p>\n

      RN \u4e09\u65b9\u5e93\u9e3f\u8499\u9002\u914d\u6e05\u5355：https:\/\/atomgit.com\/oh-react-native\/rn-ohos-adaptation-overview<\/p>\n","protected":false},"excerpt":{"rendered":"

      \/* MD \/ \u5bcc\u6587\u672c\u4e2d\u7684 .toc\uff08\u542b\u535a\u5ba2\u56ed\u642c\u5bb6\u7b49\u5d4c\u5957\u7ed3\u6784\uff09\uff1b.toc-box \u5728\u4fa7\u680f\uff0c\u4e0d\u53d7\u5f71\u54cd *\/#content_views .toc,\/* \u7f16\u8f91\u5668\u5e38\u5728\u76ee\u5f55\u524d\u540e\u63d2\u5165\u7a7a p\uff08:empty \u4ecd\u5360 20px\uff09\uff0c\u4e00\u5e76\u53bb\u6389\u907f\u514d\u9876\u7a7a\u9699 *\/#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views > .toc + p:empty,\/* \u5bcc\u6587\u672c\u65e7\u7248\u76ee\u5f55\u6807\u8bb0 *\/#content<\/p>\n","protected":false},"author":2,"featured_media":116944,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6800,280,524,1862,664],"topic":[],"class_list":["post-116948","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-react-native","tag-harmonyos","tag-react-js","tag-wpf","tag-664"],"yoast_head":"\nReact Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-circular-action-menu \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357 - \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\/116948.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-circular-action-menu \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\/* MD \/ \u5bcc\u6587\u672c\u4e2d\u7684 .toc\uff08\u542b\u535a\u5ba2\u56ed\u642c\u5bb6\u7b49\u5d4c\u5957\u7ed3\u6784\uff09\uff1b.toc-box \u5728\u4fa7\u680f\uff0c\u4e0d\u53d7\u5f71\u54cd *\/#content_views .toc,\/* \u7f16\u8f91\u5668\u5e38\u5728\u76ee\u5f55\u524d\u540e\u63d2\u5165\u7a7a p\uff08:empty \u4ecd\u5360 20px\uff09\uff0c\u4e00\u5e76\u53bb\u6389\u907f\u514d\u9876\u7a7a\u9699 *\/#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views > .toc + p:empty,\/* \u5bcc\u6587\u672c\u65e7\u7248\u76ee\u5f55\u6807\u8bb0 *\/#content\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/116948.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-10-22T02:06:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261022020559-6ad96f870d39f.jpg\" \/>\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=\"8 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/116948.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/116948.html\",\"name\":\"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-circular-action-menu \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-10-22T02:06:04+00:00\",\"dateModified\":\"2026-10-22T02:06:04+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/116948.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/116948.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/116948.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-circular-action-menu \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-circular-action-menu \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357 - \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\/116948.html","og_locale":"zh_CN","og_type":"article","og_title":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-circular-action-menu \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\/* MD \/ \u5bcc\u6587\u672c\u4e2d\u7684 .toc\uff08\u542b\u535a\u5ba2\u56ed\u642c\u5bb6\u7b49\u5d4c\u5957\u7ed3\u6784\uff09\uff1b.toc-box \u5728\u4fa7\u680f\uff0c\u4e0d\u53d7\u5f71\u54cd *\/#content_views .toc,\/* \u7f16\u8f91\u5668\u5e38\u5728\u76ee\u5f55\u524d\u540e\u63d2\u5165\u7a7a p\uff08:empty \u4ecd\u5360 20px\uff09\uff0c\u4e00\u5e76\u53bb\u6389\u907f\u514d\u9876\u7a7a\u9699 *\/#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views > .toc + p:empty,\/* \u5bcc\u6587\u672c\u65e7\u7248\u76ee\u5f55\u6807\u8bb0 *\/#content","og_url":"https:\/\/www.wsisp.com\/helps\/116948.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-10-22T02:06:04+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261022020559-6ad96f870d39f.jpg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"8 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/116948.html","url":"https:\/\/www.wsisp.com\/helps\/116948.html","name":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-circular-action-menu \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-10-22T02:06:04+00:00","dateModified":"2026-10-22T02:06:04+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/116948.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/116948.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/116948.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-circular-action-menu \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357"}]},{"@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\/116948","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=116948"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/116948\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/116944"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=116948"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=116948"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=116948"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=116948"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}