{"id":117016,"date":"2026-10-22T10:08:06","date_gmt":"2026-10-22T02:08:06","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/117016.html"},"modified":"2026-10-22T10:08:06","modified_gmt":"2026-10-22T02:08:06","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-switch-selector-%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\/117016.html","title":{"rendered":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-switch-selector \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-switch-selector（\u4e8c\u9009\u4e00\u5f00\u5173 \/ \u5206\u6bb5\u5f00\u5173）\u9002\u914d\u5230 HarmonyOS \u7684\u5b8c\u6574\u8fc7\u7a0b\u3002<\/p>\n

\u5b83\u662f\u4e00\u4e2a\u7eaf JS class \u7ec4\u4ef6（index.js 336 \u884c），\u7528\u4e00\u4e2a\u4f1a\u6ed1\u52a8\u7684\u8272\u5757\u8868\u793a\u5f53\u524d\u9009\u4e2d\u9879，\u8fd8\u652f\u6301\u5de6\u53f3\u6ed1\u52a8\u5207\u6362\u3002\u5b83\u5e26\u6765\u4e00\u4e2a\u5f88\u5bb9\u6613\u8ba9\u4eba\u4ee5\u4e3a"\u7ec4\u4ef6\u574f\u4e86"\u7684\u9ed8\u8ba4\u503c：<\/p>\n

defaultProps.initial = -1，\u800c\u6e90\u7801\u91cc<\/p>\n

getBgColor<\/span>(<\/span>)<\/span> {<\/span>
\n const<\/span> {<\/span> selected }<\/span> =<\/span> this<\/span>.<\/span>state;<\/span>
\n if<\/span> (<\/span>selected ===<\/span> –<\/span>1<\/span>)<\/span> {<\/span> return<\/span> 'transparent'<\/span>;<\/span> }<\/span> \/\/ \u2190 \u6ed1\u5757\u53d8\u900f\u660e<\/span>
\n return<\/span> options[<\/span>selected]<\/span>?.<\/span>activeColor ||<\/span> buttonColor;<\/span>
\n}<\/span><\/p>\n

\u21d2 \u4e0d\u4f20 initial（\u4e5f\u4e0d\u4f20 value）\u65f6，\u6ed1\u5757\u662f\u900f\u660e\u7684 \u2014\u2014 \u5c4f\u6155\u4e0a\u53ea\u770b\u5f97\u5230\u6587\u5b57\u548c\u8fb9\u6846，\u770b\u4e0d\u5230\u90a3\u4e2a\u4f1a\u52a8\u7684\u8272\u5757，\u800c\u4e14\u4e0d\u62a5\u9519\u3001\u4e0d\u8b66\u544a\u3002<\/p>\n

\u5b9e\u6d4b（\u6ed1\u5757\u989c\u8272\u662f buttonColor: '#BCD635'，\u9ec4\u7eff）：\u4e0d\u4f20 initial \u7684\u5b9e\u4f8b，\u6309\u8be5\u989c\u8272\u626b\u5168\u5c4f\u662f 0 \u4e2a\u50cf\u7d20 \u2713<\/p>\n

\u53e6\u4e00\u4e2a\u5f88\u9002\u5408\u505a\u91cf\u5316\u9a8c\u8bc1\u7684\u70b9：\u6ed1\u5757\u7684\u51e0\u4f55\u53ef\u4ee5\u7cbe\u786e\u7b97\u51fa\u6765\u3002hasPadding=false\u3001buttonMargin=0 \u65f6：<\/p>\n

\u6ed1\u5757\u5bbd\u5ea6 = width \/ options.length
\ntranslateX = (k \/ options.length) \u00b7 width \u2190 animatedValue = k\/N \u63d2\u503c\u5230 [0, width]
\n\u21d2 \u6ed1\u5757\u5de6\u8fb9\u754c = (k\/N)\u00b7width，\u5bbd = width\/N \u21d2 \u6b63\u597d\u8986\u76d6\u7b2c k \u683c<\/p>\n

\u5b9e\u6d4b（\u5bb9\u5668\u5bbd 1248px\u3001N=2）\u4e09\u4e2a\u5b9e\u4f8b：<\/p>\n\n\u5b9e\u4f8b\u914d\u7f6e\u9884\u671f\u6ed1\u5757 x\u5b9e\u6d4b\u6ed1\u5757 x<\/tr>\n\n\n\n\n
W1<\/td>\ninitial={0}<\/td>\n36\u2026660（\u5de6\u534a）<\/td>\n37\u2026658 \u2713<\/td>\n<\/tr>\n
W2<\/td>\ninitial={1}<\/td>\n660\u20261284（\u53f3\u534a）<\/td>\n661\u20261282 \u2713<\/td>\n<\/tr>\n
W3<\/td>\n\u4e0d\u4f20 initial<\/td>\n\u65e0\u6ed1\u5757<\/td>\n0 \u50cf\u7d20\u5339\u914d \u2713\u2713<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u800c\u4e14\u4ea4\u4e92\u4e5f\u4e00\u5e76\u9a8c\u5230\u4e86：\u70b9\u53f3\u4fa7\u9009\u9879 \u21d2 PRESS W1 onPress(off)（\u62ff\u5230\u7684\u662f\u8be5\u9009\u9879\u7684 value）\u2713<\/p>\n

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

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/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
\u4e0a\u6e38\u6700\u65b0\u7248<\/td>\n2.3.0；license: MIT；\u4e0a\u6e38 star 46<\/td>\n<\/tr>\n
\u5e93\u7c7b\u578b<\/td>\n\u7eaf JS \u5355\u7ec4\u4ef6\u5e93：SwitchSelector（class \u7ec4\u4ef6）<\/td>\n<\/tr>\n
\u662f\u5426\u9700\u8981\u539f\u751f\u9002\u914d<\/td>\n\u4e0d\u9700\u8981（\u65e0 harmony\/\u3001\u65e0 NativeModules；import \u56fe\u53ea\u6709 prop-types \/ react \/ react-native）<\/td>\n<\/tr>\n
\u8fd0\u884c\u65f6\u4f9d\u8d56<\/td>\n\u26a0\ufe0f \u6709：prop-types@^15.7.2 \u21d2 \u76ee\u5f55\/file: \u63a5\u5165\u4e0d\u4f1a\u81ea\u52a8\u88c5\u5b83（\u672c\u8f6e\u5bbf\u4e3b\u91cc\u6070\u597d\u5df2\u6709 15.8.1，\u6240\u4ee5\u6ca1\u88ab\u54ac\u5230；\u6362\u5e72\u51c0\u5bbf\u4e3b\u4f1a\u76f4\u63a5\u5d29）<\/td>\n<\/tr>\n
prepare \/ prepublish<\/td>\n\u90fd\u6ca1\u6709（\u53ea\u6709 lint \/ test）\u21d2 \u5b89\u88c5\u8def\u5f84\u5e72\u51c0<\/td>\n<\/tr>\n
main<\/td>\nindex.js（\u6e90\u7801，\u4e0d\u662f\u4ea7\u7269）<\/td>\n<\/tr>\n
\u5bfc\u51fa\u5f62\u6001<\/td>\nexport default class SwitchSelector \u21d2 \u6709 default \u5bfc\u51fa，\u662f class<\/td>\n<\/tr>\n
\u9700\u8981 HAR \/ \u6743\u9650 \/ ohpm<\/td>\n\u274c \u90fd\u4e0d\u9700\u8981<\/td>\n<\/tr>\n
\u8bbe\u5907\u4fa7\u65ad\u8a00<\/td>\n\u2705 34 \/ 34 \u5168\u90e8\u901a\u8fc7（A 25 + B 8 + C 1）<\/td>\n<\/tr>\n
\u2605\u2605 \u6700\u91cd\u8981\u7684\u5751<\/td>\ninitial \u9ed8\u8ba4 -1 \u21d2 \u6ed1\u5757\u989c\u8272 transparent \u21d2 \u5c4f\u4e0a\u5b8c\u5168\u770b\u4e0d\u5230\u6ed1\u5757（\u4e0d\u62a5\u9519）<\/td>\n<\/tr>\n
\u2605 \u50cf\u7d20\u5224\u636e<\/td>\n\u2705 \u6ed1\u5757 #BCD635：W1 \u5de6\u534a 37\u2026658\u3001W2 \u53f3\u534a 661\u20261282\u3001W3 \u65e0<\/td>\n<\/tr>\n
\u2605 \u4ea4\u4e92<\/td>\n\u2705 \u70b9\u9009\u9879 \u21d2 onPress(off)（\u62ff\u5230 value）<\/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\u53ea\u6709 prop-types \/ react \/ react-native \u2713<\/td>\n<\/tr>\n
\u2464<\/td>\nscripts \u626b prepare \u5bb6\u65cf<\/td>\n\u6ca1\u6709 \u2713<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

npm<\/span> install<\/span> "git+https:\/\/atomgit.com\/oh-react-native\/react-native-switch-selector.git#2.3.0-ohos-1.0.0"<\/span> –ignore-scripts<\/p>\n

# \u26a0\ufe0f \u5b83\u81ea\u5e26\u8fd0\u884c\u65f6\u4f9d\u8d56 prop-types，\u76ee\u5f55\/\u8f6f\u94fe\u63a5\u5165\u4e0d\u4f1a\u81ea\u52a8\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-switch-selector'<\/span>)<\/span> ]<\/span>,<\/span><\/p>\n

import<\/span> SwitchSelectorTestApp from<\/span> '.\/SwitchSelectorTestApp'<\/span>;<\/span>
\nAppRegistry.<\/span>registerComponent<\/span>(<\/span>'SwitchSelectorTestApp'<\/span>,<\/span> (<\/span>)<\/span> =><\/span> SwitchSelectorTestApp)<\/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 SwitchSelectorTestApp<\/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（index.js，336 \u884c）<\/h3>\n

3.1 \u7ec4\u4ef6\u5f62\u6001<\/h4>\n

export<\/span> default<\/span> class<\/span> SwitchSelector<\/span> extends<\/span> Component<\/span> {<\/span>
\n \u2026
\n \/\/ \u26a0\ufe0f \u4e0b\u9762\u4e09\u4e2a\u662f\u3010\u7bad\u5934\u51fd\u6570\u7684\u7c7b\u5b57\u6bb5\u3011\u21d2 \u6302\u5728\u3010\u5b9e\u4f8b\u3011\u4e0a，\u4e0d\u5728 prototype \u4e0a<\/span>
\n responderEnd<\/span> =<\/span> (<\/span>evt,<\/span> gestureState<\/span>)<\/span> =><\/span> {<\/span> \u2026 }<\/span>;<\/span>
\n animate<\/span> =<\/span> (<\/span>value,<\/span> last<\/span>)<\/span> =><\/span> {<\/span> \u2026 }<\/span>;<\/span>
\n toggleItem<\/span> =<\/span> (<\/span>index,<\/span> callOnPress =<\/span> true<\/span><\/span>)<\/span> =><\/span> {<\/span> \u2026 }<\/span>;<\/span>
\n}<\/span>
\nSwitchSelector.<\/span>defaultProps =<\/span> {<\/span> \u2026 30<\/span> \u4e2a\u952e \u2026 }<\/span>;<\/span>
\nSwitchSelector.<\/span>propTypes =<\/span> {<\/span> \u2026 30<\/span> \u4e2a\u952e \u2026 }<\/span>;<\/span><\/p>\n

\u8981\u70b9：<\/p>\n

  • class \u7ec4\u4ef6（render \u5728 prototype \u4e0a）\u21d2 defaultProps \u5728 React 19 \u4e0b\u4ecd\u7136\u751f\u6548 \u2713 \u800c\u4e14\u5b83\u6709 propTypes（30 \u952e）；<\/li>\n
  • \u26a0\ufe0f responderEnd \/ animate \/ toggleItem \u662f\u7bad\u5934\u51fd\u6570\u7c7b\u5b57\u6bb5 \u21d2 SwitchSelector.prototype.toggleItem === undefined（\u672c\u8f6e\u6211\u5728\u8fd9\u91cc\u5199\u9519\u8fc7\u65ad\u8a00，\u89c1\u7b2c\u516d\u8282）；<\/li>\n
  • \u9ed8\u8ba4\u5bfc\u51fa\u662f class，\u53ef\u4ee5\u76f4\u63a5 import SwitchSelector from '\u2026'\u3002<\/li>\n

    3.2 \u2605\u2605 defaultProps \u91cc\u7684\u4e24\u4e2a"\u9677\u9631\u9ed8\u8ba4\u503c"<\/h4>\n

    SwitchSelector.<\/span>defaultProps =<\/span> {<\/span>
    \n options<\/span>:<\/span> [<\/span>]<\/span>,<\/span>
    \n textColor<\/span>:<\/span> '#000000'<\/span>,<\/span>
    \n selectedColor<\/span>:<\/span> '#FFFFFF'<\/span>,<\/span>
    \n fontSize<\/span>:<\/span> 14<\/span>,<\/span>
    \n backgroundColor<\/span>:<\/span> '#FFFFFF'<\/span>,<\/span>
    \n borderColor<\/span>:<\/span> '#C9C9C9'<\/span>,<\/span>
    \n borderRadius<\/span>:<\/span> 50<\/span>,<\/span>
    \n borderWidth<\/span>:<\/span> 1<\/span>,<\/span>
    \n hasPadding<\/span>:<\/span> false<\/span>,<\/span>
    \n valuePadding<\/span>:<\/span> 1<\/span>,<\/span>
    \n height<\/span>:<\/span> 40<\/span>,<\/span>
    \n bold<\/span>:<\/span> false<\/span>,<\/span>
    \n buttonMargin<\/span>:<\/span> 0<\/span>,<\/span>
    \n buttonColor<\/span>:<\/span> '#BCD635'<\/span>,<\/span> \/\/ \u2605 \u6ed1\u5757\u7684\u9ed8\u8ba4\u989c\u8272<\/span>
    \n returnObject<\/span>:<\/span> false<\/span>,<\/span>
    \n animationDuration<\/span>:<\/span> 100<\/span>,<\/span>
    \n disabled<\/span>:<\/span> false<\/span>,<\/span>
    \n disableValueChangeOnPress<\/span>:<\/span> false<\/span>,<\/span>
    \n initial<\/span>:<\/span> –<\/span>1<\/span>,<\/span> \/\/ \u2605\u2605 \u9ed8\u8ba4 -1 \u21d2 \u6ed1\u5757\u900f\u660e！<\/span>
    \n value<\/span>:<\/span> 1<\/span>,<\/span> \/\/ \u26a0\ufe0f \u5b83\u8fd8\u6709\u4e2a value \u9ed8\u8ba4\u503c（\u53d7\u63a7\u7528）<\/span>
    \n onPress<\/span>:<\/span> null<\/span>,<\/span>
    \n accessibilityLabel<\/span>:<\/span> null<\/span>,<\/span>
    \n testID<\/span>:<\/span> null<\/span>,<\/span>
    \n touchableProps<\/span>:<\/span> {<\/span>}<\/span>,<\/span>
    \n \u2026
    \n}<\/span>;<\/span><\/p>\n\n\u9677\u9631\u8868\u73b0<\/tr>\n\n\n\n
    initial: -1<\/td>\nstate.selected = -1 \u21d2 getBgColor() \u8fd4\u56de 'transparent' \u21d2 \u6ed1\u5757\u4e0d\u53ef\u89c1（\u5b9e\u6d4b：\u8be5\u989c\u8272 0 \u50cf\u7d20）<\/td>\n<\/tr>\n
    value: 1<\/td>\ncomponentDidUpdate \u91cc if (prevProps.value !== value) toggleItem(value, \u2026) \u21d2 \u9996\u5e27\u540e\u5982\u679c value \u53d8\u5316\u4f1a\u9a71\u52a8\u9009\u4e2d\u9879；\u4e0d\u4f20 value \u65f6\u5b83\u662f 1，\u4e0e initial \u672a\u5fc5\u4e00\u81f4<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    3.3 \u2605 \u6ed1\u5757\u51e0\u4f55（\u53ef\u7cbe\u786e\u9884\u8a00）<\/h4>\n

    \/\/ \u8f68\u9053 onLayout：<\/span>
    \nthis<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> sliderWidth<\/span>:<\/span> width –<\/span> (<\/span>hasPadding ?<\/span> 2<\/span> :<\/span> 0<\/span>)<\/span> }<\/span>)<\/span>;<\/span><\/p>\n

    \/\/ \u6ed1\u5757：<\/span>
    \nwidth<\/span>:<\/span> sliderWidth \/<\/span> options.<\/span>length –<\/span> (<\/span>(<\/span>hasPadding ?<\/span> valuePadding :<\/span> 0<\/span>)<\/span> +<\/span> buttonMargin *<\/span> 2<\/span>)<\/span>,<\/span>
    \ntransform<\/span>:<\/span> [<\/span>{<\/span> translateX<\/span>:<\/span> this<\/span>.<\/span>animatedValue.<\/span>interpolate<\/span>(<\/span>{<\/span>
    \n inputRange<\/span>:<\/span> [<\/span>0<\/span>,<\/span> 1<\/span>]<\/span>,<\/span>
    \n outputRange<\/span>:<\/span> [<\/span>hasPadding ?<\/span> valuePadding :<\/span> 0<\/span>,<\/span> sliderWidth –<\/span> (<\/span>hasPadding ?<\/span> valuePadding :<\/span> 0<\/span>)<\/span>]<\/span>,<\/span>
    \n}<\/span>)<\/span>}<\/span>]<\/span>,<\/span><\/p>\n

    \/\/ \u52a8\u753b：<\/span>
    \nthis<\/span>.<\/span>animatedValue =<\/span> new<\/span> Animated.<\/span>Value<\/span>(<\/span>initial ?<\/span> initial \/<\/span> options.<\/span>length :<\/span> 0<\/span>)<\/span>;<\/span>
    \nanimate<\/span> =<\/span> (<\/span>value,<\/span> last<\/span>)<\/span> =><\/span> {<\/span> this<\/span>.<\/span>animatedValue.<\/span>setValue<\/span>(<\/span>last)<\/span>;<\/span>
    \n Animated.<\/span>timing<\/span>(<\/span>this<\/span>.<\/span>animatedValue,<\/span> {<\/span> toValue<\/span>:<\/span> value,<\/span> duration<\/span>:<\/span> animationDuration,<\/span>
    \n easing<\/span>:<\/span> Easing.<\/span>cubic,<\/span> useNativeDriver<\/span>:<\/span> true<\/span> }<\/span>)<\/span>.<\/span>start<\/span>(<\/span>)<\/span>;<\/span> }<\/span>;<\/span>
    \n\/\/ toggleItem \u91cc：this.animate(index \/ options.length, selected \/ options.length)<\/span><\/p>\n

    \u21d2 hasPadding=false, buttonMargin=0 \u65f6：\u6ed1\u5757\u5bbd\u5ea6 = width\/N\u3001\u5de6\u8fb9\u754c = (k\/N)\u00b7width \u21d2 \u6b63\u597d\u8986\u76d6\u7b2c k \u683c\u3002<\/p>\n

    \u26a0\ufe0f useNativeDriver: true \u21d2 \u6ed1\u5757\u4f4d\u79fb\u662f transform + \u539f\u751f\u9a71\u52a8 \u21d2 \u5e03\u5c40 dump \u8bfb\u4e0d\u5230 \u21d2 \u5fc5\u987b\u8d70\u50cf\u7d20\u3002<\/p>\n

    3.4 \u4ea4\u4e92\u4e0e\u8fb9\u754c<\/h4>\n

    toggleItem<\/span> =<\/span> (<\/span>index,<\/span> callOnPress =<\/span> true<\/span><\/span>)<\/span> =><\/span> {<\/span>
    \n if<\/span> (<\/span>options.<\/span>length <=<\/span> 1<\/span> ||<\/span> index ===<\/span> null<\/span> ||<\/span> isNaN<\/span>(<\/span>index)<\/span>)<\/span> return<\/span>;<\/span> \/\/ \u2605 \u8fb9\u754c\u2460<\/span>
    \n this<\/span>.<\/span>animate<\/span>(<\/span>\u2026)<\/span>;<\/span>
    \n if<\/span> (<\/span>callOnPress &&<\/span> onPress)<\/span> {<\/span> onPress<\/span>(<\/span>returnObject ?<\/span> options[<\/span>index]<\/span> :<\/span> options[<\/span>index]<\/span>.<\/span>value)<\/span>;<\/span> }<\/span>
    \n else<\/span> {<\/span> console.<\/span>log<\/span>(<\/span>'Call onPress with value: '<\/span>,<\/span> options[<\/span>index]<\/span>.<\/span>value)<\/span>;<\/span> }<\/span> \/\/ \u2605 \u6ca1 onPress \u65f6\u6253\u65e5\u5fd7<\/span>
    \n this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> selected<\/span>:<\/span> index }<\/span>)<\/span>;<\/span>
    \n}<\/span>;<\/span><\/p>\n

    \/\/ \u2605 \u8fb9\u754c\u2461：value \u53d8\u5316\u65f6<\/span>
    \ncomponentDidUpdate<\/span>(<\/span>prevProps<\/span>)<\/span> {<\/span>
    \n const<\/span> {<\/span> value,<\/span> disableValueChangeOnPress }<\/span> =<\/span> this<\/span>.<\/span>props;<\/span>
    \n if<\/span> (<\/span>prevProps.<\/span>value !==<\/span> value)<\/span> {<\/span> this<\/span>.<\/span>toggleItem<\/span>(<\/span>value,<\/span> !<\/span>disableValueChangeOnPress)<\/span>;<\/span> }<\/span>
    \n}<\/span><\/p>\n

    \/\/ \u2605 \u8fb9\u754c\u2462：\u62d6\u52a8\u5207\u6362（PanResponder）<\/span>
    \nshouldSetResponder<\/span> =<\/span> (<\/span>evt,<\/span> g<\/span>)<\/span> =><\/span> evt.<\/span>nativeEvent.<\/span>touches.<\/span>length ===<\/span> 1<\/span>
    \n &&<\/span> !<\/span>(<\/span>Math.<\/span>abs<\/span>(<\/span>g.<\/span>dx)<\/span> <<\/span> 5<\/span> &&<\/span> Math.<\/span>abs<\/span>(<\/span>g.<\/span>dy)<\/span> <<\/span> 5<\/span>)<\/span>;<\/span> \/\/ \u9700\u8981\u771f\u7684\u62d6\u52a8<\/span>
    \ngetSwipeDirection<\/span> =<\/span> (<\/span>g<\/span>)<\/span> =><\/span> (<\/span>Math.<\/span>abs<\/span>(<\/span>g.<\/span>vx)<\/span> ><\/span> 0.1<\/span> &&<\/span> Math.<\/span>abs<\/span>(<\/span>g.<\/span>dy)<\/span> <<\/span> 80<\/span>)<\/span>
    \n ?<\/span> (<\/span>g.<\/span>dx ><\/span> 0<\/span> ?<\/span> 'RIGHT'<\/span> :<\/span> 'LEFT'<\/span>)<\/span> :<\/span> null<\/span>;<\/span> \/\/ 0.1 \u901f\u5ea6\u9608\u503c<\/span><\/p>\n

    \n

    \u56db\u3001\u9a8c\u8bc1\u8bbe\u8ba1<\/h3>\n\n\u5224\u636e\u5185\u5bb9<\/tr>\n\n\n\n\n
    \u2460 \u6ed1\u5757\u4f4d\u7f6e<\/td>\n\u626b\u63cf\u6ed1\u5757\u989c\u8272 #BCD635，\u5176 x \u533a\u95f4\u5e94\u4e3a [\u5bb9\u5668\u5de6 + (k\/N)\u00b7W, \u5bb9\u5668\u5de6 + ((k+1)\/N)\u00b7W]<\/td>\n<\/tr>\n
    \u2461 \u6ed1\u5757\u6709\u65e0<\/td>\n\u4e0d\u4f20 initial \u65f6，\u8be5\u989c\u8272\u5e94\u5b8c\u5168\u626b\u4e0d\u5230<\/td>\n<\/tr>\n
    \u2462 \u9009\u9879\u547d\u4e2d\u533a<\/td>\n\u6bcf\u4e2a\u9009\u9879\u7684 TouchableOpacity \u5e94\u5404\u5360 W\/N<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    \n

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

    5.1 \u65ad\u8a00 34 \/ 34<\/h4>\n\n\u7ec4\u5185\u5bb9\u7ed3\u679c<\/tr>\n\n\n\n\n\n
    A \u5951\u7ea6<\/td>\nclass \/ render \u5728 prototype\u3001\u4e09\u4e2a\u7bad\u5934\u51fd\u6570\u7c7b\u5b57\u6bb5\u4e0d\u5728 prototype\u3001defaultProps 30 \u952e\u4e0e\u5173\u952e\u503c（initial -1\u3001buttonColor #BCD635\u2026）\u3001propTypes 30 \u952e\u3001prop-types \u53ef\u52a0\u8f7d<\/td>\n25\/25<\/td>\n<\/tr>\n
    B \u6e32\u67d3\u4e0e\u51e0\u4f55<\/td>\n5 \u4e2a\u5b9e\u4f8b\u6e32\u67d3\u672a\u629b\u9519\u3001\u6807\u9898\u4e0d\u4e0e\u72b6\u6001\u680f\u91cd\u5408\u3001\u5b9e\u4f8b\u5c3a\u5bf8\u3001\u5224\u636e\u8bf4\u660e<\/td>\n8\/8<\/td>\n<\/tr>\n
    C \u8fb9\u754c<\/td>\n\u4e8b\u4ef6\u8bb0\u5f55\u683c\u5f0f + \u56db\u6761\u8fb9\u754c\u8bf4\u660e<\/td>\n1\/1<\/td>\n<\/tr>\n
    <\/td>\n\u5408\u8ba1<\/td>\n34\/34<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    5.2 \u2605\u2605 \u6ed1\u5757\u50cf\u7d20\u5224\u636e（\u672c\u8f6e\u6838\u5fc3）<\/h4>\n

    \u5bb9\u5668\u5bbd 1248px\u3001\u5de6\u8fb9\u754c 36px\u3001N=2 \u21d2 \u6bcf\u683c 624px：<\/p>\n\n\u5b9e\u4f8b\u9884\u671f\u5b9e\u6d4b（#BCD635 \u626b\u63cf）\u5224\u5b9a<\/tr>\n\n\n\n\n
    W1（initial=0）<\/td>\n\u6ed1\u5757 x = 36\u2026660<\/td>\n37\u2026658<\/td>\n\u2713<\/td>\n<\/tr>\n
    W2（initial=1）<\/td>\n\u6ed1\u5757 x = 660\u20261284<\/td>\n661\u20261282<\/td>\n\u2713<\/td>\n<\/tr>\n
    W3（\u4e0d\u4f20 initial）<\/td>\n\u65e0\u6ed1\u5757<\/td>\n0 \u50cf\u7d20\u5339\u914d（\u8fde\u7eed 5 \u884c\u90fd\u662f 0）<\/td>\n\u2713\u2713<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u21d2 \u201c\u4f20 initial \u5c31\u6709\u6ed1\u5757\u3001\u4f4d\u7f6e\u6b63\u786e；\u4e0d\u4f20\u5c31\u5b8c\u5168\u6ca1\u6709\u201d \u4e24\u4e2a\u7ed3\u8bba\u90fd\u6210\u7acb\u3002<\/p>\n

    5.3 \u2605 \u4ea4\u4e92\u4e0e\u9009\u9879\u547d\u4e2d\u533a<\/h4>\n

    \u4ece\u5e03\u5c40 dump \u91cf W1 \u7684\u4e24\u4e2a\u9009\u9879：<\/p>\n

    y=901..950 x=36..660 (w=624) \u2190 \u5de6\u4fa7\u9009\u9879
    \ny=901..950 x=660..1284 (w=624) \u2190 \u53f3\u4fa7\u9009\u9879<\/p>\n

    \u21d2 \u5404\u5360 624px = W\/2 \u2713（\u4e0e\u6ed1\u5757\u5bbd\u5ea6\u9884\u8a00\u4e00\u81f4）\u3002<\/p>\n

    \u70b9\u51fb\u53f3\u4fa7\u9009\u9879（75% \u5904，\u5750\u6807 (990, 925)）\u21d2 \u65e5\u5fd7：<\/p>\n

    PRESS W1 onPress(off)<\/p>\n

    \u21d2 onPress \u89e6\u53d1，\u4e14\u62ff\u5230\u7684\u662f\u8be5\u9009\u9879\u7684 value（'off'） \u2713（returnObject \u4e3a false \u65f6\u7684\u884c\u4e3a）<\/p>\n

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

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

    5.4 UI：\u6807\u9898\u4e0d\u4e0e\u72b6\u6001\u680f\u91cd\u5408<\/h4>\n

    TITLE measureInWindow y=420 （\u72b6\u6001\u680f\u9ad8 117） \u21d2 420 > 117，\u4e0d\u91cd\u5408 \u2713<\/p>\n

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

    \n

    \u516d\u3001\u6211\u81ea\u5df1\u7684\u4e00\u4e2a\u5931\u8bef<\/h3>\n

    \u6211\u628a toggleItem \/ animate \/ responderEnd \u5f53\u6210\u539f\u578b\u65b9\u6cd5\u53bb\u65ad\u8a00，\u7ed3\u679c\u4e09\u6761\u5168\u6302：<\/p>\n

    \u2717 [A] \u539f\u578b\u4e0a\u6709 toggleItem｜\u671f\u671b function｜\u5b9e\u9645 undefined
    \n\u2717 [A] \u539f\u578b\u4e0a\u6709 animate｜\u671f\u671b function｜\u5b9e\u9645 undefined
    \n\u2717 [A] \u539f\u578b\u4e0a\u6709 responderEnd｜\u671f\u671b function｜\u5b9e\u9645 undefined<\/p>\n

    \u8bfb\u6e90\u7801\u540e\u786e\u8ba4：\u5b83\u4eec\u662f\u7bad\u5934\u51fd\u6570\u7684\u7c7b\u5b57\u6bb5（toggleItem = (index, callOnPress = true) => {\u2026}）\u2014\u2014 \u7ecf Babel \u7684 class-properties \u8f6c\u6362\u540e，\u5b83\u4eec\u88ab\u8d4b\u503c\u5230\u5b9e\u4f8b\u4e0a，\u800c\u4e0d\u5728 prototype \u4e0a\u3002<\/p>\n

    \u7ea0\u6b63：\u65ad\u8a00\u6539\u4e3a typeof SS.prototype.toggleItem === 'undefined'（\u5e76\u4fdd\u7559 prototype.render === 'function' \u4f5c\u4e3a"\u5b83\u786e\u5b9e\u662f class"\u7684\u8bc1\u636e）\u3002<\/p>\n

    \u6559\u8bad："\u5199\u5728 class \u4f53\u91cc\u7684\u65b9\u6cd5"\u672a\u5fc5\u5728 prototype \u4e0a \u2014\u2014 \u7bad\u5934\u51fd\u6570\u5f62\u5f0f\u7684\u7c7b\u5b57\u6bb5\u6302\u5728\u5b9e\u4f8b\u4e0a\u3002\u21d2 \u8981\u5224\u65ad"\u662f\u4e0d\u662f\u539f\u578b\u65b9\u6cd5"，\u5f97\u770b\u5199\u6cd5（method() {} vs field = () => {}），\u6216\u8005\u5e72\u8106\u7528 typeof proto.x \u5b9e\u6d4b\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\n
    \u4e0d\u4f20 initial \u21d2 \u770b\u4e0d\u5230\u6ed1\u5757<\/td>\n\u9ed8\u8ba4 -1 \u21d2 \u989c\u8272 transparent；\u4e0d\u62a5\u9519\u3002\u60f3\u6709\u6ed1\u5757\u5c31\u4f20 initial（\u6216\u53d7\u63a7\u4f20 value）<\/td>\n<\/tr>\n
    value \u9ed8\u8ba4\u662f 1<\/td>\ncomponentDidUpdate \u91cc value \u53d8\u5316\u4f1a\u9a71\u52a8\u9009\u4e2d\u9879；\u4e0e initial \u4e0d\u662f\u4e00\u56de\u4e8b<\/td>\n<\/tr>\n
    onPress \u62ff\u5230\u7684\u662f value<\/td>\n\u4f20 returnObject \u624d\u62ff\u5230\u6574\u4e2a\u9009\u9879\u5bf9\u8c61<\/td>\n<\/tr>\n
    \u6ca1\u4f20 onPress \u65f6\u4f1a\u6253 console.log<\/td>\nCall onPress with value: \u2026（\u4e0d\u662f\u62a5\u9519，\u4f46\u65e5\u5fd7\u91cc\u4f1a\u770b\u5230）<\/td>\n<\/tr>\n
    options.length <= 1 \u65f6\u70b9\u51fb\u65e0\u6548<\/td>\ntoggleItem \u76f4\u63a5 return<\/td>\n<\/tr>\n
    \u62d6\u52a8\u5207\u6362\u6709\u9608\u503c<\/td>\n\u9700 |dx|\u22655 \u6216 |dy|\u22655 \u624d\u63a5\u7ba1\u624b\u52bf；|vx|>0.1 && |dy|<80 \u624d\u7b97\u5de6\u53f3\u6ed1\u52a8<\/td>\n<\/tr>\n
    \u6ed1\u5757\u7528 useNativeDriver: true<\/td>\n\u4f4d\u79fb\u662f transform \u21d2 \u5e03\u5c40 dump \u8bfb\u4e0d\u5230 \u21d2 \u53ea\u80fd\u50cf\u7d20\u9a8c<\/td>\n<\/tr>\n
    \u6709\u8fd0\u884c\u65f6\u4f9d\u8d56 prop-types<\/td>\n\u76ee\u5f55\/file: \u63a5\u5165\u8981\u624b\u52a8\u8865\u88c5<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    7.2 \u672c\u6b21\u9a8c\u8bc1\u7684\u8fb9\u754c<\/h4>\n
  • \u62d6\u52a8\/\u6ed1\u52a8\u5207\u6362（PanResponder）\u672a\u9a8c\u8bc1：\u53ea\u9a8c\u8bc1\u4e86\u70b9\u51fb\u9009\u9879\u7ed9\u56de\u8c03；getSwipeDirection \u7684 |vx|>0.1 && |dy|<80 \u9608\u503c\u884c\u4e3a\u672a\u5b9e\u6d4b；<\/li>\n
  • disableValueChangeOnPress \u8fb9\u754c\u672a\u5b9e\u6d4b（\u53ea\u4ece\u6e90\u7801\u786e\u8ba4\u8bed\u4e49：value \u53d8\u5316\u65f6\u53ea\u52a8\u4e0d\u7ed9\u56de\u8c03）；<\/li>\n
  • options.length <= 1 \u7684\u8fb9\u754c\u672a\u5b9e\u6d4b（\u53ea\u6e32\u67d3\u4e86 1 \u9009\u9879\u5b9e\u4f8b，\u6ca1\u6709\u53bb\u70b9\u5b83）；<\/li>\n
  • returnObject \u672a\u5b9e\u6d4b（W4 \u4f20\u4e86 returnObject \u4f46\u6ca1\u70b9\u5b83\u56de\u8bfb\u5bf9\u8c61）；<\/li>\n
  • options[].activeColor（\u6bcf\u9879\u72ec\u7acb\u6fc0\u6d3b\u8272）\u672a\u6d4b；<\/li>\n
  • hasPadding \/ valuePadding \/ buttonMargin \u975e\u9ed8\u8ba4\u503c\u7684\u51e0\u4f55\u672a\u6d4b（\u53ea\u9a8c\u8bc1\u4e86 hasPadding=false, buttonMargin=0 \u8fd9\u4e00\u7ec4）；<\/li>\n
  • animationDuration \u7684\u4e2d\u95f4\u6001\u672a\u9a8c\u8bc1（\u53ea\u5728\u52a8\u753b\u7ed3\u675f\u540e\u6d4b\u91cf）；<\/li>\n
  • RTL（I18nManager.isRTL）\u5206\u652f\u672a\u6d4b；<\/li>\n
  • imageIcon \/ customIcon \u56fe\u6807\u6e32\u67d3\u672a\u6d4b（assets\/*.gif \u53ea\u662f\u6587\u6863\u8d44\u6e90）；<\/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：\u6211\u7528\u4e86\u8fd9\u4e2a\u7ec4\u4ef6，\u4f46\u770b\u4e0d\u5230\u90a3\u4e2a\u4f1a\u6ed1\u52a8\u7684\u8272\u5757？<\/p>\n

    \u5927\u6982\u7387\u662f\u6ca1\u4f20 initial\u3002 \u5b83\u7684\u9ed8\u8ba4\u503c\u662f -1，\u800c\u6e90\u7801\u91cc：<\/p>\n

    getBgColor<\/span>(<\/span>)<\/span> {<\/span>
    \n const<\/span> {<\/span> selected }<\/span> =<\/span> this<\/span>.<\/span>state;<\/span>
    \n if<\/span> (<\/span>selected ===<\/span> –<\/span>1<\/span>)<\/span> {<\/span> return<\/span> 'transparent'<\/span>;<\/span> }<\/span>
    \n return<\/span> options[<\/span>selected]<\/span>?.<\/span>activeColor ||<\/span> buttonColor;<\/span>
    \n}<\/span><\/p>\n

    \u21d2 \u6ed1\u5757\u88ab\u8bbe\u6210\u900f\u660e\u3002\u4f20 initial={0}（\u6216\u53d7\u63a7\u5730\u4f20 value）\u5373\u53ef：<\/p>\n

    <SwitchSelector initial={0} options={[{label:'\u5f00',value:'on'},{label:'\u5173',value:'off'}]} \/><\/p>\n

    \u5b9e\u6d4b：\u4e0d\u4f20 initial \u7684\u5b9e\u4f8b，\u6309\u6ed1\u5757\u989c\u8272 #BCD635 \u626b\u5168\u5c4f 0 \u50cf\u7d20\u3002<\/p>\n

    Q2：\u6ed1\u5757\u989c\u8272\/\u4f4d\u7f6e\u600e\u4e48\u7b97？<\/p>\n

      \n
    • \u989c\u8272：buttonColor（\u9ed8\u8ba4 #BCD635），\u6216\u67d0\u4e2a\u9009\u9879\u7684 activeColor；<\/li>\n
    • \u4f4d\u7f6e（hasPadding=false, buttonMargin=0）：\u5de6\u8fb9\u754c = (k\/N)\u00b7width\u3001\u5bbd = width\/N，\u6b63\u597d\u8986\u76d6\u7b2c k \u683c（\u5b9e\u6d4b N=2 \u65f6 37\u2026658 \u4e0e 661\u20261282）\u3002<\/li>\n<\/ul>\n

      Q3：onPress \u7ed9\u7684\u662f\u4ec0\u4e48？<\/p>\n

      \u9ed8\u8ba4\u7ed9\u8be5\u9009\u9879\u7684 value（returnObject: false）\u3002\u4f20 returnObject \u5219\u7ed9\u6574\u4e2a\u9009\u9879\u5bf9\u8c61\u3002<\/p>\n

      onPress={(v) => console.log(v)} \/\/ 'off'
      \nonPress={(v) => console.log(v.label)} \/\/ \u9700\u8981 returnObject<\/p>\n

      \u26a0\ufe0f \u4e0d\u4f20 onPress \u65f6\u6e90\u7801\u4f1a console.log('Call onPress with value: ', \u2026)（\u4e0d\u662f\u62a5\u9519）\u3002<\/p>\n

      Q4：\u4e3a\u4ec0\u4e48\u6211\u6539 value \u4e4b\u540e\u754c\u9762\u52a8\u4e86，\u4f46 onPress \u6ca1\u89e6\u53d1？<\/p>\n

      \u56e0\u4e3a componentDidUpdate \u662f：this.toggleItem(value, !disableValueChangeOnPress) \u2014\u2014 disableValueChangeOnPress: true \u65f6\u7b2c\u4e8c\u4e2a\u53c2\u6570\u662f false，\u4e8e\u662f\u53ea\u505a\u52a8\u753b + setState，\u4e0d\u7ed9\u56de\u8c03\u3002<\/p>\n

      Q5：\u4e3a\u4ec0\u4e48\u70b9\u7b2c 1 \u4e2a\u9009\u9879\u6ca1\u53cd\u5e94？<\/p>\n

      \u5982\u679c options.length <= 1，toggleItem \u4f1a\u76f4\u63a5 return（\u6e90\u7801\u7b2c\u4e00\u884c\u5b88\u536b）\u3002\u53e6\u5916 disabled \u6216 options[i].disabled \u4e5f\u4f1a\u8ba9\u8be5\u9009\u9879\u4e0d\u53ef\u70b9\u3002<\/p>\n

      Q6：\u80fd\u5de6\u53f3\u6ed1\u52a8\u5207\u6362\u5417？<\/p>\n

      \u80fd（PanResponder）\u3002\u4f46\u8981\u6ce8\u610f\u9608\u503c：shouldSetResponder \u8981\u6c42\u4f4d\u79fb \u22655，getSwipeDirection \u8981\u6c42 |vx| > 0.1 \u4e14 |dy| < 80 \u21d2 \u8f7b\u8f7b\u4e00\u78b0\u4e0d\u4f1a\u5207，\u5f97\u662f\u6709\u70b9\u901f\u5ea6\u7684\u6a2a\u5411\u62d6\u52a8\u3002（\u672c\u8f6e\u672a\u5b9e\u6d4b\u8fd9\u6761\u3002）<\/p>\n

      Q7：npm install \u4e4b\u540e\u62a5\u627e\u4e0d\u5230 prop-types？<\/p>\n

      \u56e0\u4e3a\u5b83\u5e26\u4e86\u8fd0\u884c\u65f6\u4f9d\u8d56 prop-types@^15.7.2，\u800c\u76ee\u5f55\/file: \u63a5\u5165\u4e0d\u4f1a\u5b89\u88c5\u76ee\u6807\u5305\u81ea\u5df1\u7684 dependencies：<\/p>\n

      npm<\/span> install<\/span> prop-types –ignore-scripts<\/p>\n

      （\u8d70 .tgz \u5b89\u88c5\u4f1a\u88ab\u81ea\u52a8\u5e26\u4e0a\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\u65e0\u539f\u751f\u6a21\u5757\u3001\u4e0d\u9700\u8981 HAR \/ \u6743\u9650 \/ ohpm\u3002\u552f\u4e00\u8981\u6ce8\u610f\u7684\u662f\u4e0a\u6587\u90a3\u6761 initial \u9ed8\u8ba4\u503c\u548c prop-types \u4f9d\u8d56\u3002<\/p>\n

      \n

      \u5c0f\u7ed3<\/h3>\n

      react-native-switch-selector \u662f\u7eaf JS class \u7ec4\u4ef6（index.js 336 \u884c），\u96f6\u539f\u751f\u63a5\u7ebf\u3002\u8bbe\u5907\u4fa7 34 \/ 34 \u65ad\u8a00\u901a\u8fc7\u3002<\/p>\n

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

    • \n

      \u2605\u2605 "\u9ed8\u8ba4\u503c"\u672c\u8eab\u53ef\u80fd\u5c31\u662f\u5751\u3002 initial \u9ed8\u8ba4 -1 \u21d2 getBgColor() \u8fd4\u56de transparent \u21d2 \u6ed1\u5757\u5b8c\u5168\u4e0d\u53ef\u89c1，\u800c\u4e14\u4e0d\u62a5\u9519\u3002\u21d2 \u63a5\u4e00\u4e2a\u7ec4\u4ef6\u65f6，\u628a defaultProps \u9010\u4e2a\u8fc7\u4e00\u904d，\u7279\u522b\u662f\u6709"\u54e8\u5175\u503c"（-1 \/ null \/ ''）\u7684\u5b57\u6bb5 \u2014\u2014 \u5b83\u4eec\u5f80\u5f80\u4ee3\u8868"\u672a\u521d\u59cb\u5316"\u72b6\u6001，\u4f1a\u6539\u53d8\u6e32\u67d3\u7ed3\u679c\u3002（\u8fd9\u4e0e"\u67d0\u7c7b\u4f9d\u8d56\u7f3a\u5931\u5bfc\u81f4\u6548\u679c\u9759\u9ed8\u6d88\u5931"\u5c5e\u4e8e\u540c\u4e00\u65cf\u95ee\u9898：\u5171\u540c\u70b9\u662f\u4e0d\u62a5\u9519\u3002）<\/p>\n<\/li>\n

    • \n

      \u2605 \u6ed1\u5757\u51e0\u4f55\u6709\u95ed\u5f0f\u516c\u5f0f \u21d2 \u76f4\u63a5\u5f53\u5224\u636e\u3002 \u6ed1\u5757\u5de6\u8fb9\u754c = (k\/N)\u00b7width\u3001\u5bbd = width\/N \u21d2 \u5b9e\u6d4b N=2 \u65f6 37\u2026658 \/ 661\u20261282，\u7b2c\u4e09\u4e2a\u5b9e\u4f8b 0 \u50cf\u7d20（\u56e0\u4e3a\u4e0d\u4f20 initial）\u3002\u21d2 \u4e09\u4e2a\u5b9e\u4f8b\u4e00\u6b21\u628a"\u4f4d\u7f6e\u5bf9\u4e0d\u5bf9"\u548c"\u6709\u6ca1\u6709"\u90fd\u9a8c\u6389\u4e86\u3002<\/p>\n<\/li>\n

    • \n

      \u2605 "\u5199\u5728 class \u91cc\u7684\u65b9\u6cd5"\u672a\u5fc5\u5728 prototype \u4e0a\u3002 toggleItem = (…) => {} \u8fd9\u79cd\u7bad\u5934\u51fd\u6570\u7c7b\u5b57\u6bb5\u88ab\u8d4b\u5230\u5b9e\u4f8b\u4e0a \u21d2 prototype.toggleItem === undefined\u3002\u6211\u6309\u539f\u578b\u65b9\u6cd5\u5199\u65ad\u8a00，\u4e00\u6b21\u6302\u4e09\u6761\u3002\u21d2 \u5224\u65ad\u8981\u770b\u5199\u6cd5（m(){} vs f = () => {}），\u6216\u7528 typeof proto.x \u5b9e\u6d4b\u3002<\/p>\n<\/li>\n

    • \n

      \u9009\u9879\u547d\u4e2d\u533a\u4e5f\u80fd\u5f53\u514d\u8d39\u5224\u636e\u3002 \u4ece dump \u91cf\u5230\u4e24\u4e2a\u9009\u9879\u5404\u5360 624px = W\/2，\u4e0e\u6ed1\u5757\u5bbd\u5ea6\u9884\u8a00\u4e92\u76f8\u5370\u8bc1；\u518d\u52a0\u4e00\u6b21\u70b9\u51fb\u62ff\u5230 onPress(off)，\u5c31\u540c\u65f6\u8986\u76d6\u4e86"\u5e03\u5c40"\u548c"\u4ea4\u4e92"\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-switch-selector（\u4e0a\u6e38 2.3.0 \u7684\u9e3f\u8499\u9002\u914d\u7248）<\/td>\n<\/tr>\n
      \u9002\u914d\u4ed3\u5e93<\/td>\nhttps:\/\/atomgit.com\/oh-react-native\/react-native-switch-selector<\/td>\n<\/tr>\n
      \u9002\u914d TAG<\/td>\n2.3.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 \u5355\u7ec4\u4ef6\u5e93：\u4e8c\u9009\u4e00\u5f00\u5173 \/ \u5206\u6bb5\u5f00\u5173（\u5e26\u6ed1\u52a8\u5207\u6362）<\/td>\n<\/tr>\n
      \u8fd0\u884c\u65f6\u4f9d\u8d56<\/td>\n\u26a0\ufe0f prop-types@^15.7.2 \u21d2 \u76ee\u5f55\/file: \u63a5\u5165\u987b\u624b\u52a8\u8865\u88c5<\/td>\n<\/tr>\n
      prepare \/ prepublish<\/td>\n\u90fd\u6ca1\u6709<\/td>\n<\/tr>\n
      \u8bb8\u53ef\u8bc1<\/td>\nMIT<\/td>\n<\/tr>\n
      \u4e0a\u6e38\u4ed3\u5e93<\/td>\nhttps:\/\/github.com\/jkdrangel\/react-native-switch-selector（\u260546）<\/td>\n<\/tr>\n
      \u5bbf\u4e3b\u5de5\u7a0b<\/td>\nRNOH084Demo（\u6d4b\u8bd5\u9875 rnAppKey = SwitchSelectorTestApp）<\/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-switch-selector.git#2.3.0-ohos-1.0.0"<\/span> –ignore-scripts<\/p>\n

      # \u672c\u5730\u76ee\u5f55\u63a5\u5165（\u5f00\u53d1\u5e38\u7528）：\u5fc5\u987b\u8865 prop-types<\/span>
      \nnpm<\/span> install<\/span> ..<\/span>\/react-native-switch-selector –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-switch-selector'<\/span>)<\/span> ]<\/span>,<\/span><\/p>\n

      import SwitchSelector from 'react-native-switch-selector';<\/p>\n

      \/\/ \u2705 \u6b63\u786e：\u4f20 initial（\u5426\u5219\u6ed1\u5757\u900f\u660e，\u5c4f\u4e0a\u770b\u4e0d\u5230）
      \n<SwitchSelector
      \n initial={0}
      \n options={[
      \n {label: '\u5f00', value: 'on'},
      \n {label: '\u5173', value: 'off'},
      \n ]}
      \n onPress={(value) => console.log('\u9009\u4e2d', value)} \/\/ \u9ed8\u8ba4\u62ff\u5230 value
      \n\/><\/p>\n

      \/\/ \u53d7\u63a7 + \u60f3\u8981\u6574\u4e2a\u9009\u9879\u5bf9\u8c61
      \nconst [v, setV] = useState(0);
      \n<SwitchSelector
      \n initial={0}
      \n value={v}
      \n returnObject
      \n options={[{label:'A',value:'a'},{label:'B',value:'b'},{label:'C',value:'c'}]}
      \n onPress={(opt) => setV(opt.value === 'b' ? 1 : opt.value === 'c' ? 2 : 0)}
      \n\/><\/p>\n

      \/\/ \u81ea\u5b9a\u4e49\u5916\u89c2（\u542b\u6ed1\u5757\u989c\u8272）
      \n<SwitchSelector
      \n initial={1}
      \n options={[{label:'\u662f',value:'y'},{label:'\u5426',value:'n'}]}
      \n buttonColor="#BCD635" \/\/ \u6ed1\u5757\u989c\u8272
      \n selectedColor="#FFFFFF" \/\/ \u9009\u4e2d\u9879\u6587\u5b57\u8272
      \n textColor="#000000"
      \n backgroundColor="#FFFFFF"
      \n borderColor="#C9C9C9"
      \n borderRadius={50}
      \n height={40}
      \n animationDuration={100}
      \n\/><\/p>\n

      # \u6362\u9875\u542f\u52a8\u6d4b\u8bd5\u9875（force-stop \u4e0d\u80fd\u7701，\u6362\u9875\u53c2\u6570\u53ea\u5728\u51b7\u542f\u52a8\u751f\u6548）<\/span>
      \nhdc shell aa force-stop com.rnoh084.demo
      \nhdc shell aa start -b<\/span> com.rnoh084.demo -a<\/span> EntryAbility –ps<\/span> rnAppKey SwitchSelectorTestApp<\/p>\n

      \u50cf\u7d20\u5224\u636e\u7684\u590d\u73b0\u65b9\u5f0f<\/h4>\n

      # \u6ed1\u5757\u989c\u8272 = buttonColor（\u9ed8\u8ba4 #BCD635 = RGB 188,214,53）<\/span>
      \nAdd-Type<\/span> –<\/span>AssemblyName System.<\/span>Drawing
      \n$b<\/span> = New-Object<\/span> System.<\/span>Drawing.<\/span>Bitmap(<\/span>'shot.jpeg'<\/span>)<\/span>
      \n$xs<\/span> = @(<\/span>)<\/span>
      \nfor<\/span> (<\/span>$x<\/span> = 0;<\/span> $x<\/span> -lt<\/span> $b<\/span>.<\/span>Width;<\/span> $x<\/span>++<\/span>)<\/span> {<\/span>
      \n $p<\/span> = $b<\/span>.<\/span>GetPixel(<\/span>$x<\/span>,<\/span> $trackMidY<\/span>)<\/span>
      \n if<\/span> (<\/span>[Math]<\/span>::Abs(<\/span>$p<\/span>.<\/span>R-188)<\/span> -lt<\/span> 26 -and<\/span> [Math]<\/span>::Abs(<\/span>$p<\/span>.<\/span>G-214)<\/span> -lt<\/span> 26 -and<\/span> [Math]<\/span>::Abs(<\/span>$p<\/span>.<\/span>B-53)<\/span> -lt<\/span> 26)<\/span> {<\/span> $xs<\/span> +=<\/span> $x<\/span> }<\/span>
      \n}<\/span>
      \n# N=2 \u65f6：k=0 \u21d2 \u5de6\u534a；k=1 \u21d2 \u53f3\u534a；\u4e0d\u4f20 initial \u21d2 \u4e00\u4e2a\u50cf\u7d20\u90fd\u626b\u4e0d\u5230<\/span><\/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 prop-types<\/td>\n15.8.1（\u5df2\u5b58\u5728 \u21d2 \u672c\u8f6e\u672a\u88ab\u4f9d\u8d56\u5751\u54ac\u5230）<\/td>\n<\/tr>\n
      \u5bbf\u4e3b HAP \u4ea7\u7269<\/td>\nentry-default-signed.hap<\/td>\n<\/tr>\n
      \u672c\u6b21\u6784\u5efa<\/td>\nassembleHap 3 \u5206 37 \u79d2；\u6539\u65ad\u8a00\u540e\u91cd\u7f16 3 \u5206 52 \u79d2<\/td>\n<\/tr>\n
      \u9a8c\u8bc1\u89c4\u6a21<\/td>\n\u8bbe\u5907\u4fa7 34 \/ 34 \u65ad\u8a00；\u6ed1\u5757\u50cf\u7d20\u5224\u636e 3 \u4e2a\u5b9e\u4f8b（\u5de6\u534a 37\u2026658 \/ \u53f3\u534a 661\u20261282 \/ \u4e0d\u4f20 initial \u4e3a 0 \u50cf\u7d20）；\u9009\u9879\u547d\u4e2d\u533a 2 \u5904（\u5404 624px）；\u4ea4\u4e92 1 \u6b21（onPress(off)）；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":117012,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6800,280,187,524,67],"topic":[],"class_list":["post-117016","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-react-native","tag-harmonyos","tag-javascript","tag-react-js","tag-67"],"yoast_head":"\nReact Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-switch-selector \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\/117016.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-switch-selector \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\/117016.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:08:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261022020759-6ad96fff18416.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\/117016.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/117016.html\",\"name\":\"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-switch-selector \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:08:06+00:00\",\"dateModified\":\"2026-10-22T02:08:06+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/117016.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/117016.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/117016.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-switch-selector \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-switch-selector \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\/117016.html","og_locale":"zh_CN","og_type":"article","og_title":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-switch-selector \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\/117016.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-10-22T02:08:06+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261022020759-6ad96fff18416.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\/117016.html","url":"https:\/\/www.wsisp.com\/helps\/117016.html","name":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-switch-selector \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:08:06+00:00","dateModified":"2026-10-22T02:08:06+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/117016.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/117016.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/117016.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-switch-selector \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\/117016","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=117016"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/117016\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/117012"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=117016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=117016"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=117016"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=117016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}