{"id":116964,"date":"2026-10-22T10:06:41","date_gmt":"2026-10-22T02:06:41","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/116964.html"},"modified":"2026-10-22T10:06:41","modified_gmt":"2026-10-22T02:06:41","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-picker-modal-view-%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\/116964.html","title":{"rendered":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-picker-modal-view \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357"},"content":{"rendered":"

<\/h2>\n

\u672c\u6587\u8bb0\u5f55\u628a react-native-picker-modal-view（\u5f39\u7a97\u5f0f\u5217\u8868\u9009\u62e9\u5668）\u9002\u914d\u5230 HarmonyOS \u7684\u5b8c\u6574\u8fc7\u7a0b\u3002<\/p>\n

\u5b83\u505a\u7684\u4e8b：\u6e32\u67d3\u4e00\u4e2a"\u9009\u62e9\u6846"，\u70b9\u5b83\u5f39\u51fa\u4e00\u4e2a Modal \u5217\u8868（\u5e26\u641c\u7d22\u6846\u3001\u5b57\u6bcd\u7d22\u5f15\u3001\u6eda\u52a8\u5230\u5e95\u90e8\u7684"\u56de\u5230\u9876\u90e8"\u6309\u94ae），\u9009\u4e2d\u540e\u56de\u8c03\u3002<\/p>\n

\u7ed3\u8bba：\u53ef\u7528\u3002\u4f46\u672c\u8f6e\u6700\u91cd\u8981\u7684\u6536\u83b7\u4e0d\u662f"\u80fd\u4e0d\u80fd\u8dd1"，\u800c\u662f\u4e00\u4e2a\u4ea4\u4ed8\u5305\u7ed3\u6784\u4e0a\u7684\u9677\u9631 \u2014\u2014
\nmain \u6307\u5411\u7684 dist\/index.js \u53ea\u6709 export default，\u800c src\/index.ts \u91cc\u6709 20 \u591a\u4e2a\u5177\u540d\u5bfc\u51fa\u3002
\n\u21d2 \u76f4\u63a5 import {AnimationTypeEnum, generateAlphabet} from 'react-native-picker-modal-view' \u5168\u90e8\u62ff\u5230 undefined，
\n\u8c03\u7528 generateAlphabet() \u76f4\u63a5\u629b undefined is not a function\u3002
\n\u4fee\u6b63\u65b9\u6cd5：\u9ed8\u8ba4\u5bfc\u51fa\u6b63\u5e38\u5bfc\u5165，\u5177\u540d\u5bfc\u51fa\u6539\u4ece dist\/ \u7684\u5b50\u8def\u5f84\u5bfc\u5165\u3002<\/p>\n

\u4fee\u6b63\u4e4b\u540e：6 \u4e2a\u5177\u540d\u7ec4\u4ef6\u5168\u90e8\u53ef\u7528\u300110 \u4e2a\u516c\u5f00\u65b9\u6cd5\u5168\u5728 prototype \u4e0a\u3001CommonStyle.BTN_HEIGHT \u7cbe\u786e\u7b49\u4e8e 50\u3001
\ngenerateAlphabet \u7cbe\u786e\u8fd4\u56de ["A","B","C"]\u3001getIndex("B") \u7cbe\u786e\u8fd4\u56de 1\u3001openModal() \u72b6\u6001\u673a\u5168\u7a0b\u901a\u8fc7\u3002<\/p>\n

\u2605\u2605\u2605\u2605\u2605 \u4e00\u3001\u6700\u91cd\u8981\u7684\u53d1\u73b0：dist\/index.js \u53ea\u6709\u9ed8\u8ba4\u5bfc\u51fa<\/h3>\n

dist\/index.js（131 \u5b57\u8282，\u5168\u6587\u5c31\u8fd9\u4e24\u884c）：<\/p>\n

import<\/span> {<\/span> ModalComponent as<\/span> PickerModal }<\/span> from<\/span> '.\/Components\/Modal'<\/span>;<\/span>
\nexport<\/span> default<\/span> PickerModal;<\/span>
\n\/\/# sourceMappingURL=index.js.map<\/span><\/p>\n

\u800c src\/index.ts \u6709\u5b8c\u6574\u7684\u5177\u540d\u5bfc\u51fa：<\/p>\n

export<\/span> {<\/span> ModalStyles }<\/span> from<\/span> '@Styles\/ModalStyles'<\/span>;<\/span>
\nexport<\/span> {<\/span> AnimationTypeEnum }<\/span> from<\/span> '@Enum\/AnimationTypeEnum'<\/span>;<\/span>
\nexport<\/span> const<\/span> generateAlphabet<\/span> =<\/span> (<\/span>items,<\/span> sortingLanguage?<\/span>)<\/span> =><\/span> {<\/span> \u2026 }<\/span>
\nexport<\/span> const<\/span> getFilteredData<\/span> =<\/span> (<\/span>items,<\/span> autoSort,<\/span> searchText)<\/span> =><\/span> {<\/span> \u2026 }<\/span>
\nexport<\/span> {<\/span> ModalComponent }<\/span> from<\/span> '@Components\/Modal'<\/span>;<\/span>
\nexport<\/span> {<\/span> AlphabetComponent }<\/span> from<\/span> '@Components\/Alphabet'<\/span>;<\/span>
\n\u2026<\/p>\n

export<\/span> default<\/span> PickerModal;<\/span><\/p>\n

dist\/index.d.ts \u4e5f\u58f0\u660e\u4e86\u90a3\u4e9b\u5177\u540d\u5bfc\u51fa \u21d2 \u4e8e\u662f TypeScript \u7f16\u8bd1\u671f\u4e00\u5207\u6b63\u5e38 \u2713
\n\u4f46\u8fd0\u884c\u65f6 dist\/index.js \u91cc\u6ca1\u6709\u5b83\u4eec \u2717<\/p>\n

\u5b9e\u6d4b\u540e\u679c（\u7b2c\u4e00\u6b21\u8dd1）：<\/p>\n

PASS | \u2605\u2605 \u9ed8\u8ba4\u5bfc\u51fa\u662f class（function） \u2190 \u9ed8\u8ba4\u5bfc\u51fa \u2713
\nPASS | \u2605 \u6709 prototype.render
\nFAIL | \u2605\u2605 \u9ed8\u8ba4\u5bfc\u51fa === \u5177\u540d ModalComponent | \u671f\u671b=true | \u5b9e\u9645=false
\nNOTE | \u4e0d\u662f class \u7684\u7ec4\u4ef6 = ModalComponent, AlphabetComponent, ListItemComponent,
\n SearchComponent, ScrollToTopComponent, SelectBoxComponent \u2190 6 \u4e2a\u5168 undefined
\nNOTE | AnimationTypeEnum \u7684\u952e\u6570 = 0
\nNOTE | ModalComponent.defaultProps \u7684\u952e\u6570 = 0
\nNOTE | CommonStyle.BTN_HEIGHT = undefined
\nNOTE | ModalStyles \u7684 typeof = undefined
\n===== B. \u7eaf\u51fd\u6570（4 \u4e2a） ===== \u2190 \u7136\u540e\u5c31\u5d29\u4e86<\/p>\n

LogBox: "undefined is not a function" \u2190 generateAlphabet() \u8c03\u7528\u629b\u9519<\/p>\n

\u21d2 \u21d2 \u8fd9\u5c31\u662f"\u7c7b\u578b\u6b63\u786e\u3001\u8fd0\u884c\u65f6\u7f3a\u5931"\u7684\u5178\u578b\u8868\u73b0 \u2713<\/p>\n

\u4fee\u6b63\u540e\u7684\u5bfc\u5165\u65b9\u5f0f（\u9ed8\u8ba4\u8d70\u5165\u53e3，\u5177\u540d\u8d70\u5b50\u8def\u5f84）：<\/p>\n

\/\/ \u2460 \u9ed8\u8ba4\u5bfc\u51fa：\u6b63\u5e38\u4ece\u5305\u5165\u53e3\u5bfc\u5165<\/span>
\nimport<\/span> PickerModal from<\/span> 'react-native-picker-modal-view'<\/span>;<\/span><\/p>\n

\/\/ \u2461 \u5177\u540d\u5bfc\u51fa：\u5fc5\u987b\u4ece dist \u7684\u5b50\u8def\u5f84\u5bfc\u5165（\u8fd9\u4e9b\u8def\u5f84\u5df2\u7528 node \u5b9e\u6d4b\u786e\u8ba4\u5b58\u5728）<\/span>
\nimport<\/span> {<\/span>generateAlphabet,<\/span> getFilteredData,<\/span> getIndex,<\/span> trCompare}<\/span>
\n from<\/span> 'react-native-picker-modal-view\/dist\/Helpers'<\/span>;<\/span>
\nimport<\/span> {<\/span>AnimationTypeEnum}<\/span>
\n from<\/span> 'react-native-picker-modal-view\/dist\/Enum\/AnimationTypeEnum'<\/span>;<\/span>
\nimport<\/span> {<\/span>ModalComponent}<\/span> from<\/span> 'react-native-picker-modal-view\/dist\/Components\/Modal'<\/span>;<\/span>
\nimport<\/span> {<\/span>CommonStyle}<\/span> from<\/span> 'react-native-picker-modal-view\/dist\/Assets\/Styles\/CommonStyle'<\/span>;<\/span>
\nimport<\/span> {<\/span>ModalStyles}<\/span> from<\/span> 'react-native-picker-modal-view\/dist\/Assets\/Styles\/ModalStyles'<\/span>;<\/span><\/p>\n

\u6ce8\u610f\u6837\u5f0f\u76ee\u5f55\u540d：\u662f dist\/Assets\/Styles\/，\u4e0d\u662f dist\/Styles\/（\u8fd9\u4e2a\u4e5f\u8981\u6309\u5b9e\u9645\u76ee\u5f55\u6765）\u2713<\/p>\n

\u4fee\u6b63\u540e\u7684\u6210\u7ee9：<\/p>\n

PASS | \u2605\u2605 \u9ed8\u8ba4\u5bfc\u51fa === \u5177\u540d ModalComponent
\nPASS | \u2605\u2605\u2605 6 \u4e2a\u5177\u540d\u7ec4\u4ef6\u90fd\u662f class（\u6709 prototype.render）
\nPASS | \u2605\u2605\u2605 CommonStyle.BTN_HEIGHT = 50
\nPASS | \u2605\u2605 ModalStyles \u662f object
\nPASS | \u2605\u2605\u2605 10 \u4e2a\u516c\u5f00\u65b9\u6cd5\u90fd\u5728 prototype \u4e0a
\nLogBox: \u4e0d\u518d\u6709 undefined is not a function<\/p>\n

\u8fd9\u6761\u6559\u8bad\u5f88\u901a\u7528：\u4e0d\u8981\u5047\u8bbe"\u6e90\u7801\u7684\u5bfc\u51fa == \u8fd0\u884c\u65f6\u7684\u5bfc\u51fa"\u3002
\n\u5224\u65ad\u4f9d\u636e\u5f88\u7b80\u5355：\u770b package.json \u7684 main \u6307\u5411\u54ea\u4e2a\u6587\u4ef6\u3001\u518d\u628a\u8fd9\u4e2a\u6587\u4ef6\u6253\u5f00\u770b\u5b83\u5bfc\u51fa\u4e86\u4ec0\u4e48\u3002
\n\u672c\u8f6e main \u6307\u5411 dist\/index.js（131 B），\u5b83\u53ea\u6709 export default \u21d2 20 \u591a\u4e2a\u5177\u540d\u5bfc\u51fa\u5728\u8fd0\u884c\u65f6\u4e0d\u5b58\u5728 \u2713<\/p>\n

\u2605\u2605\u2605\u2605\u2605 \u4e8c\u3001prototype \u4e0a\u7684 10 \u4e2a\u65b9\u6cd5：\u8fd9\u6b21\u771f\u7684\u662f\u539f\u578b\u65b9\u6cd5<\/h3>\n

.d.ts \u91cc\u8fd9 10 \u4e2a\u516c\u5f00\u65b9\u6cd5\u7684\u7b7e\u540d\u662f name(): void;（\u4e0d\u662f name: () => \u2026）：<\/p>\n

private _clearComponent() \u2192 public clearComponent(): void
\nprivate _openModal() \u2192 public openModal(): void
\nprivate _onClose() \u2192 public onClose(): void
\nprivate _onBackRequest() \u2192 public onBackRequest(): void
\nprivate _scrollToUp() \u2192 public scrollToUp(): void
\nprivate _onScrolling(e) \u2192 public onScrolling(e): void
\nprivate _renderItem(…) \u2192 public renderItem(…): JSX.Element
\nprivate _setText(text) \u2192 public setText(text): void
\nprivate _onSelectMethod(key)\u2192 public onSelectMethod(key): \u2026
\nprivate _setAlphabet(a) \u2192 public setAlphabet(a): void<\/p>\n

\u6e90\u7801\u91cc\u7684\u5b9e\u9645\u5199\u6cd5（\u6bcf\u4e2a\u90fd\u662f"\u516c\u5f00\u65b9\u6cd5\u8f6c\u53d1\u7ed9\u79c1\u6709\u65b9\u6cd5"）：<\/p>\n

private<\/span> _openModal<\/span>(<\/span>)<\/span>:<\/span> void<\/span> {<\/span> \u2026 }<\/span>
\npublic<\/span> openModal<\/span>(<\/span>)<\/span>:<\/span> void<\/span> {<\/span> this<\/span>.<\/span>_openModal<\/span>(<\/span>)<\/span>;<\/span> }<\/span><\/p>\n

\u5b9e\u6d4b：<\/p>\n

NOTE | prototype \u4e0a\u7f3a\u5931\u7684\u65b9\u6cd5 = (\u65e0)
\nPASS | \u2605\u2605\u2605 10 \u4e2a\u516c\u5f00\u65b9\u6cd5\u90fd\u5728 prototype \u4e0a | \u671f\u671b=0 | \u5b9e\u9645=0<\/p>\n

\u21d2 \u21d2 \u8fd9\u6b21\u53ef\u4ee5\u653e\u5fc3\u65ad\u8a00"\u5728 prototype \u4e0a" \u2713
\n\u21d2 \u5bf9\u7167：\u6709\u4e9b\u5e93\u91cc\u90a3 6 \u4e2a\u65b9\u6cd5（setValue \/ getISOCode \/ \u2026）\u662f\u7bad\u5934\u7c7b\u5b57\u6bb5\u3001\u53ea\u5728\u5b9e\u4f8b\u4e0a\u3002
\n\u21d2 \u5224\u522b\u65b9\u6cd5\u4e0d\u53d8：.d.ts \u91cc name(\u2026): \u2026 \u662f\u539f\u578b\u65b9\u6cd5\u3001name: (\u2026) => \u2026 \u662f\u5b9e\u4f8b\u5b57\u6bb5 \u2713<\/p>\n

\u2605\u2605\u2605\u2605\u2605 \u4e09\u3001\u7cbe\u786e\u503c\u5224\u636e：\u4e09\u4e2a\u90fd\u4e00\u6b21\u547d\u4e2d<\/h3>\n

\u2460 CommonStyle.BTN_HEIGHT = 50<\/h4>\n

\u6e90\u7801\u5199\u6b7b：export const BTN_HEIGHT: number = 50;（\u5b83\u88ab\u7528\u4f5c FlatList \u7684 getItemLayout \u884c\u9ad8）<\/p>\n

NOTE | CommonStyle.BTN_HEIGHT = 50
\nPASS | \u2605\u2605\u2605 CommonStyle.BTN_HEIGHT = 50<\/p>\n

\u2461 generateAlphabet \u7cbe\u786e\u8fd4\u56de ["A","B","C"]<\/h4>\n

\u6e90\u7801\u903b\u8f91：\u53d6\u6bcf\u4e2a Name \u7684\u9996\u5b57\u6bcd\u3001\u53bb\u91cd\u3001\u6392\u5e8f\u3002\u6211\u7528 4 \u9879\u6570\u636e：<\/p>\n

[<\/span>{<\/span>Name<\/span>:<\/span>'Apple'<\/span>}<\/span>,<\/span> {<\/span>Name<\/span>:<\/span>'Banana'<\/span>}<\/span>,<\/span> {<\/span>Name<\/span>:<\/span>'Apricot'<\/span>}<\/span>,<\/span> {<\/span>Name<\/span>:<\/span>'Cherry'<\/span>}<\/span>]<\/span>
\n\/\/ \u9996\u5b57\u6bcd：A, B, A, C \u21d2 \u53bb\u91cd\u540e [A,B,C] \u21d2 \u6392\u5e8f\u540e ["A","B","C"]<\/span><\/p>\n

NOTE | generateAlphabet(4 \u9879) \u7684\u7ed3\u679c = ["A","B","C"]
\nPASS | \u2605\u2605\u2605 generateAlphabet \u21d2 [A,B,C]（3 \u4e2a）<\/p>\n

\u2462 getIndex("B") \u7cbe\u786e\u8fd4\u56de 1<\/h4>\n

getIndex<\/span>(<\/span>'B'<\/span>,<\/span> items,<\/span> false<\/span>,<\/span> ''<\/span>)<\/span> \/\/ \u627e Name \u9996\u5b57\u6bcd === 'B' \u7684\u7d22\u5f15 \u21d2 Banana \u5728\u539f\u6570\u7ec4\u7b2c 2 \u4f4d \u21d2 1<\/span><\/p>\n

NOTE | getIndex("B", items, false, "") = 1
\nPASS | \u2605\u2605\u2605 getIndex("B") \u21d2 1
\nPASS | \u2605\u2605 getIndex("Z") \u21d2 -1（\u4e0d\u5b58\u5728）<\/p>\n

\u21d2 \u21d2 \u8fd9\u4e09\u6761\u90fd\u662f"\u5148\u7b97\u51fa\u771f\u503c\u3001\u518d\u65ad\u8a00\u540c\u4e00\u4e2a\u503c" \u2713
\n\u21d2 \u7279\u522b\u662f generateAlphabet \u4e0e getIndex：\u6211\u6309\u6e90\u7801\u903b\u8f91\u5728\u7eb8\u4e0a\u63a8\u4e86\u4e00\u904d\u7ed3\u679c，\u7136\u540e\u65ad\u8a00 \u2014\u2014 \u6240\u4ee5\u4e0d\u662f"\u9a8c\u8bc1\u81ea\u5df1" \u2713<\/p>\n

\u2605\u2605\u2605\u2605 \u56db\u3001\u72b6\u6001\u673a\u5168\u7a0b\u901a\u8fc7：modalVisible \u7684 false \u2192 true<\/h3>\n

render() \u91cc <Modal visible={modalVisible}>，\u800c modalVisible \u6765\u81ea state\u3002
\nopenModal() \u53ea\u5728 items.length > 0 && !disabled \u65f6\u624d\u7f6e true：<\/p>\n

private<\/span> _openModal<\/span>(<\/span>)<\/span>:<\/span> void<\/span> {<\/span>
\n if<\/span> (<\/span>items.<\/span>length ><\/span> 0<\/span> &&<\/span> !<\/span>disabled)<\/span> {<\/span>
\n this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> modalVisible:<\/span> true<\/span> }<\/span>)<\/span>;<\/span>
\n }<\/span>
\n}<\/span><\/p>\n

\u5b9e\u6d4b\u4e09\u76f8\u4f4d：<\/p>\n

NOTE | state \u7684\u952e = modalVisible, searchText, stickyBottomButton, selectedAlpha, selectedObject
\nNOTE | state.modalVisible（\u521d\u59cb） = false
\nPASS | \u2605\u2605\u2605 \u521d\u59cb state.modalVisible = false<\/p>\n

PASS | \u2605\u2605 ref \u8c03\u7528 openModal() \u4e0d\u629b\u9519
\nNOTE | openModal \u4e4b\u540e state.modalVisible = true
\nPASS | \u2605\u2605\u2605 openModal() \u4e4b\u540e state.modalVisible = true<\/p>\n

NOTE | setText \u4e4b\u540e state.searchText = ap
\nPASS | \u2605\u2605\u2605 setText("ap") \u4e4b\u540e state.searchText = "ap"<\/p>\n

\u21d2 \u21d2 openModal() \u4e0e setText() \u4e24\u4e2a\u5b9e\u4f8b\u65b9\u6cd5\u90fd\u771f\u5b9e\u6539\u53d8\u4e86 state \u2713（\u4e0d\u662f"\u8c03\u7528\u6210\u529f\u4f46\u6ca1\u751f\u6548"）<\/p>\n

\u9009\u62e9\u6846\u6587\u672c\u4e5f\u62ff\u5230\u4e86\u5750\u6807：<\/p>\n

\u2713 \u300cPMV \u70b9\u6211\u9009\u62e9\u300d w=269 h=49 y=1163<\/p>\n

\u21d2 \u8fd9\u5c31\u662f\u6211\u4f20\u7684 selectPlaceholderText，\u8bf4\u660e SelectBoxComponent \u6b63\u5e38\u6e32\u67d3 \u2713<\/p>\n

\u2605\u2605\u2605 \u4e94\u30013 \u6761\u6ca1\u901a\u8fc7\u7684（\u90fd\u8bb0\u5728\u8fd9\u91cc）<\/h3>\n

\u2460 AnimationTypeEnum \u4ecd\u662f undefined<\/h4>\n

dist\/Enum\/AnimationTypeEnum.js \u53ea\u6709 45 B，\u6211\u4ece dist\/Enum\/AnimationTypeEnum \u5bfc\u5165\u4ecd\u7136\u662f undefined\u3002
\n\u21d2 \u672c\u8f6e\u672a\u67e5\u660e\u539f\u56e0（\u53ef\u80fd\u662f\u8be5\u6587\u4ef6\u7684\u5199\u6cd5\/\u5bfc\u51fa\u5f62\u6001\u5728 Metro \u4e0b\u88ab\u9759\u9ed8\u541e\u6389）\u3002
\n\u21d2 \u4e0d\u5f71\u54cd\u4e3b\u529f\u80fd：defaultProps.modalAnimationType \u7684\u9ed8\u8ba4\u503c\u5c31\u662f 'slide'，\u8bf4\u660e\u679a\u4e3e\u503c\u672c\u8eab\u662f\u5bf9\u7684\u3002
\n\u21d2 \u8bb0\u4e3a"\u672a\u9a8c\u8bc1" \u2713<\/p>\n

\u2461 defaultProps \u5b9e\u9645 13 \u9879，\u6211\u65ad\u8a00 14 \u9879（\u6211\u53c8\u6570\u9519\u4e86）<\/h4>\n

NOTE | ModalComponent.defaultProps \u7684\u952e\u6570 = 13
\nNOTE | ModalComponent.defaultProps \u7684\u952e = autoGenerateAlphabeticalIndex, autoSort, disabled, items,
\n modalAnimationType, removeClippedSubviews, requireSelection, searchInputTextColor,
\n searchPlaceholderText, selectPlaceholderText, showAlphabeticalIndex, showToTopButton, sortingLanguage
\nFAIL | \u2605\u2605\u2605 defaultProps \u6070\u597d 14 \u9879 | \u671f\u671b=14 | \u5b9e\u9645=13<\/p>\n

\u21d2 \u21d2 \u8fd9\u662f\u8fde\u7eed\u7b2c\u56db\u8f6e\u5728"\u6570\u91cf\u7c7b\u65ad\u8a00"\u4e0a\u51fa\u9519 \u2717
\n\u21d2 \u800c\u8fd9\u6b21\u7684\u8bbd\u523a\u4e4b\u5904\u662f：\u6211\u5df2\u7ecf\u628a\u771f\u503c\u6253\u6210 NOTE \u4e86（13），\u5374\u4ecd\u7136\u5728\u65ad\u8a00\u91cc\u5199\u4e86\u5b57\u9762\u91cf 14 \u2717
\n\u21d2 \u21d2 \u6539\u6cd5\u5fc5\u987b\u518d\u6536\u7d27：\u6570\u91cf\u65ad\u8a00\u7684\u671f\u671b\u503c\u3010\u76f4\u63a5\u7528\u540c\u4e00\u4e2a\u53d8\u91cf\u3011：<\/p>\n

const<\/span> n =<\/span> Object.<\/span>keys<\/span>(<\/span>dp)<\/span>.<\/span>length;<\/span>
\nnote<\/span>(<\/span>'defaultProps \u7684\u952e\u6570'<\/span>,<\/span> n)<\/span>;<\/span>
\ncheck<\/span>(<\/span>'defaultProps \u6070\u597d N \u9879'<\/span>,<\/span> n,<\/span> n)<\/span>;<\/span> \/\/ \u2717 \u8fd9\u6837\u6c38\u8fdc PASS，\u6ca1\u6709\u610f\u4e49<\/span>
\n\/\/ \u6b63\u786e\u505a\u6cd5：\u628a"\u4ece .d.ts \u6570\u51fa\u6765\u7684\u671f\u671b\u503c"\u4e5f\u5b58\u6210\u53d8\u91cf，\u4e24\u8fb9\u90fd\u6253\u5370<\/span>
\nconst<\/span> expectedCount =<\/span> 13<\/span>;<\/span> \/\/ \u2190 \u4ece .d.ts \u9010\u9879\u6570，\u5e76\u5728\u6ce8\u91ca\u91cc\u5217\u51fa\u8fd9 13 \u4e2a\u952e<\/span>
\ncheck<\/span>(<\/span>'defaultProps \u6070\u597d '<\/span> +<\/span> expectedCount +<\/span> ' \u9879'<\/span>,<\/span> expectedCount,<\/span> n)<\/span>;<\/span><\/p>\n

\u21d2 \u21d2 \u66f4\u5b9e\u7528\u7684\u505a\u6cd5：\u65ad\u8a00"\u952e\u540d\u6e05\u5355"\u800c\u4e0d\u662f"\u6570\u91cf" \u2014\u2014
\n\u628a .d.ts \u91cc\u90a3 13 \u4e2a\u952e\u540d\u76f4\u63a5\u5217\u6210\u6570\u7ec4\u6bd4\u5bf9，\u6570\u91cf\u9519\u3001\u540d\u5b57\u9519\u90fd\u4f1a\u88ab\u6293\u5230 \u2713<\/p>\n

\u2462 getFilteredData(items, false, 'ap') \u8fd4\u56de 0 \u9879（\u4e0e\u6e90\u7801\u903b\u8f91\u4e0d\u7b26）<\/h4>\n

\u6e90\u7801\u903b\u8f91（src\/Helpers\/index.ts L46-51）：<\/p>\n

export<\/span> const<\/span> getFilteredData<\/span> =<\/span> (<\/span>items,<\/span> autoSort,<\/span> searchText<\/span>)<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>autoSort)<\/span> {<\/span> items.<\/span>sort<\/span>(<\/span>(<\/span>a,<\/span> b<\/span>)<\/span> =><\/span> trCompare<\/span>(<\/span>a.<\/span>Name,<\/span> b.<\/span>Name)<\/span>)<\/span>;<\/span> }<\/span>
\n return<\/span> items.<\/span>filter<\/span>(<\/span>(<\/span>l<\/span>)<\/span> =><\/span> l.<\/span>Name.<\/span>toLocaleLowerCase<\/span>(<\/span>)<\/span>.<\/span>indexOf<\/span>(<\/span>searchText.<\/span>toLocaleLowerCase<\/span>(<\/span>)<\/span>)<\/span> ><\/span> –<\/span>1<\/span>)<\/span>;<\/span>
\n}<\/span>;<\/span><\/p>\n

\u6309\u8fd9\u4e2a\u903b\u8f91，'Apple'.toLocaleLowerCase() = 'apple'\u3001'ap'.toLocaleLowerCase() = 'ap'\u3001
\n'apple'.indexOf('ap') = 0 > -1 \u21d2 \u5e94\u8be5\u5339\u914d \u2713 \u4f46\u5b9e\u6d4b\u8fd4\u56de 0 \u9879：<\/p>\n

NOTE | getFilteredData(items, false, "ap") \u7684\u7ed3\u679c = []
\nFAIL | \u2605\u2605\u2605 \u8fc7\u6ee4 "ap" \u21d2 2 \u9879（Apple\/Apricot） | \u671f\u671b=2 | \u5b9e\u9645=0
\nPASS | \u2605\u2605 \u8fc7\u6ee4\u7a7a\u4e32 \u21d2 4 \u9879（\u5168\u90e8） \u2190 \u8bf4\u660e items \u672c\u8eab\u6ca1\u95ee\u9898
\nPASS | \u2605\u2605 \u8fc7\u6ee4 "zzz" \u21d2 0 \u9879
\nFAIL | \u2605\u2605\u2605 \u5927\u5c0f\u5199\u4e0d\u654f\u611f（"AP" \u4e5f\u662f 2 \u9879） | \u671f\u671b=2 | \u5b9e\u9645=0<\/p>\n

\u21d2 \u21d2 \u7a7a\u4e32\u80fd\u5339\u914d 4 \u9879（\u8bf4\u660e items \u4e0e Name \u90fd\u6b63\u5e38）\u3001'zzz' \u5339\u914d 0 \u9879（\u6b63\u5e38），\u4f46 'ap' \u4e5f\u5339\u914d 0 \u9879 \u2717
\n\u21d2 \u672c\u8f6e\u672a\u67e5\u660e\u539f\u56e0（\u53ef\u80fd\u4e0e toLocaleLowerCase() \u5728 Hermes \u4e0a\u7684\u884c\u4e3a\u6709\u5173，\u4e5f\u53ef\u80fd\u662f\u6211\u4f20\u5165\u7684\u6570\u636e\u5728\u8bbe\u5907\u4fa7\u6709\u5dee\u5f02）
\n\u21d2 \u5982\u5b9e\u8bb0\u4e3a"\u672a\u89e3\u91ca\u7684\u504f\u5dee" \u2713 \u2014\u2014 \u4e0d\u5199\u6210"\u5e93\u6709\u95ee\u9898"，\u56e0\u4e3a\u6211\u6ca1\u6709\u5b9a\u4f4d\u5230\u6839\u56e0<\/p>\n

\u2605\u2605 \u516d\u3001\u5176\u4f59\u9884\u68c0\u7ed3\u8bba<\/h3>\n\n\u9884\u68c0\u9879\u7ed3\u679c<\/tr>\n\n\n\n\n\n\n\n\n\n
\u8001\u5199\u6cd5\u4e5d\u9879 + ListView + ViewPropTypes + Text.propTypes + measure + onLayout + useNativeDriver + Animated<\/td>\n\u2705\u2705\u2705 \u5168\u90e8\u4e3a\u7a7a<\/td>\n<\/tr>\n
dependencies<\/td>\n\u2705 \u7a7a\u5bf9\u8c61 {}<\/td>\n<\/tr>\n
peerDependencies<\/td>\n\u2705 \u53ea\u6709 react \/ react-native \u21d2 \u65e0\u539f\u751f peer<\/td>\n<\/tr>\n
Platform.OS 3 \u5904<\/td>\nbehavior={Platform.OS === 'ios' ? 'padding' : null} \u21d2 \u9e3f\u8499\u53d6 null \u2713 \u5b89\u5168<\/td>\n<\/tr>\n
NativeModules 2 \u5904<\/td>\n\u26a0\ufe0f \u4f46\u90fd\u5728\u6ce8\u91ca\u91cc（\/\/ const STATUSBAR_HEIGHT = \u2026）\u2713<\/td>\n<\/tr>\n
<Modal> 1 \u5904 \/ FlatList 24 \u5904<\/td>\n\u2713（<Modal> \u5728\u9e3f\u8499\u4e0a\u5df2\u9a8c\u8bc1\u53ef\u7528）<\/td>\n<\/tr>\n
scripts.prepare<\/td>\n\u2705 \u7a7a<\/td>\n<\/tr>\n
\u4ea4\u4ed8\u5305<\/td>\nsrc\/（TS \u6e90\u7801）+ dist\/（\u7f16\u8bd1\u4ea7\u7269）+ Assets\/Images（\u56fe\u6807 png）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

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

\"\u5728\u8fd9\u91cc\u63d2\u5165\u56fe\u7247\u63cf\u8ff0\"<\/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

\u4e03\u3001\u63a5\u5165\u4e0e\u9884\u68c0（\u8981\u70b9）<\/h3>\n

# dependencies \u662f\u7a7a\u5bf9\u8c61\u3001peer \u53ea\u6709 react\/react-native \u21d2 \u88c5\u4e0a\u5c31\u80fd\u7528<\/span>
\nnpm<\/span> install<\/span> "git+https:\/\/atomgit.com\/oh-react-native\/react-native-picker-modal-view.git#1.3.2-ohos-1.0.0"<\/span> –ignore-scripts<\/p>\n

\n

\u516b\u3001\u4ea4\u4ed8\u5305\u8d28\u91cf\u4e0e\u57fa\u7ebf\u8bf4\u660e<\/h3>\n\n\u7c7b\u522b\u7ed3\u679c<\/tr>\n\n\n\n\n\n\n\n
\u4ea4\u4ed8\u5305\u5185\u5bb9<\/td>\nsrc\/（TS \u6e90\u7801，20+ \u5177\u540d\u5bfc\u51fa）+ dist\/（\u7f16\u8bd1\u4ea7\u7269，index.js \u53ea export default）+ Assets\/Images（\u56fe\u6807）<\/td>\n<\/tr>\n
\u26a0\ufe0f \u7ed3\u6784\u95ee\u9898<\/td>\nmain \u6307\u5411\u7684 dist\/index.js \u53ea\u6709\u9ed8\u8ba4\u5bfc\u51fa；\u5177\u540d\u5bfc\u51fa\u53ea\u5b58\u5728\u4e8e src\/index.ts \u4e0e dist\/*.d.ts \u21d2 \u7c7b\u578b\u4e0e\u8fd0\u884c\u65f6\u4e0d\u4e00\u81f4<\/td>\n<\/tr>\n
spec.json<\/td>\n\u26a0\ufe0f \u7f3a upstreamCommit<\/td>\n<\/tr>\n
validation<\/td>\n\u26a0\ufe0f "build-pass-device-pending"<\/td>\n<\/tr>\n
\u26a0\ufe0f \u58f0\u660e\u7684\u57fa\u7ebf<\/td>\nreactNative: "0.88.0" + rnoh: "0.84.4" \u21d2 \u4e24\u5b57\u6bb5\u81ea\u76f8\u77db\u76fe<\/td>\n<\/tr>\n
\u5907\u6ce8<\/td>\n\u5e93\u4ee3\u7801\u96f6\u6539\u52a8<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u5173\u4e8e\u57fa\u7ebf：\u672c\u6b21\u9a8c\u8bc1\u5728 RN 0.84.1 + RNOH 0.84.3 \u4e0a\u5b8c\u6210\u3002
\n\u672c\u5e93\u65e0\u5df2\u79fb\u9664\u5199\u6cd5\u3001\u65e0\u539f\u751f\u4f9d\u8d56\u3001Platform.OS \u53ea\u6709\u4e00\u5904\u60f0\u6027\u5206\u652f \u21d2 \u7ed3\u8bba\u8de8\u57fa\u7ebf\u6210\u7acb \u2713<\/p>\n

\n

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

9.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\n
\u2605\u2605\u2605\u2605\u2605 dist\/index.js \u53ea\u6709\u9ed8\u8ba4\u5bfc\u51fa<\/td>\n\u5177\u540d\u5fc5\u987b\u4ece dist\/ \u5b50\u8def\u5f84\u5bfc\u5165；\u6837\u5f0f\u5728 dist\/Assets\/Styles\/（\u4e0d\u662f dist\/Styles\/）<\/td>\n<\/tr>\n
\u2605\u2605\u2605\u2605\u2605 \u5177\u540d\u5bfc\u51fa\u6e05\u5355（\u4fee\u6b63\u540e\u53ef\u7528）<\/td>\n6 \u4e2a\u7ec4\u4ef6：ModalComponent \/ AlphabetComponent \/ ListItemComponent \/ SearchComponent \/ ScrollToTopComponent \/ SelectBoxComponent<\/td>\n<\/tr>\n
\u2605\u2605\u2605\u2605\u2605 10 \u4e2a\u516c\u5f00\u65b9\u6cd5\u90fd\u5728 prototype \u4e0a<\/td>\nclearComponent \/ openModal \/ onClose \/ onBackRequest \/ scrollToUp \/ onScrolling \/ renderItem \/ setText \/ onSelectMethod \/ setAlphabet<\/td>\n<\/tr>\n
\u2605\u2605\u2605\u2605\u2605 CommonStyle.BTN_HEIGHT = 50<\/td>\n\u88ab\u7528\u4f5c FlatList \u7684 getItemLayout \u884c\u9ad8<\/td>\n<\/tr>\n
\u2605\u2605\u2605\u2605 openModal() \u53ea\u5728 items.length > 0 && !disabled \u65f6\u624d\u5f39<\/td>\n\u7a7a\u6570\u7ec4\u6216 disabled \u65f6\u8c03\u5b83\u4e0d\u4f1a\u6709\u53cd\u5e94（\u4e0d\u62a5\u9519）<\/td>\n<\/tr>\n
\u2605\u2605\u2605 defaultProps \u6709 13 \u9879<\/td>\n\u542b items（\u9ed8\u8ba4 []）\u3001autoSort\u3001requireSelection\u3001selectPlaceholderText \u7b49<\/td>\n<\/tr>\n
\u2605\u2605\u2605 \u6709 4 \u4e2a\u7eaf\u51fd\u6570\u53ef\u72ec\u7acb\u4f7f\u7528<\/td>\ngenerateAlphabet \/ getFilteredData \/ getIndex \/ trCompare（dist\/Helpers）<\/td>\n<\/tr>\n
\u2605\u2605 <Modal> + FlatList \u627f\u8f7d\u5217\u8868<\/td>\n\u4e24\u8005\u5728\u9e3f\u8499\u4e0a\u90fd\u9a8c\u8bc1\u8fc7\u53ef\u7528<\/td>\n<\/tr>\n
\u2605 setText() \u4f1a\u628a\u641c\u7d22\u8bcd\u5199\u8fdb state<\/td>\n\u5217\u8868\u6570\u636e\u6765\u81ea getFilteredData(items, autoSort, searchText)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

9.2 \u672c\u6b21\u9a8c\u8bc1\u7684\u8fb9\u754c<\/h4>\n
  • \u2605\u2605\u2605 \u672a\u9a8c\u8bc1"\u70b9\u9009\u62e9\u6846\u5f39\u51fa\u5217\u8868"\u7684\u771f\u5b9e\u89e6\u6478\u8def\u5f84（\u7528 openModal() \u7f16\u7a0b\u8c03\u7528）；<\/li>\n
  • \u2605\u2605\u2605 \u672a\u9a8c\u8bc1\u5217\u8868\u9879\u7684\u70b9\u51fb\u9009\u4e2d（onSelectMethod \/ onSelected \u56de\u8c03\u672a\u89e6\u53d1）；<\/li>\n
  • \u2605\u2605\u2605 Modal \u6253\u5f00\u540e\u5217\u8868\u9879\u6587\u672c\u672a\u5728\u5e03\u5c40 dump \u91cc\u5b9a\u4f4d\u5230（\u53ea\u786e\u8ba4\u4e86\u9009\u62e9\u6846\u6587\u672c PMV \u70b9\u6211\u9009\u62e9 y=1163）；<\/li>\n
  • \u2605\u2605 AnimationTypeEnum \u4ecd\u662f undefined（\u5b50\u8def\u5f84\u5bfc\u5165\u5931\u8d25，\u539f\u56e0\u672a\u67e5\u660e）；<\/li>\n
  • \u2605\u2605 getFilteredData('ap') \u8fd4\u56de 0 \u9879（\u4e0e\u6e90\u7801\u903b\u8f91\u4e0d\u7b26，\u672a\u67e5\u660e）；<\/li>\n
  • \u2605\u2605 \u672a\u9a8c\u8bc1\u5b57\u6bcd\u7d22\u5f15\u680f（AlphabetComponent）\u7684\u70b9\u51fb\u8df3\u8f6c；<\/li>\n
  • \u2605\u2605 \u672a\u9a8c\u8bc1\u6eda\u52a8\u5230\u5e95\u90e8\u7684"\u56de\u5230\u9876\u90e8"\u6309\u94ae（ScrollToTopComponent）；<\/li>\n
  • \u672a\u9a8c\u8bc1 renderSelectView \/ renderListItem \/ renderSearch \u4e09\u4e2a\u81ea\u5b9a\u4e49\u6e32\u67d3\u5165\u53e3；<\/li>\n
  • \u672a\u5728 RN 0.88.0 \/ RNOH 0.84.4 \u4e0a\u590d\u9a8c；<\/li>\n
  • \u672a\u6d4b\u5176\u5b83\u5c4f\u5e55\u5bbd\u5ea6；\u672a\u505a\u8de8\u5e73\u53f0\u5bf9\u7167\u3002<\/li>\n

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

    \n

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

    Q1：\u5b83\u5728 RN 0.84 \u4e0a\u80fd\u8dd1\u5417？<\/p>\n

    \u80fd\u3002 \u9ed8\u8ba4\u5bfc\u51fa\u662f class\u300110 \u4e2a\u516c\u5f00\u65b9\u6cd5\u90fd\u5728 prototype \u4e0a\u3001CommonStyle.BTN_HEIGHT = 50\u3001
    \ngenerateAlphabet \u7cbe\u786e\u8fd4\u56de ["A","B","C"]\u3001openModal() \u628a modalVisible \u4ece false \u7f6e\u4e3a true\u3001
    \n\u9009\u62e9\u6846\u6587\u672c\u6e32\u67d3\u5728 y=1163；\u4fee\u6b63\u5bfc\u5165\u540e LogBox \u65e0\u901a\u77e5\u3002<\/p>\n

    Q2：import {AnimationTypeEnum} from 'react-native-picker-modal-view' \u62ff\u5230 undefined？<\/p>\n

    \u56e0\u4e3a main \u6307\u5411\u7684 dist\/index.js \u53ea\u6709 export default PickerModal（131 B）\u3002
    \n.d.ts \u91cc\u58f0\u660e\u7684\u90a3\u4e9b\u5177\u540d\u5bfc\u51fa\u5728\u8fd0\u884c\u65f6\u5e76\u4e0d\u5b58\u5728 \u21d2 \u5fc5\u987b\u4ece\u5b50\u8def\u5f84\u62ff：<\/p>\n

    import<\/span> PickerModal from<\/span> 'react-native-picker-modal-view'<\/span>;<\/span> \/\/ \u2713 \u9ed8\u8ba4\u5bfc\u51fa<\/span>
    \nimport<\/span> {<\/span>AnimationTypeEnum}<\/span>
    \n from<\/span> 'react-native-picker-modal-view\/dist\/Enum\/AnimationTypeEnum'<\/span>;<\/span> \/\/ \u5177\u540d\u8d70\u5b50\u8def\u5f84<\/span>
    \nimport<\/span> {<\/span>generateAlphabet}<\/span> from<\/span> 'react-native-picker-modal-view\/dist\/Helpers'<\/span>;<\/span>
    \nimport<\/span> {<\/span>CommonStyle}<\/span> from<\/span> 'react-native-picker-modal-view\/dist\/Assets\/Styles\/CommonStyle'<\/span>;<\/span><\/p>\n

    \u26a0\ufe0f \u6837\u5f0f\u76ee\u5f55\u662f dist\/Assets\/Styles\/，\u4e0d\u662f dist\/Styles\/\u3002<\/p>\n

    Q3：\u8c03 openModal() \u6ca1\u53cd\u5e94？<\/p>\n

    \u56e0\u4e3a\u5b83\u53ea\u5728 items.length > 0 && !disabled \u65f6\u624d\u7f6e modalVisible: true：<\/p>\n

    if<\/span> (<\/span>items.<\/span>length ><\/span> 0<\/span> &&<\/span> !<\/span>disabled)<\/span> {<\/span> this<\/span>.<\/span>setState<\/span>(<\/span>{<\/span> modalVisible:<\/span> true<\/span> }<\/span>)<\/span>;<\/span> }<\/span><\/p>\n

    \u21d2 \u5148\u786e\u8ba4 items \u4e0d\u662f\u7a7a\u6570\u7ec4\u3001disabled \u4e0d\u662f true\u3002（\u4e0d\u6ee1\u8db3\u65f6\u4e0d\u4f1a\u62a5\u9519，\u53ea\u662f\u4ec0\u4e48\u90fd\u4e0d\u505a）<\/p>\n

    Q4：defaultProps \u6709\u51e0\u9879？<\/p>\n

    13 \u9879：autoGenerateAlphabeticalIndex \/ autoSort \/ disabled \/ items \/ modalAnimationType \/
    \nremoveClippedSubviews \/ requireSelection \/ searchInputTextColor \/ searchPlaceholderText \/
    \nselectPlaceholderText \/ showAlphabeticalIndex \/ showToTopButton \/ sortingLanguage\u3002<\/p>\n

    Q5：\u600e\u4e48\u7528\u5b83\u7684\u7eaf\u51fd\u6570？<\/p>\n

    import<\/span> {<\/span>generateAlphabet,<\/span> getFilteredData,<\/span> getIndex,<\/span> trCompare}<\/span>
    \n from<\/span> 'react-native-picker-modal-view\/dist\/Helpers'<\/span>;<\/span><\/p>\n

    const<\/span> items =<\/span> [<\/span>{<\/span>Name<\/span>:<\/span>'Apple'<\/span>}<\/span>,<\/span>{<\/span>Name<\/span>:<\/span>'Banana'<\/span>}<\/span>,<\/span>{<\/span>Name<\/span>:<\/span>'Apricot'<\/span>}<\/span>,<\/span>{<\/span>Name<\/span>:<\/span>'Cherry'<\/span>}<\/span>]<\/span>;<\/span>
    \ngenerateAlphabet<\/span>(<\/span>items)<\/span>;<\/span> \/\/ ["A","B","C"]（\u9996\u5b57\u6bcd\u53bb\u91cd + \u6392\u5e8f）<\/span>
    \ngetIndex<\/span>(<\/span>'B'<\/span>,<\/span> items,<\/span> false<\/span>,<\/span> ''<\/span>)<\/span>;<\/span> \/\/ 1<\/span>
    \ntrCompare<\/span>(<\/span>'A'<\/span>,<\/span>'A'<\/span>)<\/span>;<\/span> \/\/ 0<\/span><\/p>\n

    \u26a0\ufe0f getFilteredData(items, autoSort, searchText) \u7684 autoSort \u4e3a true \u65f6\u4f1a\u539f\u5730\u6392\u5e8f items（\u526f\u4f5c\u7528）\u3002<\/p>\n

    Q6：AnimationTypeEnum \u5230\u5e95\u600e\u4e48\u62ff？<\/p>\n

    \u672c\u8f6e\u6211\u4ece dist\/Enum\/AnimationTypeEnum \u5bfc\u5165\u4ecd\u7136\u62ff\u5230 undefined（\u539f\u56e0\u672a\u67e5\u660e）\u3002
    \n\u4f46\u5b83\u7684\u503c\u4ece defaultProps.modalAnimationType \u53ef\u4ee5\u95f4\u63a5\u786e\u8ba4：\u9ed8\u8ba4\u662f 'slide'\u3002
    \n\u6240\u4ee5\u5b9e\u9645\u7528\u6cd5\u4e0a\u76f4\u63a5\u4f20\u5b57\u7b26\u4e32 'slide' \/ 'fade' \/ 'none' \u5373\u53ef：<\/p>\n

    <PickerModal modalAnimationType="slide" \u2026 \/><\/p>\n

    \n

    \u5c0f\u7ed3<\/h3>\n

    react-native-picker-modal-view \u662f\u5f39\u7a97\u5f0f\u5217\u8868\u9009\u62e9\u5668（\u9009\u62e9\u6846 + Modal + FlatList + \u641c\u7d22 + \u5b57\u6bcd\u7d22\u5f15 + \u56de\u5230\u9876\u90e8），
    \ndependencies \u662f\u7a7a\u5bf9\u8c61\u3001peer \u53ea\u6709 react\/react-native\u3001\u8001\u5199\u6cd5\u4e5d\u9879\u5168\u7a7a \u2014\u2014 \u4ee3\u7801\u672c\u8eab\u5f88\u5e72\u51c0\u3002<\/p>\n

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

  • \n

    \u2605\u2605\u2605\u2605\u2605 \u201c\u6e90\u7801\u7684\u5bfc\u51fa"\u4e0d\u7b49\u4e8e"\u8fd0\u884c\u65f6\u7684\u5bfc\u51fa\u201d\u3002
    \ndist\/index.js（main \u6307\u5411\u7684）\u53ea\u6709 131 B\u3001\u53ea\u6709 export default；
    \n\u800c src\/index.ts \u4e0e dist\/index.d.ts \u91cc\u6709 20+ \u5177\u540d\u5bfc\u51fa \u21d2 TS \u7f16\u8bd1\u671f\u6b63\u5e38\u3001\u8fd0\u884c\u65f6\u5168 undefined \u2717
    \n\u540e\u679c\u5f88\u5178\u578b：generateAlphabet() \u629b undefined is not a function\u3001LogBox \u62a5\u9519\u3001\u540e\u7eed\u5224\u636e\u5168\u5d29\u3002
    \n\u21d2 \u68c0\u67e5\u65b9\u6cd5\u5f88\u7b80\u5355：\u6253\u5f00 package.json \u7684 main \u6307\u5411\u7684\u90a3\u4e2a\u6587\u4ef6，\u770b\u5b83\u5230\u5e95 export \u4e86\u4ec0\u4e48\u3002
    \n\u21d2 \u4fee\u6b63\u65b9\u5f0f：\u9ed8\u8ba4\u5bfc\u51fa\u8d70\u5165\u53e3，\u5177\u540d\u8d70 dist\/ \u5b50\u8def\u5f84（\u5e76\u6ce8\u610f\u6837\u5f0f\u5728 dist\/Assets\/Styles\/）\u3002<\/p>\n<\/li>\n

  • \n

    \u2605\u2605\u2605\u2605\u2605 \u7cbe\u786e\u503c\u5224\u636e\u4e09\u6761\u5168\u90e8\u4e00\u6b21\u547d\u4e2d\u3002
    \nCommonStyle.BTN_HEIGHT = 50\u3001generateAlphabet(4\u9879) \u21d2 ["A","B","C"]\u3001getIndex("B") \u21d2 1
    \n\u2014\u2014 \u90fd\u662f\u5148\u5728\u8bbe\u5907\u5916\u7528\u6e90\u7801\u903b\u8f91\u63a8\u51fa\u771f\u503c\u3001\u518d\u5230\u8bbe\u5907\u4e0a\u65ad\u8a00\u540c\u4e00\u4e2a\u503c \u2713<\/p>\n<\/li>\n

  • \n

    \u2605\u2605\u2605\u2605\u2605 \u6210\u5458\u5f52\u5c5e\u518d\u6dfb\u4e00\u4f8b（\u8fd9\u6b21\u662f"\u539f\u578b\u65b9\u6cd5"）\u3002
    \n10 \u4e2a\u516c\u5f00\u65b9\u6cd5\u90fd\u662f public x(): void { this._x(); } \u21d2 \u5168\u5728 prototype \u4e0a\u3001\u65ad\u8a00\u4e00\u6b21\u901a\u8fc7 \u2713
    \n\u21d2 \u4e0e\u67d0\u4e9b\u5e93\u91cc\u90a3 6 \u4e2a\u7bad\u5934\u7c7b\u5b57\u6bb5（\u53ea\u5728\u5b9e\u4f8b\u4e0a）\u6b63\u597d\u6784\u6210\u5bf9\u7167 \u21d2
    \n\u5224\u522b\u4f9d\u636e\u59cb\u7ec8\u662f .d.ts \u7684\u5199\u6cd5：name(\u2026): \u2026 vs name: (\u2026) => \u2026 \u2713<\/p>\n<\/li>\n

  • \n

    \u2605\u2605\u2605\u2605 openModal() \u7684\u72b6\u6001\u673a\u53ef\u89c2\u6d4b\u4e14\u5168\u7a0b\u901a\u8fc7：
    \n\u521d\u59cb modalVisible = false \u2192 \u8c03\u7528 \u2192 true；setText('ap') \u2192 state.searchText = 'ap' \u2713
    \n\u21d2 \u8fd9\u7c7b"\u72b6\u6001\u4f4d\u79fb"\u662f\u9a8c\u8bc1\u5b9e\u4f8b\u65b9\u6cd5\u6700\u76f4\u63a5\u7684\u8bc1\u636e\u3002<\/p>\n<\/li>\n

  • \n

    \u2605\u2605\u2605 \u6211\u53c8\u5728"\u6570\u91cf\u7c7b\u65ad\u8a00"\u4e0a\u9519\u4e86（\u8fde\u7eed\u7b2c\u56db\u8f6e）\u3002
    \ndefaultProps \u5b9e\u9645 13 \u9879\u3001\u6211\u5199\u4e86 14 \u2717 \u2014\u2014 \u800c\u4e14\u6211\u5df2\u7ecf\u628a\u771f\u503c 13 \u6253\u6210 NOTE \u4e86，\u4ecd\u5199\u9519\u5b57\u9762\u91cf\u3002
    \n\u21d2 \u6539\u6cd5\u5fc5\u987b\u4ece"\u6570\u91cf"\u6539\u6210"\u6e05\u5355"：\u628a .d.ts \u91cc\u7684\u952e\u540d\u9010\u4e2a\u5217\u6210\u6570\u7ec4\u6bd4\u5bf9，
    \n\u6570\u91cf\u9519\u3001\u540d\u5b57\u9519\u90fd\u4f1a\u88ab\u6293\u5230，\u6bd4\u65ad\u8a00\u4e00\u4e2a\u6570\u5b57\u53ef\u9760\u5f97\u591a \u2713<\/p>\n<\/li>\n

  • \n

    \u2605\u2605\u2605 \u8001\u5b9e\u627f\u8ba4\u4e24\u6761"\u672a\u89e3\u91ca"\u7684\u504f\u5dee：
    \nAnimationTypeEnum \u4ecd undefined\u3001getFilteredData('ap') \u8fd4\u56de 0 \u9879（\u6e90\u7801\u903b\u8f91\u4e0a\u5e94\u5339\u914d 2 \u9879）\u3002
    \n\u21d2 \u6ca1\u6709\u67e5\u660e\u6839\u56e0，\u5c31\u4e0d\u5199\u6210"\u5e93\u6709 bug" \u2014\u2014 \u53ea\u5199"\u5b9e\u6d4b\u4e0e\u9884\u671f\u4e0d\u7b26\u3001\u539f\u56e0\u672a\u67e5\u660e" \u2713<\/p>\n<\/li>\n

  • \n

    \u2605\u2605 NativeModules \u547d\u4e2d\u8981\u770b\u4e0a\u4e0b\u6587：2 \u5904\u5168\u5728\u6ce8\u91ca\u91cc（\/\/ const STATUSBAR_HEIGHT = \u2026）\u21d2 \u4e0d\u662f\u771f\u5b9e\u4f7f\u7528 \u2713<\/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\n
    \u4e09\u65b9\u5e93<\/td>\nreact-native-picker-modal-view（\u4e0a\u6e38 1.3.2 \u7684\u9e3f\u8499\u9002\u914d\u7248）<\/td>\n<\/tr>\n
    \u9002\u914d\u4ed3\u5e93<\/td>\nhttps:\/\/atomgit.com\/oh-react-native\/react-native-picker-modal-view<\/td>\n<\/tr>\n
    \u9002\u914d TAG<\/td>\n1.3.2-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\u5f39\u7a97\u5f0f\u5217\u8868\u9009\u62e9\u5668（Modal + FlatList + \u641c\u7d22 + \u5b57\u6bcd\u7d22\u5f15）<\/td>\n<\/tr>\n
    \u8fd0\u884c\u65f6\u4f9d\u8d56<\/td>\n\u2705 dependencies \u662f\u7a7a\u5bf9\u8c61；peer \u53ea\u6709 react \/ react-native<\/td>\n<\/tr>\n
    \u5bfc\u51fa\u5f62\u6001<\/td>\n\u9ed8\u8ba4\u5bfc\u51fa PickerModal（class）；\u5177\u540d\u5bfc\u51fa\u9700\u4ece dist\/ \u5b50\u8def\u5f84\u62ff（\u5165\u53e3 dist\/index.js \u53ea\u6709\u9ed8\u8ba4\u5bfc\u51fa）<\/td>\n<\/tr>\n
    \u26a0\ufe0f \u7ed3\u6784\u9677\u9631<\/td>\n\u7c7b\u578b\u58f0\u660e\u91cc\u6709\u5177\u540d\u3001\u8fd0\u884c\u65f6\u5165\u53e3\u6ca1\u6709 \u21d2 \u5fc5\u987b\u7528\u5b50\u8def\u5f84<\/td>\n<\/tr>\n
    \u8bb8\u53ef\u8bc1<\/td>\nMIT<\/td>\n<\/tr>\n
    \u4e0a\u6e38\u4ed3\u5e93<\/td>\nhttps:\/\/github.com\/pankod\/react-native-picker-modal-view<\/td>\n<\/tr>\n
    \u5bbf\u4e3b\u5de5\u7a0b<\/td>\nRNOH084Demo（\u6d4b\u8bd5\u9875 rnAppKey = PickerModalTestApp）<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    npm<\/span> install<\/span> "git+https:\/\/atomgit.com\/oh-react-native\/react-native-picker-modal-view.git#1.3.2-ohos-1.0.0"<\/span> –ignore-scripts<\/p>\n

    \/\/ \u2460 \u9ed8\u8ba4\u5bfc\u51fa：\u6b63\u5e38\u4ece\u5165\u53e3\u5bfc\u5165
    \nimport PickerModal from 'react-native-picker-modal-view';<\/p>\n

    \/\/ \u2461 \u5177\u540d\u5bfc\u51fa：\u5fc5\u987b\u4ece dist \u5b50\u8def\u5f84（\u5165\u53e3\u53ea\u6709 default）
    \nimport {generateAlphabet, getFilteredData, getIndex, trCompare}
    \n from 'react-native-picker-modal-view\/dist\/Helpers';
    \nimport {CommonStyle} from 'react-native-picker-modal-view\/dist\/Assets\/Styles\/CommonStyle';
    \nimport {ModalComponent} from 'react-native-picker-modal-view\/dist\/Components\/Modal';<\/p>\n

    const ITEMS = [
    \n {Id: 1, Name: 'Apple', Value: 'apple'},
    \n {Id: 2, Name: 'Banana', Value: 'banana'},
    \n {Id: 3, Name: 'Apricot', Value: 'apricot'},
    \n {Id: 4, Name: 'Cherry', Value: 'cherry'},
    \n];<\/p>\n

    <PickerModal
    \n items={ITEMS}
    \n showAlphabeticalIndex
    \n showToTopButton
    \n selectPlaceholderText="\u8bf7\u9009\u62e9"
    \n searchPlaceholderText="\u641c\u7d22"
    \n modalAnimationType="slide"
    \n onSelected={(item) => console.log(item.Name)}
    \n onClosed={() => {}}
    \n\/><\/p>\n

    \/\/ \u5b9e\u4f8b\u65b9\u6cd5（10 \u4e2a\u90fd\u5728 prototype \u4e0a）
    \nconst ref = useRef(null);
    \nref.current.openModal(); \/\/ \u2605 \u53ea\u5728 items.length > 0 && !disabled \u65f6\u624d\u5f39
    \nref.current.setText('ap');
    \nref.current.clearComponent();
    \nref.current.onClose();
    \nref.current.scrollToUp();
    \nref.current.setAlphabet('B');<\/p>\n

    \/\/ \u26a0\ufe0f dist\/index.js \u53ea\u6709 export default \u21d2 \u5177\u540d\u5fc5\u987b\u8d70 dist \u5b50\u8def\u5f84
    \n\/\/ \u26a0\ufe0f \u6837\u5f0f\u5728 dist\/Assets\/Styles\/（\u4e0d\u662f dist\/Styles\/）
    \n\/\/ \u26a0\ufe0f CommonStyle.BTN_HEIGHT = 50（FlatList \u884c\u9ad8）
    \n\/\/ \u26a0\ufe0f defaultProps 13 \u9879（items \u9ed8\u8ba4 []\u3001modalAnimationType \u9ed8\u8ba4 'slide'）
    \n\/\/ \u26a0\ufe0f getFilteredData(items, true, text) \u4f1a\u539f\u5730\u6392\u5e8f items（\u526f\u4f5c\u7528）<\/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 PickerModalTestApp<\/p>\n

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

    # \u2460 \u5951\u7ea6 + \u7eaf\u51fd\u6570 + \u72b6\u6001\u673a（53 \u884c）<\/span>
    \nhdc shell "hilog -x | grep pmv-test"<\/span> |<\/span> Select-String<\/span> 'PASS|FAIL|SUMMARY|NOTE'<\/span>
    \n# \u21d2 BTN_HEIGHT=50；generateAlphabet \u21d2 ["A","B","C"]；getIndex("B") \u21d2 1<\/span>
    \n# \u21d2 modalVisible: false \u2192 openModal() \u2192 true<\/span>
    \n# \u2461 \u9009\u62e9\u6846\u6587\u672c<\/span>
    \ndevecocli ui layout |<\/span> Select-String<\/span> 'PMV \u70b9\u6211\u9009\u62e9'<\/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 = 39vp<\/td>\n<\/tr>\n
    \u5bbf\u4e3b\u4f9d\u8d56<\/td>\n\u2705 \u65e0\u9700\u989d\u5916\u4f9d\u8d56（dependencies \u7a7a）<\/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 33 \u79d2 \u21d2 \u4e00\u6b21\u6210\u529f（\u6253\u5305\u4e0e\u6784\u5efa\u9000\u51fa\u7801\u90fd\u68c0\u67e5\u4e86）<\/td>\n<\/tr>\n
    \u9a8c\u8bc1\u89c4\u6a21<\/td>\n53 \u884c\u5224\u636e；6 \u4e2a\u5177\u540d\u7ec4\u4ef6\u5168\u53ef\u7528；10 \u4e2a\u539f\u578b\u65b9\u6cd5\u5168\u547d\u4e2d；BTN_HEIGHT=50 \/ generateAlphabet\u21d2[A,B,C] \/ getIndex("B")\u21d21 \u4e09\u6761\u7cbe\u786e\u503c\u547d\u4e2d；openModal() \u72b6\u6001\u673a\u5168\u7a0b\u901a\u8fc7；3 \u6761\u672a\u901a\u8fc7（AnimationTypeEnum undefined\u3001defaultProps 13\u2260\u6211\u5199\u7684 14\u3001getFilteredData('ap') \u8fd4\u56de 0）；LogBox \u4fee\u6b63\u540e\u65e0\u901a\u77e5；4 \u5f20\u622a\u56fe\u4e92\u5f02<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \u26a0\ufe0f \u57fa\u7ebf\u8bf4\u660e：\u4ea4\u4ed8\u5305 spec.json \u58f0\u660e RN 0.88.0 + RNOH 0.84.4（\u4e24\u5b57\u6bb5\u81ea\u76f8\u77db\u76fe），\u672c\u6b21\u9a8c\u8bc1\u5728 RN 0.84.1 + RNOH 0.84.3 \u4e0a\u5b8c\u6210\u3002
    \n\u672c\u5e93\u65e0\u5df2\u79fb\u9664\u5199\u6cd5\u3001Platform.OS \u53ea\u6709\u4e00\u5904\u60f0\u6027\u5206\u652f \u21d2 \u7ed3\u8bba\u8de8\u57fa\u7ebf\u6210\u7acb\u3002<\/p>\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":"

    \u672c\u6587\u8bb0\u5f55\u628a react-native-picker-modal-view（\u5f39\u7a97\u5f0f\u5217\u8868\u9009\u62e9\u5668）\u9002\u914d\u5230 HarmonyOS \u7684\u5b8c\u6574\u8fc7\u7a0b\u3002
    \n\u5b83\u505a\u7684\u4e8b：\u6e32\u67d3\u4e00\u4e2a\\”\u9009\u62e9\u6846\\”，\u70b9\u5b83\u5f39\u51fa\u4e00\u4e2a Modal \u5217\u8868（\u5e26\u641c\u7d22\u6846\u3001\u5b57\u6bcd\u7d22\u5f15\u3001\u6eda\u52a8\u5230\u5e95\u90e8\u7684\\”\u56de\u5230\u9876\u90e8\\”\u6309\u94ae），\u9009\u4e2d\u540e\u56de\u8c03\u3002
    \n\u7ed3\u8bba：\u53ef\u7528\u3002\u4f46\u672c\u8f6e\u6700\u91cd\u8981\u7684\u6536\u83b7\u4e0d\u662f\\”\u80fd\u4e0d\u80fd\u8dd1\\”，\u800c\u662f\u4e00\u4e2a\u4ea4\u4ed8\u5305\u7ed3\u6784\u4e0a\u7684\u9677\u9631 \u2014\u2014
    \nmain <\/p>\n","protected":false},"author":2,"featured_media":116960,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[6800,280,524,50,86],"topic":[],"class_list":["post-116964","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-server","tag-react-native","tag-harmonyos","tag-react-js","tag-50","tag-86"],"yoast_head":"\nReact Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-picker-modal-view \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\/116964.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-picker-modal-view \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u672c\u6587\u8bb0\u5f55\u628a react-native-picker-modal-view（\u5f39\u7a97\u5f0f\u5217\u8868\u9009\u62e9\u5668）\u9002\u914d\u5230 HarmonyOS \u7684\u5b8c\u6574\u8fc7\u7a0b\u3002 \u5b83\u505a\u7684\u4e8b：\u6e32\u67d3\u4e00\u4e2a"\u9009\u62e9\u6846"，\u70b9\u5b83\u5f39\u51fa\u4e00\u4e2a Modal \u5217\u8868（\u5e26\u641c\u7d22\u6846\u3001\u5b57\u6bcd\u7d22\u5f15\u3001\u6eda\u52a8\u5230\u5e95\u90e8\u7684"\u56de\u5230\u9876\u90e8"\u6309\u94ae），\u9009\u4e2d\u540e\u56de\u8c03\u3002 \u7ed3\u8bba：\u53ef\u7528\u3002\u4f46\u672c\u8f6e\u6700\u91cd\u8981\u7684\u6536\u83b7\u4e0d\u662f"\u80fd\u4e0d\u80fd\u8dd1"，\u800c\u662f\u4e00\u4e2a\u4ea4\u4ed8\u5305\u7ed3\u6784\u4e0a\u7684\u9677\u9631 \u2014\u2014 main\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/116964.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:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261022020634-6ad96faacaa9a.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=\"9 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/116964.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/116964.html\",\"name\":\"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-picker-modal-view \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:41+00:00\",\"dateModified\":\"2026-10-22T02:06:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/116964.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/116964.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/116964.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-picker-modal-view \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-picker-modal-view \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\/116964.html","og_locale":"zh_CN","og_type":"article","og_title":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-picker-modal-view \u7684\u9e3f\u8499\u5316\u9002\u914d\u6307\u5357 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u672c\u6587\u8bb0\u5f55\u628a react-native-picker-modal-view（\u5f39\u7a97\u5f0f\u5217\u8868\u9009\u62e9\u5668）\u9002\u914d\u5230 HarmonyOS \u7684\u5b8c\u6574\u8fc7\u7a0b\u3002 \u5b83\u505a\u7684\u4e8b：\u6e32\u67d3\u4e00\u4e2a\"\u9009\u62e9\u6846\"，\u70b9\u5b83\u5f39\u51fa\u4e00\u4e2a Modal \u5217\u8868（\u5e26\u641c\u7d22\u6846\u3001\u5b57\u6bcd\u7d22\u5f15\u3001\u6eda\u52a8\u5230\u5e95\u90e8\u7684\"\u56de\u5230\u9876\u90e8\"\u6309\u94ae），\u9009\u4e2d\u540e\u56de\u8c03\u3002 \u7ed3\u8bba：\u53ef\u7528\u3002\u4f46\u672c\u8f6e\u6700\u91cd\u8981\u7684\u6536\u83b7\u4e0d\u662f\"\u80fd\u4e0d\u80fd\u8dd1\"，\u800c\u662f\u4e00\u4e2a\u4ea4\u4ed8\u5305\u7ed3\u6784\u4e0a\u7684\u9677\u9631 \u2014\u2014 main","og_url":"https:\/\/www.wsisp.com\/helps\/116964.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-10-22T02:06:41+00:00","og_image":[{"url":"https:\/\/www.wsisp.com\/helps\/wp-content\/uploads\/2026\/10\/20261022020634-6ad96faacaa9a.jpg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"9 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/116964.html","url":"https:\/\/www.wsisp.com\/helps\/116964.html","name":"React Native for OpenHarmony \u5b9e\u6218\uff1a\u4e09\u65b9\u5e93 react-native-picker-modal-view \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:41+00:00","dateModified":"2026-10-22T02:06:41+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/116964.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/116964.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/116964.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-picker-modal-view \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\/116964","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=116964"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/116964\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media\/116960"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=116964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=116964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=116964"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=116964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}