From b8207400f99bf88be0e176a8b6913f774615ffd0 Mon Sep 17 00:00:00 2001 From: qinjianqi Date: Tue, 8 Oct 2024 19:02:37 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#IAVH8S]=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0EN=E7=9B=AE=E5=BD=95=E4=B8=8B=E7=9A=84=E6=8C=87?= =?UTF-8?q?=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/EventBus.md | 328 ++++ en/Immer.md | 820 ++++++++ en/NativeBase.md | 786 ++++++++ en/Parse-SDK-JS.md | 337 ++++ en/Shopify-restyle.md | 196 ++ en/ant-design-react-native.md | 1155 ++++++++++++ en/axios.md | 153 ++ en/bam-tech-react-native-image-resizer.md | 398 ++++ en/baronha-ting.md | 232 +++ en/callstack-react-theme-provider.md | 144 ++ en/capi-architecture.md | 41 + en/codegen.md | 102 + en/contribute.md | 51 + en/crypto-js.md | 626 +++++++ en/dayJs.md | 346 ++++ en/deepmerge.md | 130 ++ en/flipper-plugin-react-navigation.md | 63 + en/freakycoder-react-native-bounceable.md | 137 ++ en/galio-framework.md | 407 ++++ en/gorhom-bottom-sheet.md | 269 +++ en/htmlparser2.md | 142 ++ en/i18next.md | 164 ++ en/js-beautify.md | 778 ++++++++ en/jsbarcode.md | 327 ++++ en/klarna-platform-colors.md | 322 ++++ en/link-source-code.md | 47 + en/lodash.md | 196 ++ en/lottie-react-native.md | 298 +++ en/mobx-react.md | 158 ++ en/mobx.md | 197 ++ en/moment.md | 263 +++ en/nativewind.md | 120 ++ ...penspacelabs-react-native-zoomable-view.md | 189 ++ en/parse5.md | 167 ++ en/patch.md | 44 + en/prop-types.md | 125 ++ en/qrcode-generator.md | 121 ++ en/react-ahooks.md | 224 +++ en/react-content-loader.md | 122 ++ en/react-countdown-circle-timer.md | 127 ++ en/react-i18next.md | 115 ++ en/react-lifecycles-compat.md | 180 ++ en/react-native-MJRefresh.md | 278 +++ en/react-native-QRCode.md | 140 ++ en/react-native-SmartRefreshLayout.md | 399 ++++ en/react-native-action-button.md | 153 ++ en/react-native-action-sheet.md | 244 +++ en/react-native-alipay.md | 254 +++ en/react-native-amap-geolocation.md | 486 +++++ en/react-native-amap3d.md | 523 ++++++ en/react-native-animatable.md | 124 ++ en/react-native-animate-number.md | 175 ++ en/react-native-apple-authentication.md | 217 +++ en/react-native-aria.md | 548 ++++++ ...eact-native-async-storage-async-storage.md | 285 +++ en/react-native-audio-recorder-player.md | 722 +++++++ en/react-native-audio-toolkit.md | 615 ++++++ en/react-native-audio.md | 229 +++ en/react-native-autoLink.md | 144 ++ en/react-native-autocomplete-dropdown.md | 168 ++ en/react-native-autocomplete-input.md | 184 ++ en/react-native-autoheight-webview.md | 129 ++ en/react-native-awesome-gallery.md | 150 ++ en/react-native-background-fetch.md | 439 +++++ en/react-native-background-timer.md | 350 ++++ en/react-native-baidu-map.md | 610 ++++++ en/react-native-barcode-builder.md | 115 ++ en/react-native-bars.md | 222 +++ en/react-native-base64.md | 130 ++ en/react-native-better-banner.md | 156 ++ en/react-native-bindingx.md | 329 ++++ en/react-native-ble-manager.md | 610 ++++++ en/react-native-ble-plx.md | 310 ++++ en/react-native-blob-util.md | 610 ++++++ ...-util\357\274\210nocodegen\357\274\211.md" | 654 +++++++ en/react-native-blurhash.md | 442 +++++ en/react-native-bootsplash.md | 390 ++++ en/react-native-bouncy-checkbox.md | 147 ++ en/react-native-button.md | 128 ++ en/react-native-calendar-events.md | 412 ++++ en/react-native-calendars.md | 261 +++ en/react-native-callkeep.md | 248 +++ en/react-native-camera-kit.md | 358 ++++ en/react-native-cameraroll.md | 207 +++ en/react-native-canvas.md | 169 ++ en/react-native-cardview.md | 268 +++ en/react-native-chart-kit.md | 282 +++ en/react-native-charts-wrapper.md | 682 +++++++ en/react-native-check-box.md | 114 ++ en/react-native-clipboard-clipboard.md | 297 +++ en/react-native-clippath-capi.md | 249 +++ en/react-native-clippathview.md | 235 +++ en/react-native-code-push.md | 432 +++++ en/react-native-collapsible.md | 146 ++ en/react-native-color-matrix-image-filters.md | 290 +++ en/react-native-communications.md | 137 ++ en/react-native-community-blur.md | 424 +++++ en/react-native-community-checkbox.md | 273 +++ en/react-native-community-datetimepicker.md | 313 ++++ en/react-native-community-geolocation.md | 288 +++ en/react-native-community-hooks.md | 168 ++ en/react-native-community-netinfo.md | 317 ++++ ...t-native-community-progress-bar-android.md | 249 +++ en/react-native-community-progress-view.md | 242 +++ ...-native-community-push-notification-ios.md | 375 ++++ ...eact-native-community-segmented-control.md | 110 ++ en/react-native-community-slider.md | 263 +++ en/react-native-community-toolbar-android.md | 319 ++++ en/react-native-compass-heading.md | 215 +++ en/react-native-confetti-cannon.md | 117 ++ en/react-native-config.md | 251 +++ en/react-native-confirmation-code-field.md | 159 ++ en/react-native-contacts.md | 570 ++++++ en/react-native-context-menu-view.md | 264 +++ en/react-native-cookies-cookies.md | 357 ++++ en/react-native-copilot.md | 238 +++ en/react-native-country-picker-modal.md | 315 ++++ en/react-native-create-thumbnail.md | 298 +++ en/react-native-credit-card-input.md | 200 ++ en/react-native-crypto-js.md | 162 ++ en/react-native-crypto.md | 186 ++ en/react-native-custom-keyboard.md | 339 ++++ en/react-native-date-picker.md | 234 +++ en/react-native-deck-swiper.md | 480 +++++ en/react-native-default-preference.md | 195 ++ en/react-native-device-info.md | 296 +++ en/react-native-dismiss-keyboard.md | 161 ++ en/react-native-doc-viewer.md | 437 +++++ en/react-native-document-picker.md | 395 ++++ en/react-native-dotenv.md | 303 +++ en/react-native-drag-sort.md | 673 +++++++ en/react-native-drawer-layout-polyfill.md | 275 +++ en/react-native-drop-shadow.md | 152 ++ en/react-native-dropdown-picker.md | 235 +++ en/react-native-dropdownalert.md | 442 +++++ en/react-native-dynamic.md | 208 +++ en/react-native-easy-grid.md | 103 + en/react-native-easy-toast.md | 118 ++ en/react-native-echarts-pro.md | 131 ++ en/react-native-element-dropdown.md | 471 +++++ en/react-native-elements.md | 1071 +++++++++++ en/react-native-email-link.md | 289 +++ en/react-native-error-boundary.md | 127 ++ en/react-native-exception-handler.md | 291 +++ en/react-native-exit-app.md | 189 ++ en/react-native-ezswiper.md | 372 ++++ en/react-native-fast-image.md | 296 +++ en/react-native-feather.md | 115 ++ en/react-native-file-access.md | 450 +++++ en/react-native-file-selector.md | 210 +++ en/react-native-file-viewer.md | 260 +++ en/react-native-fileupload.md | 231 +++ en/react-native-fingerprint-scanner.md | 237 +++ en/react-native-fit-Image.md | 328 ++++ en/react-native-flash-message.md | 162 ++ en/react-native-flexi-radio-button.md | 179 ++ en/react-native-flip-card.md | 248 +++ en/react-native-fs.md | 311 ++++ en/react-native-gesture-handler.md | 469 +++++ en/react-native-get-random-values.md | 185 ++ en/react-native-gifted-charts.md | 1012 ++++++++++ en/react-native-gifted-chat.md | 197 ++ en/react-native-graph.md | 159 ++ en/react-native-haptic-feedback.md | 247 +++ en/react-native-harmony-sample-package.md | 382 ++++ en/react-native-hole-view.md | 294 +++ en/react-native-htmlview.md | 121 ++ en/react-native-http-bridge.md | 300 +++ en/react-native-hyperlink.md | 109 ++ en/react-native-iconfont-cli.md | 224 +++ en/react-native-idfa-aaid.md | 331 ++++ en/react-native-idle-timer.md | 182 ++ en/react-native-image-capinsets-next.md | 272 +++ en/react-native-image-colors.md | 365 ++++ ...act-native-image-crop-picker(nocodegen).md | 297 +++ en/react-native-image-crop-picker.md | 1066 +++++++++++ en/react-native-image-editor.md | 309 +++ en/react-native-image-gallery.md | 100 + en/react-native-image-header-scroll-view.md | 301 +++ en/react-native-image-marker.md | 475 +++++ en/react-native-image-pan-zoom.md | 156 ++ en/react-native-image-picker.md | 292 +++ en/react-native-image-rotate.md | 250 +++ en/react-native-image-sequence-2.md | 422 +++++ en/react-native-image-viewing.md | 231 +++ en/react-native-image-zoom-viewer.md | 290 +++ en/react-native-inappbrowser.md | 527 ++++++ en/react-native-incall-manager.md | 745 ++++++++ en/react-native-indicators.md | 267 +++ en/react-native-input-scroll-view.md | 120 ++ en/react-native-intersection-observer.md | 133 ++ en/react-native-iphone-screen-helper.md | 102 + en/react-native-json-tree.md | 272 +++ en/react-native-keep-awake.md | 241 +++ en/react-native-keyboard-accessory.md | 209 +++ en/react-native-keyboard-aware-scroll-view.md | 145 ++ en/react-native-keyboard-controller.md | 418 +++++ en/react-native-keys.md | 256 +++ en/react-native-largelist.md | 226 +++ en/react-native-lightbox.md | 213 +++ en/react-native-linear-gradient-text.md | 108 ++ en/react-native-linear-gradient.md | 248 +++ en/react-native-loading-spinner-overlay.md | 122 ++ en/react-native-localization-settings.md | 231 +++ en/react-native-localization.md | 288 +++ en/react-native-localize.md | 240 +++ en/react-native-mail.md | 234 +++ en/react-native-map-linking.md | 169 ++ en/react-native-maps-directions.md | 246 +++ en/react-native-maps.md | 879 +++++++++ en/react-native-markdown-display.md | 130 ++ en/react-native-markdown-renderer.md | 140 ++ en/react-native-marquee-ab.md | 143 ++ en/react-native-marquee.md | 112 ++ en/react-native-mask-text.md | 178 ++ en/react-native-masked-text.md | 203 ++ en/react-native-masked-view-masked-view.md | 257 +++ en/react-native-material-buttons.md | 265 +++ en/react-native-material-design-style.md | 150 ++ en/react-native-material-dropdown.md | 163 ++ en/react-native-material-menu.md | 131 ++ en/react-native-material-ripple.md | 169 ++ en/react-native-material-textfield.md | 282 +++ en/react-native-material-ui.md | 610 ++++++ en/react-native-md5.md | 128 ++ en/react-native-mlkit-ocr.md | 330 ++++ en/react-native-mmkv-storage.md | 408 ++++ en/react-native-modal-popover.md | 323 ++++ en/react-native-modal.md | 190 ++ en/react-native-modalbox.md | 538 ++++++ en/react-native-modals.md | 235 +++ en/react-native-mqtt.md | 179 ++ en/react-native-multi-slider.md | 546 ++++++ en/react-native-multiple-select.md | 221 +++ en/react-native-neomorph-shadows.md | 147 ++ en/react-native-nested-scroll-view.md | 183 ++ en/react-native-network-info.md | 289 +++ en/react-native-nfc-manager.md | 473 +++++ en/react-native-notifier.md | 226 +++ en/react-native-offline.md | 163 ++ en/react-native-ohos-community-auto-fill.md | 276 +++ en/react-native-orientation-locker.md | 362 ++++ en/react-native-orientation.md | 313 ++++ en/react-native-pager-view.md | 249 +++ en/react-native-paper.md | 877 +++++++++ en/react-native-parsed-text.md | 226 +++ en/react-native-pdf.md | 333 ++++ en/react-native-performance.md | 345 ++++ en/react-native-permissions.md | 454 +++++ en/react-native-phone-number-input.md | 216 +++ en/react-native-picker-picker(nocodegen).md | 311 ++++ en/react-native-picker-picker.md | 252 +++ en/react-native-picker-select.md | 238 +++ en/react-native-picker.md | 314 ++++ en/react-native-pickers.md | 337 ++++ en/react-native-popover-view.md | 189 ++ en/react-native-popup-menu.md | 161 ++ en/react-native-print.md | 303 +++ en/react-native-progress.md | 233 +++ en/react-native-pull.md | 473 +++++ en/react-native-qr-decode-image-camera.md | 315 ++++ en/react-native-qrcode-svg.md | 110 ++ en/react-native-quick-base64.md | 598 ++++++ en/react-native-randombytes.md | 220 +++ en/react-native-ratings.md | 188 ++ en/react-native-reanimated-bottom-sheet.md | 178 ++ en/react-native-reanimated-carousel.md | 268 +++ en/react-native-reanimated-table.md | 129 ++ en/react-native-reanimated.md | 274 +++ en/react-native-recaptcha-that-works.md | 172 ++ en/react-native-reconnecting-websocket.md | 143 ++ en/react-native-redash.md | 625 +++++++ en/react-native-render-html.md | 120 ++ en/react-native-responsive-fontsize.md | 112 ++ en/react-native-restart.md | 176 ++ en/react-native-root-modal.md | 198 ++ en/react-native-root-siblings.md | 298 +++ en/react-native-root-toast.md | 157 ++ en/react-native-safe-area-context.md | 266 +++ en/react-native-safe-module.md | 108 ++ en/react-native-safe-modules.md | 140 ++ en/react-native-screens.md | 158 ++ en/react-native-screenshot-prevent.md | 206 ++ en/react-native-scroll-bottom-sheet.md | 206 ++ en/react-native-scrollable-tab-view.md | 119 ++ en/react-native-scrollable-tabview.md | 209 +++ en/react-native-secharts.md | 171 ++ ...act-native-section-list-get-item-layout.md | 94 + en/react-native-securerandom.md | 192 ++ en/react-native-send-intent.md | 280 +++ en/react-native-sensitive-info.md | 275 +++ en/react-native-sensors.md | 218 +++ en/react-native-shadow-2.md | 218 +++ en/react-native-shake.md | 198 ++ en/react-native-share.md | 376 ++++ en/react-native-shimmer-placeholder.md | 136 ++ en/react-native-signature-canvas.md | 212 +++ en/react-native-signature-capture.md | 308 +++ en/react-native-simple-toast.md | 164 ++ en/react-native-size-matters.md | 243 +++ en/react-native-skia.md | 732 ++++++++ en/react-native-slider.md | 196 ++ en/react-native-snackbar.md | 285 +++ en/react-native-snap-carousel.md | 194 ++ en/react-native-sortable-list.md | 289 +++ en/react-native-sound.md | 364 ++++ en/react-native-spinkit.md | 233 +++ en/react-native-splash-screen.md | 227 +++ en/react-native-spring-scrollview.md | 309 +++ en/react-native-sqlite-storage.md | 631 +++++++ en/react-native-step-indicator.md | 316 ++++ en/react-native-sticky-parallax-header.md | 484 +++++ en/react-native-stickyheader.md | 152 ++ en/react-native-storage.md | 419 +++++ en/react-native-svg-capi.md | 656 +++++++ en/react-native-svg-charts.md | 636 +++++++ en/react-native-svg.md | 338 ++++ en/react-native-swipe-gestures.md | 172 ++ en/react-native-swipe-list-view.md | 319 ++++ en/react-native-swipeable-list.md | 457 +++++ en/react-native-swiper.md | 235 +++ en/react-native-switch-pro.md | 117 ++ en/react-native-switch-selector.md | 129 ++ en/react-native-switch.md | 150 ++ en/react-native-syan-image-picker.md | 354 ++++ en/react-native-system-setting.md | 318 ++++ en/react-native-tab-navigator.md | 169 ++ en/react-native-tab-view.md | 275 +++ en/react-native-tcp-socket.md | 776 ++++++++ en/react-native-testing-library.md | 217 +++ en/react-native-text-gradient.md | 270 +++ en/react-native-text-size.md | 361 ++++ en/react-native-textinput-maxlength-fixed.md | 172 ++ en/react-native-theme-control.md | 266 +++ en/react-native-theme-switch-animation.md | 248 +++ en/react-native-thumbnail.md | 263 +++ en/react-native-touch-id.md | 233 +++ en/react-native-track-player.md | 438 +++++ en/react-native-transitiongroup.md | 181 ++ en/react-native-translucent-modal.md | 117 ++ en/react-native-tts.md | 318 ++++ en/react-native-typing-animation.md | 242 +++ en/react-native-typography.md | 101 + en/react-native-udp.md | 283 +++ en/react-native-ui-lib.md | 1653 +++++++++++++++++ en/react-native-unitsyles.md | 616 ++++++ en/react-native-url-polyfill.md | 199 ++ en/react-native-user-agent.md | 216 +++ en/react-native-vconsole.md | 126 ++ en/react-native-vector-drawable.md | 91 + en/react-native-vector-icons.md | 363 ++++ en/react-native-version-number.md | 172 ++ en/react-native-video-cache.md | 222 +++ en/react-native-video-controls.md | 154 ++ en/react-native-video.md | 691 +++++++ en/react-native-view-overflow.md | 88 + en/react-native-view-pdf.md | 226 +++ en/react-native-view-shot.md | 297 +++ en/react-native-vision-camera.md | 454 +++++ en/react-native-voice-voice.md | 534 ++++++ en/react-native-walkthrough-tooltip.md | 98 + en/react-native-waterfall-flow.md | 213 +++ en/react-native-waterflow-list.md | 174 ++ en/react-native-webview.md | 302 +++ en/react-native-webviewr(nocodegen).md | 358 ++++ en/react-native-worklets-core.md | 273 +++ en/react-native-zip-archive.md | 558 ++++++ en/react-navigation-bottom-sheet.md | 271 +++ en/react-navigation-bottom-tabs.md | 165 ++ en/react-navigation-core.md | 136 ++ en/react-navigation-devtools.md | 84 + en/react-navigation-drawer.md | 201 ++ en/react-navigation-elements.md | 155 ++ en/react-navigation-header-buttons.md | 225 +++ en/react-navigation-material-bottom-tabs.md | 145 ++ en/react-navigation-material-top-tabs.md | 170 ++ en/react-navigation-native-stack.md | 222 +++ en/react-navigation-native.md | 118 ++ en/react-navigation-routers.md | 137 ++ en/react-navigation-shared-element.md | 256 +++ en/react-navigation-stack.md | 184 ++ en/react-navigation.md | 44 + en/react-redux.md | 180 ++ en/react-router-dom.md | 410 ++++ en/react-subscribe.md | 313 ++++ en/react-use.md | 181 ++ en/reanimated-props-backup.md | 173 ++ en/reassure.md | 195 ++ en/recyclerListView.md | 223 +++ en/redux-actions.md | 309 +++ en/redux-logger.md | 89 + en/redux-persist.md | 160 ++ en/redux-thunk.md | 160 ++ en/redux-toolkit.md | 230 +++ en/redux.md | 163 ++ en/remobile-react-native-toast.md | 227 +++ en/rn-emoji-keyboard.md | 278 +++ en/rn-placeholder.md | 133 ++ en/rn-sliding-up-panel.md | 228 +++ en/rn-tourguide.md | 307 +++ en/sentry-react-native.md | 268 +++ en/shopify-flash-list.md | 265 +++ en/styled-components.md | 121 ++ en/styled-system.md | 186 ++ en/usage-docs-checklist.md | 33 + en/victory-native-xl.md | 227 +++ 406 files changed, 113151 insertions(+) create mode 100644 en/EventBus.md create mode 100644 en/Immer.md create mode 100644 en/NativeBase.md create mode 100644 en/Parse-SDK-JS.md create mode 100644 en/Shopify-restyle.md create mode 100644 en/ant-design-react-native.md create mode 100644 en/axios.md create mode 100644 en/bam-tech-react-native-image-resizer.md create mode 100644 en/baronha-ting.md create mode 100644 en/callstack-react-theme-provider.md create mode 100644 en/capi-architecture.md create mode 100644 en/codegen.md create mode 100644 en/contribute.md create mode 100644 en/crypto-js.md create mode 100644 en/dayJs.md create mode 100644 en/deepmerge.md create mode 100644 en/flipper-plugin-react-navigation.md create mode 100644 en/freakycoder-react-native-bounceable.md create mode 100644 en/galio-framework.md create mode 100644 en/gorhom-bottom-sheet.md create mode 100644 en/htmlparser2.md create mode 100644 en/i18next.md create mode 100644 en/js-beautify.md create mode 100644 en/jsbarcode.md create mode 100644 en/klarna-platform-colors.md create mode 100644 en/link-source-code.md create mode 100644 en/lodash.md create mode 100644 en/lottie-react-native.md create mode 100644 en/mobx-react.md create mode 100644 en/mobx.md create mode 100644 en/moment.md create mode 100644 en/nativewind.md create mode 100644 en/openspacelabs-react-native-zoomable-view.md create mode 100644 en/parse5.md create mode 100644 en/patch.md create mode 100644 en/prop-types.md create mode 100644 en/qrcode-generator.md create mode 100644 en/react-ahooks.md create mode 100644 en/react-content-loader.md create mode 100644 en/react-countdown-circle-timer.md create mode 100644 en/react-i18next.md create mode 100644 en/react-lifecycles-compat.md create mode 100644 en/react-native-MJRefresh.md create mode 100644 en/react-native-QRCode.md create mode 100644 en/react-native-SmartRefreshLayout.md create mode 100644 en/react-native-action-button.md create mode 100644 en/react-native-action-sheet.md create mode 100644 en/react-native-alipay.md create mode 100644 en/react-native-amap-geolocation.md create mode 100644 en/react-native-amap3d.md create mode 100644 en/react-native-animatable.md create mode 100644 en/react-native-animate-number.md create mode 100644 en/react-native-apple-authentication.md create mode 100644 en/react-native-aria.md create mode 100644 en/react-native-async-storage-async-storage.md create mode 100644 en/react-native-audio-recorder-player.md create mode 100644 en/react-native-audio-toolkit.md create mode 100644 en/react-native-audio.md create mode 100644 en/react-native-autoLink.md create mode 100644 en/react-native-autocomplete-dropdown.md create mode 100644 en/react-native-autocomplete-input.md create mode 100644 en/react-native-autoheight-webview.md create mode 100644 en/react-native-awesome-gallery.md create mode 100644 en/react-native-background-fetch.md create mode 100644 en/react-native-background-timer.md create mode 100644 en/react-native-baidu-map.md create mode 100644 en/react-native-barcode-builder.md create mode 100644 en/react-native-bars.md create mode 100644 en/react-native-base64.md create mode 100644 en/react-native-better-banner.md create mode 100644 en/react-native-bindingx.md create mode 100644 en/react-native-ble-manager.md create mode 100644 en/react-native-ble-plx.md create mode 100644 en/react-native-blob-util.md create mode 100644 "en/react-native-blob-util\357\274\210nocodegen\357\274\211.md" create mode 100644 en/react-native-blurhash.md create mode 100644 en/react-native-bootsplash.md create mode 100644 en/react-native-bouncy-checkbox.md create mode 100644 en/react-native-button.md create mode 100644 en/react-native-calendar-events.md create mode 100644 en/react-native-calendars.md create mode 100644 en/react-native-callkeep.md create mode 100644 en/react-native-camera-kit.md create mode 100644 en/react-native-cameraroll.md create mode 100644 en/react-native-canvas.md create mode 100644 en/react-native-cardview.md create mode 100644 en/react-native-chart-kit.md create mode 100644 en/react-native-charts-wrapper.md create mode 100644 en/react-native-check-box.md create mode 100644 en/react-native-clipboard-clipboard.md create mode 100644 en/react-native-clippath-capi.md create mode 100644 en/react-native-clippathview.md create mode 100644 en/react-native-code-push.md create mode 100644 en/react-native-collapsible.md create mode 100644 en/react-native-color-matrix-image-filters.md create mode 100644 en/react-native-communications.md create mode 100644 en/react-native-community-blur.md create mode 100644 en/react-native-community-checkbox.md create mode 100644 en/react-native-community-datetimepicker.md create mode 100644 en/react-native-community-geolocation.md create mode 100644 en/react-native-community-hooks.md create mode 100644 en/react-native-community-netinfo.md create mode 100644 en/react-native-community-progress-bar-android.md create mode 100644 en/react-native-community-progress-view.md create mode 100644 en/react-native-community-push-notification-ios.md create mode 100644 en/react-native-community-segmented-control.md create mode 100644 en/react-native-community-slider.md create mode 100644 en/react-native-community-toolbar-android.md create mode 100644 en/react-native-compass-heading.md create mode 100644 en/react-native-confetti-cannon.md create mode 100644 en/react-native-config.md create mode 100644 en/react-native-confirmation-code-field.md create mode 100644 en/react-native-contacts.md create mode 100644 en/react-native-context-menu-view.md create mode 100644 en/react-native-cookies-cookies.md create mode 100644 en/react-native-copilot.md create mode 100644 en/react-native-country-picker-modal.md create mode 100644 en/react-native-create-thumbnail.md create mode 100644 en/react-native-credit-card-input.md create mode 100644 en/react-native-crypto-js.md create mode 100644 en/react-native-crypto.md create mode 100644 en/react-native-custom-keyboard.md create mode 100644 en/react-native-date-picker.md create mode 100644 en/react-native-deck-swiper.md create mode 100644 en/react-native-default-preference.md create mode 100644 en/react-native-device-info.md create mode 100644 en/react-native-dismiss-keyboard.md create mode 100644 en/react-native-doc-viewer.md create mode 100644 en/react-native-document-picker.md create mode 100644 en/react-native-dotenv.md create mode 100644 en/react-native-drag-sort.md create mode 100644 en/react-native-drawer-layout-polyfill.md create mode 100644 en/react-native-drop-shadow.md create mode 100644 en/react-native-dropdown-picker.md create mode 100644 en/react-native-dropdownalert.md create mode 100644 en/react-native-dynamic.md create mode 100644 en/react-native-easy-grid.md create mode 100644 en/react-native-easy-toast.md create mode 100644 en/react-native-echarts-pro.md create mode 100644 en/react-native-element-dropdown.md create mode 100644 en/react-native-elements.md create mode 100644 en/react-native-email-link.md create mode 100644 en/react-native-error-boundary.md create mode 100644 en/react-native-exception-handler.md create mode 100644 en/react-native-exit-app.md create mode 100644 en/react-native-ezswiper.md create mode 100644 en/react-native-fast-image.md create mode 100644 en/react-native-feather.md create mode 100644 en/react-native-file-access.md create mode 100644 en/react-native-file-selector.md create mode 100644 en/react-native-file-viewer.md create mode 100644 en/react-native-fileupload.md create mode 100644 en/react-native-fingerprint-scanner.md create mode 100644 en/react-native-fit-Image.md create mode 100644 en/react-native-flash-message.md create mode 100644 en/react-native-flexi-radio-button.md create mode 100644 en/react-native-flip-card.md create mode 100644 en/react-native-fs.md create mode 100644 en/react-native-gesture-handler.md create mode 100644 en/react-native-get-random-values.md create mode 100644 en/react-native-gifted-charts.md create mode 100644 en/react-native-gifted-chat.md create mode 100644 en/react-native-graph.md create mode 100644 en/react-native-haptic-feedback.md create mode 100644 en/react-native-harmony-sample-package.md create mode 100644 en/react-native-hole-view.md create mode 100644 en/react-native-htmlview.md create mode 100644 en/react-native-http-bridge.md create mode 100644 en/react-native-hyperlink.md create mode 100644 en/react-native-iconfont-cli.md create mode 100644 en/react-native-idfa-aaid.md create mode 100644 en/react-native-idle-timer.md create mode 100644 en/react-native-image-capinsets-next.md create mode 100644 en/react-native-image-colors.md create mode 100644 en/react-native-image-crop-picker(nocodegen).md create mode 100644 en/react-native-image-crop-picker.md create mode 100644 en/react-native-image-editor.md create mode 100644 en/react-native-image-gallery.md create mode 100644 en/react-native-image-header-scroll-view.md create mode 100644 en/react-native-image-marker.md create mode 100644 en/react-native-image-pan-zoom.md create mode 100644 en/react-native-image-picker.md create mode 100644 en/react-native-image-rotate.md create mode 100644 en/react-native-image-sequence-2.md create mode 100644 en/react-native-image-viewing.md create mode 100644 en/react-native-image-zoom-viewer.md create mode 100644 en/react-native-inappbrowser.md create mode 100644 en/react-native-incall-manager.md create mode 100644 en/react-native-indicators.md create mode 100644 en/react-native-input-scroll-view.md create mode 100644 en/react-native-intersection-observer.md create mode 100644 en/react-native-iphone-screen-helper.md create mode 100644 en/react-native-json-tree.md create mode 100644 en/react-native-keep-awake.md create mode 100644 en/react-native-keyboard-accessory.md create mode 100644 en/react-native-keyboard-aware-scroll-view.md create mode 100644 en/react-native-keyboard-controller.md create mode 100644 en/react-native-keys.md create mode 100644 en/react-native-largelist.md create mode 100644 en/react-native-lightbox.md create mode 100644 en/react-native-linear-gradient-text.md create mode 100644 en/react-native-linear-gradient.md create mode 100644 en/react-native-loading-spinner-overlay.md create mode 100644 en/react-native-localization-settings.md create mode 100644 en/react-native-localization.md create mode 100644 en/react-native-localize.md create mode 100644 en/react-native-mail.md create mode 100644 en/react-native-map-linking.md create mode 100644 en/react-native-maps-directions.md create mode 100644 en/react-native-maps.md create mode 100644 en/react-native-markdown-display.md create mode 100644 en/react-native-markdown-renderer.md create mode 100644 en/react-native-marquee-ab.md create mode 100644 en/react-native-marquee.md create mode 100644 en/react-native-mask-text.md create mode 100644 en/react-native-masked-text.md create mode 100644 en/react-native-masked-view-masked-view.md create mode 100644 en/react-native-material-buttons.md create mode 100644 en/react-native-material-design-style.md create mode 100644 en/react-native-material-dropdown.md create mode 100644 en/react-native-material-menu.md create mode 100644 en/react-native-material-ripple.md create mode 100644 en/react-native-material-textfield.md create mode 100644 en/react-native-material-ui.md create mode 100644 en/react-native-md5.md create mode 100644 en/react-native-mlkit-ocr.md create mode 100644 en/react-native-mmkv-storage.md create mode 100644 en/react-native-modal-popover.md create mode 100644 en/react-native-modal.md create mode 100644 en/react-native-modalbox.md create mode 100644 en/react-native-modals.md create mode 100644 en/react-native-mqtt.md create mode 100644 en/react-native-multi-slider.md create mode 100644 en/react-native-multiple-select.md create mode 100644 en/react-native-neomorph-shadows.md create mode 100644 en/react-native-nested-scroll-view.md create mode 100644 en/react-native-network-info.md create mode 100644 en/react-native-nfc-manager.md create mode 100644 en/react-native-notifier.md create mode 100644 en/react-native-offline.md create mode 100644 en/react-native-ohos-community-auto-fill.md create mode 100644 en/react-native-orientation-locker.md create mode 100644 en/react-native-orientation.md create mode 100644 en/react-native-pager-view.md create mode 100644 en/react-native-paper.md create mode 100644 en/react-native-parsed-text.md create mode 100644 en/react-native-pdf.md create mode 100644 en/react-native-performance.md create mode 100644 en/react-native-permissions.md create mode 100644 en/react-native-phone-number-input.md create mode 100644 en/react-native-picker-picker(nocodegen).md create mode 100644 en/react-native-picker-picker.md create mode 100644 en/react-native-picker-select.md create mode 100644 en/react-native-picker.md create mode 100644 en/react-native-pickers.md create mode 100644 en/react-native-popover-view.md create mode 100644 en/react-native-popup-menu.md create mode 100644 en/react-native-print.md create mode 100644 en/react-native-progress.md create mode 100644 en/react-native-pull.md create mode 100644 en/react-native-qr-decode-image-camera.md create mode 100644 en/react-native-qrcode-svg.md create mode 100644 en/react-native-quick-base64.md create mode 100644 en/react-native-randombytes.md create mode 100644 en/react-native-ratings.md create mode 100644 en/react-native-reanimated-bottom-sheet.md create mode 100644 en/react-native-reanimated-carousel.md create mode 100644 en/react-native-reanimated-table.md create mode 100644 en/react-native-reanimated.md create mode 100644 en/react-native-recaptcha-that-works.md create mode 100644 en/react-native-reconnecting-websocket.md create mode 100644 en/react-native-redash.md create mode 100644 en/react-native-render-html.md create mode 100644 en/react-native-responsive-fontsize.md create mode 100644 en/react-native-restart.md create mode 100644 en/react-native-root-modal.md create mode 100644 en/react-native-root-siblings.md create mode 100644 en/react-native-root-toast.md create mode 100644 en/react-native-safe-area-context.md create mode 100644 en/react-native-safe-module.md create mode 100644 en/react-native-safe-modules.md create mode 100644 en/react-native-screens.md create mode 100644 en/react-native-screenshot-prevent.md create mode 100644 en/react-native-scroll-bottom-sheet.md create mode 100644 en/react-native-scrollable-tab-view.md create mode 100644 en/react-native-scrollable-tabview.md create mode 100644 en/react-native-secharts.md create mode 100644 en/react-native-section-list-get-item-layout.md create mode 100644 en/react-native-securerandom.md create mode 100644 en/react-native-send-intent.md create mode 100644 en/react-native-sensitive-info.md create mode 100644 en/react-native-sensors.md create mode 100644 en/react-native-shadow-2.md create mode 100644 en/react-native-shake.md create mode 100644 en/react-native-share.md create mode 100644 en/react-native-shimmer-placeholder.md create mode 100644 en/react-native-signature-canvas.md create mode 100644 en/react-native-signature-capture.md create mode 100644 en/react-native-simple-toast.md create mode 100644 en/react-native-size-matters.md create mode 100644 en/react-native-skia.md create mode 100644 en/react-native-slider.md create mode 100644 en/react-native-snackbar.md create mode 100644 en/react-native-snap-carousel.md create mode 100644 en/react-native-sortable-list.md create mode 100644 en/react-native-sound.md create mode 100644 en/react-native-spinkit.md create mode 100644 en/react-native-splash-screen.md create mode 100644 en/react-native-spring-scrollview.md create mode 100644 en/react-native-sqlite-storage.md create mode 100644 en/react-native-step-indicator.md create mode 100644 en/react-native-sticky-parallax-header.md create mode 100644 en/react-native-stickyheader.md create mode 100644 en/react-native-storage.md create mode 100644 en/react-native-svg-capi.md create mode 100644 en/react-native-svg-charts.md create mode 100644 en/react-native-svg.md create mode 100644 en/react-native-swipe-gestures.md create mode 100644 en/react-native-swipe-list-view.md create mode 100644 en/react-native-swipeable-list.md create mode 100644 en/react-native-swiper.md create mode 100644 en/react-native-switch-pro.md create mode 100644 en/react-native-switch-selector.md create mode 100644 en/react-native-switch.md create mode 100644 en/react-native-syan-image-picker.md create mode 100644 en/react-native-system-setting.md create mode 100644 en/react-native-tab-navigator.md create mode 100644 en/react-native-tab-view.md create mode 100644 en/react-native-tcp-socket.md create mode 100644 en/react-native-testing-library.md create mode 100644 en/react-native-text-gradient.md create mode 100644 en/react-native-text-size.md create mode 100644 en/react-native-textinput-maxlength-fixed.md create mode 100644 en/react-native-theme-control.md create mode 100644 en/react-native-theme-switch-animation.md create mode 100644 en/react-native-thumbnail.md create mode 100644 en/react-native-touch-id.md create mode 100644 en/react-native-track-player.md create mode 100644 en/react-native-transitiongroup.md create mode 100644 en/react-native-translucent-modal.md create mode 100644 en/react-native-tts.md create mode 100644 en/react-native-typing-animation.md create mode 100644 en/react-native-typography.md create mode 100644 en/react-native-udp.md create mode 100644 en/react-native-ui-lib.md create mode 100644 en/react-native-unitsyles.md create mode 100644 en/react-native-url-polyfill.md create mode 100644 en/react-native-user-agent.md create mode 100644 en/react-native-vconsole.md create mode 100644 en/react-native-vector-drawable.md create mode 100644 en/react-native-vector-icons.md create mode 100644 en/react-native-version-number.md create mode 100644 en/react-native-video-cache.md create mode 100644 en/react-native-video-controls.md create mode 100644 en/react-native-video.md create mode 100644 en/react-native-view-overflow.md create mode 100644 en/react-native-view-pdf.md create mode 100644 en/react-native-view-shot.md create mode 100644 en/react-native-vision-camera.md create mode 100644 en/react-native-voice-voice.md create mode 100644 en/react-native-walkthrough-tooltip.md create mode 100644 en/react-native-waterfall-flow.md create mode 100644 en/react-native-waterflow-list.md create mode 100644 en/react-native-webview.md create mode 100644 en/react-native-webviewr(nocodegen).md create mode 100644 en/react-native-worklets-core.md create mode 100644 en/react-native-zip-archive.md create mode 100644 en/react-navigation-bottom-sheet.md create mode 100644 en/react-navigation-bottom-tabs.md create mode 100644 en/react-navigation-core.md create mode 100644 en/react-navigation-devtools.md create mode 100644 en/react-navigation-drawer.md create mode 100644 en/react-navigation-elements.md create mode 100644 en/react-navigation-header-buttons.md create mode 100644 en/react-navigation-material-bottom-tabs.md create mode 100644 en/react-navigation-material-top-tabs.md create mode 100644 en/react-navigation-native-stack.md create mode 100644 en/react-navigation-native.md create mode 100644 en/react-navigation-routers.md create mode 100644 en/react-navigation-shared-element.md create mode 100644 en/react-navigation-stack.md create mode 100644 en/react-navigation.md create mode 100644 en/react-redux.md create mode 100644 en/react-router-dom.md create mode 100644 en/react-subscribe.md create mode 100644 en/react-use.md create mode 100644 en/reanimated-props-backup.md create mode 100644 en/reassure.md create mode 100644 en/recyclerListView.md create mode 100644 en/redux-actions.md create mode 100644 en/redux-logger.md create mode 100644 en/redux-persist.md create mode 100644 en/redux-thunk.md create mode 100644 en/redux-toolkit.md create mode 100644 en/redux.md create mode 100644 en/remobile-react-native-toast.md create mode 100644 en/rn-emoji-keyboard.md create mode 100644 en/rn-placeholder.md create mode 100644 en/rn-sliding-up-panel.md create mode 100644 en/rn-tourguide.md create mode 100644 en/sentry-react-native.md create mode 100644 en/shopify-flash-list.md create mode 100644 en/styled-components.md create mode 100644 en/styled-system.md create mode 100644 en/usage-docs-checklist.md create mode 100644 en/victory-native-xl.md diff --git a/en/EventBus.md b/en/EventBus.md new file mode 100644 index 00000000..da1ad330 --- /dev/null +++ b/en/EventBus.md @@ -0,0 +1,328 @@ + +模板版本：v0.2.0 + +

+

EventBus

+

+

+ + License + +

+ +> [!TIP] [Github 地址](https://github.com/krasimir/EventBus) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm i eventbusjs@0.2.0 +``` + +#### **yarn** + +```bash +yarn add eventbusjs@0.2.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +```tsx +import { useState, createContext } from "react"; +import { + View, + Button, + StyleSheet, + ScrollView, + Text, + TextInput, +} from "react-native"; +import EventBus from "eventbusjs"; +import EventBus3 from "eventbusjs"; +const TAG = "EventBus"; +const MyContext = createContext("null"); + +const styles = StyleSheet.create({ + main: { + height: "100%", + }, + mainItem: { + marginTop: 20, + }, + container: { + paddingTop: 10, + paddingBottom: 10, + paddingLeft: 20, + paddingRight: 20, + }, + box: { + marginTop: 10, + marginBottom: 10, + marginLeft: 20, + marginRight: 20, + height: 100, + borderWidth: 1, + borderColor: "#000", + overflow: "scroll", + }, + title: { + fontSize: 14, + fontWeight: "bold", + }, + inputWrap: { + disPlay: "flex", + }, + inputText: { + width: "100%", + height: 40, + borderWidth: 1, + borderColor: "gray", + marginBottom: 10, + }, +}); + +function eventTest() { + console.warn(`${TAG}-----,成功派发test_event类型的eventTest事件`); +} + +var TestParamsClass1 = function (this: any) { + this.className = "TestParamsClass1"; + this.doSomeThing = function ( + event: Event, + param1: number | string, + param2: number | string, + ) { + console.warn( + `${TAG},className=${this.className},event=${JSON.stringify(event)},params=${param1}--${param2}`, + ); + }; +}; +var TestParamsClass2 = function (this: any) { + this.className = "TestParamsClass2"; + this.ready = function (param1: number | string, param2: number | string) { + EventBus3.dispatch("custom_event", this, param1, param2); + }; +}; +var p1 = new (TestParamsClass1 as any)(); +var p2 = new (TestParamsClass2 as any)(); + +function EventBusDemo() { + const [msg, setMsg] = useState(""); + const [msgParams, setMsgParams] = useState(""); + const [firstVal, setFirstVal] = useState(""); + const [secondVal, setSecondVal] = useState(""); + const [onOff, setOnOff] = useState(true); + function handleAdd() { + const has = EventBus.hasEventListener("test_event", eventTest, 0); + if (has) { + setMsg("eventBus中已经存在test_evnt类型的eventTest事件"); + console.log(`${TAG},eventBus中已经存在test_evnt类型的eventTest事件`); + } else { + EventBus.addEventListener("test_event", eventTest, 0); + setMsg("成功添加test_event类型的eventTest事件"); + console.log(`${TAG},成功添加test_event类型的eventTest事件`); + } + } + + function handleHas() { + let has = EventBus.hasEventListener("test_event", eventTest, 0); + setMsg( + has + ? "已存在test_event类型的eventTest事件" + : "不存在test_event类型的eventTest事件", + ); + console.log( + `${TAG},${has ? "已存在test_event类型的eventTest事件" : "不存在test_event类型的eventTest事件"}`, + ); + } + + function handleRemove() { + let has = EventBus.hasEventListener("test_event", eventTest, 0); + if (has) { + EventBus.removeEventListener("test_event", eventTest, 0); + setMsg("已删除test_event类型的eventTest事件"); + console.log(`${TAG},已删除test_event类型的eventTest事件`); + } else { + setMsg("未找到test_event类型的eventTest事件"); + console.log(`${TAG},未找到test_event类型的eventTest事件`); + } + } + + function handleDispatch() { + let has = EventBus.hasEventListener("test_event", eventTest, 0); + if (has) { + EventBus.dispatch("test_event"); + setMsg("成功执行test_event类型的eventTest事件"); + console.log(`${TAG},成功执行test_event类型的eventTest事件`); + } else { + setMsg("test_event类型的eventTest事件已被删除或未找到事件"); + console.log(`${TAG},test_event类型的eventTest事件已被删除或未找到事件`); + } + } + + function handleGet() { + setMsg(`${JSON.stringify(EventBus.getEvents())}`); + console.log(`${TAG},${JSON.stringify(EventBus.getEvents())}`); + } + + function handleAddForParams() { + let has = EventBus3.hasEventListener("custom_event", p1.doSomeThing, p1); + if (has) { + setMsgParams("eventBus中已存在custom_event类型的p1.doSomeThing事件"); + console.log( + `${TAG},eventBus中已存在custom_event类型的p1.doSomeThing事件`, + ); + } else { + if (firstVal.length <= 1 || secondVal.length <= 1) { + console.error("参数长度不符合预期"); + } else { + EventBus3.addEventListener("custom_event", p1.doSomeThing, p1); + setMsgParams("成功添加custom_event类型的p1.doSomeThing事件"); + console.log(`${TAG},'成功添加custom_event类型的p1.doSomeThing事件'`); + setOnOff(true); + } + } + } + function handleDispatchForParams() { + if (onOff) { + let has = EventBus3.hasEventListener("custom_event", p1.doSomeThing, p1); + if (has) { + p2.ready(firstVal, secondVal); + setMsgParams(`派发事件成功，param1=${firstVal},param2=${secondVal}`); + console.log( + `${TAG},派发事件成功，param1=${firstVal},param2=${secondVal}`, + ); + setOnOff(false); + } else { + setMsgParams( + "custom_event类型的p1.doSomeThing事件已被删除或未找到事件", + ); + console.log( + `${TAG},custom_event类型的p1.doSomeThing事件已被删除或未找到事件`, + ); + } + } else { + setMsgParams("请先移除旧的p1.doSomeThing事件"); + console.log(`${TAG},请先移除旧的p1.doSomeThing事件`); + } + } + function handleRemoveForParams() { + setOnOff(true); + let has = EventBus3.hasEventListener("custom_event", p1.doSomeThing, p1); + if (has) { + EventBus3.removeEventListener("custom_event", p1.doSomeThing, p1); + setMsgParams("成功删除custom_event类型的p1.doSomeThing事件"); + console.log(`${TAG},成功删除custom_event类型的p1.doSomeThing事件`); + } else { + setMsgParams("未找到custom_event类型的p1.doSomeThing事件"); + console.log(`${TAG},未找到custom_event类型的p1.doSomeThing事件`); + } + } + return ( + + + + 基础使用 & Keeping the scope + + + + + + + + + + + + + + + + + {msg} + + + + + Passing additional parameters + + + setFirstVal(text)} + style={styles.inputText} + placeholder="请输入长度大于1的参数" + maxLength={12} + /> + setSecondVal(text)} + style={styles.inputText} + placeholder="请输入长度大于1的参数" + maxLength={12} + /> + + + + + + + + + + + {msgParams} + + + + + ); +} +export default EventBusDemo; +``` + +## 兼容性 + +在以下版本验证通过 + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：205.0.0.18; + +## 方法 + +详情见 [EventBus](https://github.com/krasimir/EventBus/blob/master/README.md) + +| Name | Description | Required | HarmonyOS Support | +| ------------------- | ----------- | -------- | ----------------- | +| addEventListener | - | - | YES | +| removeEventListener | - | - | YES | +| hasEventListener | - | - | YES | +| dispatch | - | - | YES | +| getEvents | - | - | YES | + +## 遗留问题 + +## 其他 + + \ No newline at end of file diff --git a/en/Immer.md b/en/Immer.md new file mode 100644 index 00000000..11ef4155 --- /dev/null +++ b/en/Immer.md @@ -0,0 +1,820 @@ + +模板版本：v0.2.1 + +

+

immer

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/immerjs/immer) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + + +#### **npm** + +```bash +npm i immer@10.0.4 +``` + +#### **yarn** + +```bash +yarn add immer@10.0.4 +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React, {useState, useEffect, Component} from 'react'; +import { + View, + Text, + Button, + StyleSheet, + ScrollView, + Switch, + TextInput, +} from 'react-native'; +import { + createDraft, + finishDraft, + current, + produce, + original, + isDraft, + enablePatches, + produceWithPatches, + enableMapSet, + freeze, + nothing, + setAutoFreeze, + isDraftable, + immerable, + Immutable, + castImmutable, + castDraft, + applyPatches, + setUseStrictShallowCopy, +} from 'immer'; + +// 初始状态 +const initialState = { + count: 0, + text: 'Hello from Immer!', +}; +enablePatches(); + +// 启用enablePatches插件 +enableMapSet(); +// 启用enableMapSet插件 +setUseStrictShallowCopy(true); + +const MyComponent = () => { + const [myMap, setMyMap] = useState(new Map([['key1', 'value1']])); + const [overStates, setOverStates] = useState(false); + const toggleSwitch = value => { + setOverStates(value); + }; + let [states, setStates] = useState(false); + const [originals, setOriginals] = useState({users: [{name: 'zhansan'}]}); + let [res, setRes] = useState(''); + let [currentText, setCurrent] = useState(''); + const [count, setCount] = useState({age: 0}); + let [baseState, setBaseState] = useState([ + { + title: '标题1', + done: true, + }, + ]); + const [text, setText] = useState('Hello'); + let [result, setResult] = useState({}); + let [patches, setPatches] = useState({}); + let [inversePatches, setInversePatches] = useState({}); + const [data, setData] = useState({name: 'John', age: 30}); + const [produceStatus, setProduceStatus] = useState(false); + const [castDraftState, setCastDraftState] = useState({ + count: 0, + }); + const [state, setState] = useState(initialState); + const [freezeRest, setFreezeRest] = useState({a: 1, b: {c: 2}}); + const [stateRes, setStateRes] = useState({count: 0, text: 'hello-world'}); + const [texts, setTexts] = useState('请输入内容'); + const [stateNothing, setStateNothing] = useState({ + name: 'John', + age: 30, + isStudent: false, + }); + const obj = {a: 1, b: 2}; + const arr = [1, 2, 3]; + const str = 'Hello, immer!'; + const num = 42; + const frozenObj = freeze({c: 3}, true); + const [objStatus, setObjStatus] = useState(false); + const [arrStatus, setArrStatus] = useState(false); + const [strStatus, setStrStatus] = useState(false); + const [numStatus, setNumStatus] = useState(false); + const [draftsStatus, setDratfStatus] = useState(false); + let originalRes = { + name: '初始数据1', + age: 18, + }; + let fork = originalRes; + // 用户在向导中所作的所有更改 + let changes = []; + // 与向导中所做的所有更改相反 + let inverseChanges = []; + let [obj1, setObj1] = useState({}); + let [obj2, setObj2] = useState({}); + const incrementCount = () => { + if (count.age < 3) { + setCount( + produce(count, draft => { + draft.age += 1; + }), + ); + } else { + setCount( + produce(count, draft => { + draft.age = 0; + }), + ); + } + }; + const decrement = () => { + if (count.age > 0) { + setCount( + produce(count, draft => { + draft.age -= 1; + }), + ); + } else { + setCount( + produce(count, draft => { + draft.age = 3; + }), + ); + } + }; + const onAdd = () => { + if (baseState.length < 3) { + return setBaseState( + produce(baseState, draftState => { + draftState.push({title: '新增', done: states}); + setStates((states = isDraft(draftState))); + }), + ); + } + }; + const onDelete = (e: number) => { + return setBaseState( + produce(draft => { + draft.splice(e, 1); + }), + ); + }; + const onChange = (item: object, e: number) => { + const res = produce(baseState, draftState => { + draftState[e].done = !draftState[e].done; + draftState[e].title = '更改后数据'; + setStates((states = isDraft(draftState))); + }); + setBaseState(res); + }; + // 使用createDraft来创建一个草稿副本 + const increment = () => { + const draft = createDraft(state); + if (state.count < 5) { + draft.count += 1; // 修改草稿副本 + } else { + draft.count = 0; + } + const nextState = finishDraft(draft); // 获取修改后的不可变状态 + setState(nextState); // 更新React状态 + }; + const updateMap = () => { + setMyMap( + produce(myMap, draftMap => { + draftMap.set('key1', 'updatedValue1'); // 更新键值对 + draftMap.set('key2', 'value2'); // 添加新的键值对 + draftMap.delete('key3'); // 尝试删除一个不存在的键值对（不会有影响） + }), + ); + }; + const renderMapEntries = () => { + return Array.from(myMap.entries()).map(([key, value]) => ( + + {key}: {value} + + )); + }; + const changeText = () => { + const draft = createDraft(state); + draft.text = 'Text updated!'; // 修改草稿副本 + const nextState = current(draft); // 获取当前修改后的状态（与finishDraft效果相同） + setState(nextState); // 更新React状态 + }; + const clickOriginal = () => { + const a = setOriginals( + produce(originals, draft => { + draft.users[0].name = '4444'; + setCurrent(current(draft).users[0].name); + console.log('Original state:', original(draft)?.users[0].name); // 输出原始状态 + setRes(original(draft).users[0].name); + }), + ); + }; + const handleClick = () => { + const [result, patches, inversePatches] = produceWithPatches( + text, + draft => (draft = 'Hello-World'), + ); + setResult(result); + setPatches(patches); + setInversePatches(inversePatches); + console.log('result:', result); + console.log('Patches:', patches); + console.log('Inverse Patches:', inversePatches); + + setText(result); + }; + // ----------------------------------------------- + class MyImmerableObject extends React.Component { + // 声明immerable属性，告诉immer处理哪些属性 + static [immerable] = true; + // 定义您的对象的属性 + constructor(name, age) { + super(name, age); + this.name = name; + this.age = age; + } + /* // 不使用immerable + // 声明immerable属性，告诉immer处理哪些属性 + static [immerable] = true; + // 定义您的对象的属性 + constructor(name, age) { + super(name, age); + this.name = name; + this.age = age; + } */ + } + const [myState, setMyState] = useState(new MyImmerableObject('Alice', 10)); + const updateValue = () => { + // 使用immerable + const res = produce(myState, draft => { + draft.age = 26; + }); + /* // 不使用immerable + const res = {...myState, age: 26}; */ + setMyState(res); + }; + // 在组件挂载时设置 immer 的自动冻结行为 + useEffect(() => { + // 启用/停用自动冻结 + setAutoFreeze(overStates); + }, [overStates]); // 空依赖数组确保此 effect 只运行一次 + const incrementCountLeft = () => { + const res = freeze(Object.assign({}, freezeRest), true); + res.a = 110; + res.b.c = 220; + console.log('调用freeze-deep:', overStates, res); + setFreezeRest(res); + }; + const tryToModifyFrozenStateLeft = () => { + const res = freeze(Object.assign({}, freezeRest), false); + res.a = 111; + res.b.c = 222; + console.log('调用freeze-deep:', overStates, res); + setFreezeRest(res); + }; + const ClickOffFreeze = () => { + const res1 = Object.assign({}, freezeRest); + res1.a = 10; + res1.b.c = 20; + console.log('未调用freeze:', res); + setFreezeRest(res1); + }; + const ClickOnFreeze = () => { + const res = freeze(Object.assign({}, freezeRest)); + res.a = 11; + res.b.c = 22; + console.log('调用freeze:', res); + setFreezeRest(res); + }; + const inputText = e => { + let nextState = produce(stateRes, draft => {}); + setTexts(e); + nextState.text = e; + setStateRes(nextState); + }; + const clickNothing = e => { + const nextStateNothing = produce(stateNothing, draft => e); + setStateNothing(nextStateNothing); + }; + const isDraftObj = () => { + setObjStatus(isDraftable(obj)); + }; + const isDraftArr = () => { + setArrStatus(isDraftable(arr)); + }; + const isDraftStr = () => { + setStrStatus(isDraftable(str)); + }; + const isDraftNum = () => { + setNumStatus(isDraftable(num)); + }; + const isDrafts = () => { + setDratfStatus(isDraftable(frozenObj)); + }; + // -------------------------------------------- + const [draftRes, setDraftRes] = useState({ + name: 'John', + age: 30, + hobbies: ['reading', 'coding'], + }); + + const [setUseStrictShallowCopyRes, setSetUseStrictShallowCopyRes] = useState({ + name: 'John', + age: 30, + address: { + city: 'New York', + country: 'USA', + }, + }); + const [setUseStrictShallowCopyInit, setSetUseStrictShallowCopyInit] = + useState(); + const updateData = () => { + let newData = {}; + if (!produceStatus) { + newData = produce(data, draft => { + if (draft.age < 40) { + draft.age += 1; + } else { + draft.age = 0; + } + }); + } else { + newData = castImmutable(data, draft => { + draft.age += 1; + }); + } + + setData(newData); + }; + const Clickfn = () => { + setProduceStatus(!produceStatus); + }; + const AddFn = () => { + setCastDraftState( + produce(castDraftState, draftState => { + if (castDraftState.count < 10) { + draftState.count += 1; + } else { + draftState.count = 0; + } + }), + ); + }; + const doubleCount = () => { + setCastDraftState( + produce(castDraftState, draftState => { + if (castDraftState.count < 100) { + draftState.count *= 2; + } else { + draftState.count = 0; + } + }), + ); + }; + const resetCount = () => { + const newState = castDraft({count: 0}); + setCastDraftState(newState); + }; + const ClickChange = () => { + fork = produce( + fork, + draft => { + draft.age = 10; + draft.name = 'lisi'; + }, + // 产生的第三个参数是一个回调，patches 将从这里产生 + (patches, inversePatches) => { + changes.push(...patches); + inverseChanges.push(...inversePatches); + }, + ); + }; + const fn1 = () => { + // 当向导完成（成功）后，我们可以将 fork 中的更改重播到新的状态！ + let originalRes2 = applyPatches(originalRes, changes); + setObj1(originalRes2); + console.log('originalRes2:', originalRes2); + }; + const fn2 = () => { + // state 现在包含来自两个代码路径的更改！ + // 最后，即使在完成向导之后，用户也可能会改变主意并撤消他的更改...... + let originalRes3 = applyPatches(originalRes, inverseChanges); + setObj2(originalRes3); + }; + const handleAddHobby = () => { + //不使用Draft + const newDraftRes = {...draftRes}; + newDraftRes.hobbies[1] = 'swimming'; + setDraftRes(newDraftRes); + // 使用Draft + /* const nextDraftRes = produce(draftRes, draft => { + draft.hobbies[1] = 'swimming'; + }); + setDraftRes(nextDraftRes); */ + }; + interface Person { + name: string; + age: number; + } + // 使用Immutable + const immutableObj1: Immutable = { + name: 'Alice', + age: 20, + }; + // 不使用Immutable + // const immutableObj1 = { + // name: 'Alice', + // age: 20, + // }; + const [immutableData, setImmutableData] = useState(); + const changeObj1 = () => { + const res = immutableObj1; + res.name = 'lisi'; + console.log('immutableObj1:', immutableObj1); + setImmutableData(res); + }; + const useSetUseStrictShallowCopy = () => { + const res = produce(setUseStrictShallowCopyRes, draft => { + draft.age = 55; + draft.address.city = 'China'; + }); + console.log('res:', JSON.stringify(res)); + console.log( + 'setSetUseStrictShallowCopyRes:', + JSON.stringify(setUseStrictShallowCopyRes), + ); + setSetUseStrictShallowCopyInit(res); + }; + + // ----------------分割 end------------- + return ( + + + Immer + {/* 验证---produce---api */} + + 验证-produce-期望值不可变数据可以更改 + + + + + + + + + + + + + ); + + function testMD5() { + let md5 = CryptoJS.MD5('123456'); + setResult('testMD5 result: ' + md5.toString()); + } + + function testHmacMD5() { + let hmacMD5 = CryptoJS.HmacMD5('123456', '123456'); + setResult('testHmacMD5 result: ' + hmacMD5.toString()); + } + + function testAESEncrypt() { + let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Hex.parse('48656c6c6f576f726c6421'), CryptoJS.enc.Hex.parse('000102030405060708090a0b0c0d0e0f'), { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.NoPadding }); + setResult('testAESEncrypt result: ' + encrypted.toString()); + } + + function testAESDecrypt() { + let encrypted = CryptoJS.AES.encrypt(CryptoJS.enc.Hex.parse('48656c6c6f576f726c6421'), CryptoJS.enc.Hex.parse('000102030405060708090a0b0c0d0e0f'), { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.NoPadding }); + let decrypted = CryptoJS.AES.decrypt(encrypted, CryptoJS.enc.Hex.parse('000102030405060708090a0b0c0d0e0f'), { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.NoPadding }); + setResult('testAESDecrypt result: ' + decrypted.toString()); + } + + function testEncHexParse() { + let wordArray = CryptoJS.enc.Hex.parse('48656c6c6f576f726c6421'); + setResult('testEncHexParse result: ' + wordArray.toString()); + } + + function testEncHexStringify() { + let wordArray = CryptoJS.enc.Hex.parse('48656c6c6f576f726c6421'); + let hexStr = CryptoJS.enc.Hex.stringify(wordArray); + setResult('testEncHexStringify result: ' + hexStr); + } + + function testFormatHexParse() { + let hexStr = CryptoJS.format.Hex.parse('48656c6c6f576f726c6421').toString(CryptoJS.format.Hex); + setResult('testFormatHexParse result: ' + hexStr); + } + + function testFormatHexStringify() { + let ciphertext = CryptoJS.enc.Hex.parse('48656c6c6f576f726c6421'); + let cipSalt = { + 'ciphertext': ciphertext + } + let hexStr = CryptoJS.format.Hex.stringify(CryptoJS.lib.CipherParams.create(cipSalt)); + setResult('testFormatHexStringify result: ' + hexStr); + } +} + +export default CryptoJSDemo; +``` + +## 约束与限制 + +#### 兼容性 + +在下述版本验证通过： + +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; +2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; + +## API列表 + +**以下 `C` 均为crypto-js导出的对象，即：** + +```typescript +import C from "crypto-js"; +``` + +#### Base + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ----------------- | -------------------------------- | -------- | -------- | ----------------- | +| C.lib.Base.extend | 创建一个新对象并继承自指定对象。 | function | no | yes | + +**API** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ------ | ------------------------------ | -------- | -------- | ----------------- | +| create | 创建对象的实例。 | function | no | yes | +| mixIn | 向对象中添加属性键值对。 | function | no | yes | +| clone | 创建一个对象的克隆版本的新对象 | function | no | yes | + +#### WordArray + +**属性** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| -------- | ------------------------ | -------- | -------- | ----------------- | +| words | 32位的字节数组。 | number[] | no | yes | +| sigBytes | 此字数组中的有效字节数。 | number | no | yes | + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ---------------------- | ---------------------------------- | -------- | -------- | ------------------------------- | +| C.lib.WordArray.create | 初始化新创建的字节数组。 | function | no | yes | +| C.lib.WordArray.random | 创建一个用随机字节填充的字节数组。 | function | no | no (与android和ios一致均不支持) | + +**API** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| -------- | ---------------------------------- | -------- | -------- | ----------------- | +| toString | 字节数组转换为字符串。 | function | no | yes | +| concat | 将一个字节数组连接到这个字节数组。 | function | no | yes | +| clamp | 移除无效字节。 | function | no | yes | +| clone | 复制数组，并创建新数组。 | function | no | yes | + +#### CipherParams + +**属性** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ---------- | --------------------------------------------------- | ------------ | -------- | ----------------- | +| ciphertext | 原始密文。 | WordArray | no | yes | +| key | 密文的Key。 | WordArray | no | yes | +| iv | 在加密操作中使用的IV。 | WordArray | no | yes | +| salt | 与密钥推导函数一起使用的salt。 | WordArray | no | yes | +| algorithm | 密码算法。 | CipherStatic | no | yes | +| mode | 加密操作中使用的块模式。 | Mode | no | yes | +| padding | 加密操作中使用的填充方案。 | Padding | no | yes | +| blockSize | 密码的块大小。 | number | no | yes | +| formatter | 将此cipher params对象转换为字符串的默认格式化策略。 | Format | no | yes | + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ------------------------- | --------------------------------- | -------- | -------- | ----------------- | +| C.lib.CipherParams.create | 初始化新创建的cipher params对象。 | function | no | yes | + +**API** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| -------- | ----------------------------------- | -------- | -------- | ----------------- | +| toString | 将此cipher params对象转换为字符串。 | function | no | yes | + +#### X64 + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ----------------- | ---------------------- | -------- | -------- | ----------------- | +| C.x64.Word.create | 初始化新创建的64位字。 | function | no | yes | + +#### X64WordArray + +**属性** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| -------- | ----------------------------- | -------- | -------- | ----------------- | +| words | CryptoJS.x64.Word对象的数组。 | number[] | no | yes | +| sigBytes | 此字数组中的有效字节数。 | number | no | yes | + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ---------------------- | ------------------------ | -------- | -------- | ----------------- | +| C.x64.WordArray.create | 初始化新创建的单词数组。 | function | no | yes | + +**API** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ----- | -------------------------------- | -------- | -------- | ----------------- | +| toX32 | 将此64位字数组转换为32位字数组。 | function | no | yes | +| clone | 创建此字节数组的副本。 | function | no | yes | + +#### mode + +**属性** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ---------- | ---------------- | ---- | -------- | ----------------- | +| C.mode.CBC | 密码块链模式。 | / | no | yes | +| C.mode.CFB | 密码反馈块模式。 | / | no | yes | +| C.mode.CTR | 计数器阻塞模式。 | / | no | yes | +| C.mode.OFB | 输出反馈块模式。 | / | no | yes | +| C.mode.ECB | 电子码本块模式。 | / | no | yes | + +#### pad.Pkcs7 + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ----------------- | --------------------------------------------- | -------- | -------- | ----------------- | +| C.pad.Pkcs7.pad | 使用PKCS #5/7中定义的算法填充数据。 | function | no | yes | +| C.pad.Pkcs7.unpad | 取消填充使用PKCS #5/7中定义的算法填充的数据。 | function | no | yes | + +#### pad.AnsiX923 + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| -------------------- | -------------------------------------------- | -------- | -------- | ----------------- | +| C.pad.AnsiX923.pad | 使用AnsiX923中定义的算法填充数据。 | function | no | yes | +| C.pad.AnsiX923.unpad | 取消填充使用AnsiX923中定义的算法填充的数据。 | function | no | yes | + +#### pad.Iso10126 + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| -------------------- | -------------------------------------------- | -------- | -------- | ------------------------------- | +| C.pad.Iso10126.pad | 使用Iso10126中定义的算法填充数据。 | function | no | no (与android和ios一致均不支持) | +| C.pad.Iso10126.unpad | 取消填充使用Iso10126中定义的算法填充的数据。 | function | no | yes | + +#### pad.ZeroPadding + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ----------------------- | ----------------------------------------------- | -------- | -------- | ----------------- | +| C.pad.ZeroPadding.pad | 使用ZeroPadding中定义的算法填充数据。 | function | no | yes | +| C.pad.ZeroPadding.unpad | 取消填充使用ZeroPadding中定义的算法填充的数据。 | function | no | yes | + +#### pad.NoPadding + +**属性** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| --------------- | ---------------- | ---- | -------- | ----------------- | +| C.pad.NoPadding | 不使用填充规则。 | / | no | yes | + +#### algo + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| ----------------------- | ----------------------------------- | -------- | -------- | ----------------- | +| C.algo.MD5.create | 初始化MD5加密新创建的工具类。 | function | no | yes | +| C.MD5 | MD5加密。 | function | no | yes | +| C.algo.SHA1.create | 初始化SHA1加密新创建的工具类。 | function | no | yes | +| C.SHA1 | SHA1加密。 | function | no | yes | +| C.algo.SHA256.create | 初始化SHA256加密新创建的工具类。 | function | no | yes | +| C.SHA256 | SHA256加密 | function | no | yes | +| C.algo.SHA224.create | 初始化SHA224加密新创建的工具类。 | function | no | yes | +| C.SHA224 | SHA224加密。 | function | no | yes | +| C.algo.SHA512.create | 初始化SHA512加密新创建的工具类。 | function | no | yes | +| C.SHA512 | SHA512加密。 | function | no | yes | +| C.algo.SHA3.create | 初始化SHA3加密新创建的工具类。 | function | no | yes | +| C.SHA3 | SHA3加密。 | function | no | yes | +| C.algo.SHA384.create | 初始化SHA384加密新创建的工具类。 | function | no | yes | +| C.SHA384 | SHA384加密。 | function | no | yes | +| C.algo.RIPEMD160.create | 初始化RIPEMD160加密新创建的工具类。 | function | no | yes | +| C.RIPEMD160 | RIPEMD160加密。 | function | no | yes | + +#### Hasher + +**属性** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| --------- | ------------------------------------------------------ | ------ | -------- | ----------------- | +| blockSize | 哈希运算的32位字节块大小。缺省值：16(32\*16=512bits)。 | number | no | yes | + +**API** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| -------- | ---------------------- | -------- | -------- | ----------------- | +| reset | 重置hasher为初始状态。 | function | no | yes | +| update | 更新hasher的信息。 | function | no | yes | +| finalize | 结束hasher操作。 | function | no | yes | + +#### HMAC + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :----------------- | -------------------- | -------- | -------- | ----------------- | +| C.HmacMD5 | HmacMD5加密。 | function | no | yes | +| C.HmacSHA1 | HmacSHA1加密。 | function | no | yes | +| C.HmacSHA256 | HmacSHA256加密。 | function | no | yes | +| C.HmacSHA224 | HmacSHA224加密。 | function | no | yes | +| C.HmacSHA512 | HmacSHA512加密。 | function | no | yes | +| C.HmacSHA384 | HmacSHA384加密。 | function | no | yes | +| C.HmacSHA3 | HmacSHA3加密。 | function | no | yes | +| C.HmacRIPEMD160 | HmacRIPEMD160加密。 | function | no | yes | +| C.algo.HMAC.create | 初始化新创建的HMAC。 | function | no | yes | + +**API** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------- | -------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| reset | 将此HMAC重置为其初始状态。 | function | no | yes | +| update | 使用消息更新此HMAC。 | function | no | yes | +| finalize | 最终完成HMAC计算。 请注意，finally操作实际上是一个破坏性的、读一次的操作。 | function | no | yes | + +#### AES + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| :------------------------- | --------------------------- | -------- | -------- | ----------------- | ------------------------------------------------------------------------------ | +| C.AES.encrypt | AES算法加密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.AES.decrypt | AES算法解密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.algo.AES.createEncryptor | 在AES加密模式下创建此密码。 | function | no | yes | | + +#### DES + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| :------------------------- | --------------------------- | -------- | -------- | ----------------- | ------------------------------------------------------------------------------ | +| C.DES.encrypt | DES算法加密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.DES.decrypt | DES算法解密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.algo.DES.createEncryptor | 在DES加密模式下创建此密码。 | function | no | yes | | + +#### TripleDES + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| :------------------------------- | --------------------------------- | -------- | -------- | ----------------- | ------------------------------------------------------------------------------ | +| C.TripleDES.encrypt | TripleDES算法加密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.TripleDES.decrypt | TripleDES算法解密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.algo.TripleDES.createEncryptor | 在TripleDES加密模式下创建此密码。 | function | no | yes | | + +#### RC4 + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| :------------------------- | --------------------------- | -------- | -------- | ----------------- | ------------------------------------------------------------------------------ | +| C.RC4.encrypt | RC4算法加密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.RC4.decrypt | RC4算法解密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.algo.RC4.createEncryptor | 在RC4加密模式下创建此密码。 | function | no | yes | | + +#### RC4Drop + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| :---------------------------- | ------------------------------- | -------- | -------- | ----------------- | ------------------------------------------------------------------------------ | +| C.RC4Drop.encrypt | RC4Drop算法加密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.RC4Drop.decrypt | RC4Drop算法解密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.algo.RC4Drop.createEncrypto | 在RC4Drop加密模式下创建此密码。 | function | no | yes | | + +#### Rabbit + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| :---------------------------- | ------------------------------ | -------- | -------- | ----------------- | ------------------------------------------------------------------------------ | +| C.Rabbit.encrypt | Rabbit算法加密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.Rabbit.decrypt | Rabbit算法解密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.algo.Rabbit.createEncryptor | 在Rabbit加密模式下创建此密码。 | function | no | yes | | + +#### RabbitLegacy + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| :---------------------------------- | ------------------------------------ | -------- | -------- | ----------------- | ------------------------------------------------------------------------------ | +| C.RabbitLegacy.encrypt | RabbitLegacy算法加密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.RabbitLegacy.decrypt | RabbitLegacy算法解密。 | function | no | partially | 密码必须使用WordArray格式参数，不支持设置为string类型(与android/ios效果一致)。 | +| C.algo.RabbitLegacy.createEncryptor | 在RabbitLegacy加密模式下创建此密码。 | function | no | yes | | + +#### Cipher + +**属性** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------ | ------------------------------------ | ------ | -------- | ----------------- | +| keySize | 此密码的密钥大小。缺省值：4（128位） | number | no | yes | +| ivSize | 此密码的Iv大小。缺省值：4（128位） | number | no | yes | + +**API** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------- | ------------------------------------------------------------------------------ | -------- | -------- | ----------------- | +| reset | 将此密码重置为其初始状态。 | function | no | yes | +| process | 添加需要加解密的数据。 | function | no | yes | +| finalize | 完成加密或解密过程。 请注意，finally操作实际上是一个破坏性的、一次读取的操作。 | function | no | yes | + +#### Blowfish + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :----------------- | -------------- | -------- | -------- | ----------------- | +| C.Blowfish.encrypt | Blowfish加密。 | function | no | yes | +| C.Blowfish.decrypt | Blowfish解密。 | function | no | yes | + +#### SerializableCipher + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------------------------------- | -------------------- | -------- | -------- | ----------------- | +| C.lib.SerializableCipher.encrypt | 对信息进行加密。 | function | no | yes | +| C.lib.SerializableCipher.decrypt | 对加密信息进行解密。 | function | no | yes | + +#### PasswordBasedCipher + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| :-------------------------------- | -------------------- | -------- | -------- | ----------------- | ----------------------------------------------------------------------- | +| C.lib.PasswordBasedCipher.encrypt | 对信息进行加密。 | function | no | partially | 必须传入有效的salt参数，不传入salt参数时不支持(与android/ios效果一致)。 | +| C.lib.PasswordBasedCipher.decrypt | 对加密信息进行解密。 | function | no | partially | 必须传入有效的salt参数，不传入salt参数时不支持(与android/ios效果一致)。 | + +#### kdf.OpenSSL + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| :-------------------- | -------------------- | -------- | -------- | ----------------- | ----------------------------------------------------------------------- | +| C.kdf.OpenSSL.execute | 从密码派生密钥和IV。 | function | no | partially | 必须传入有效的salt参数，不传入salt参数时不支持(与android/ios效果一致)。 | + +#### kdf.PBKDF2 + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------------------- | ---------------------------------- | -------- | -------- | ----------------- | +| C.algo.PBKDF2.create | 初始化PBKDF2新创建的密钥推导函数。 | function | no | yes | +| C.PBKDF2 | PBKDF2派生密钥。 | function | no | yes | + +**API** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------ | ---------------------------------- | -------- | -------- | ----------------- | +| compute | 计算基于PBKDF2密码的密钥派生函数。 | function | no | yes | + +#### EvpKDF + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------------------- | ---------------------------------- | -------- | -------- | ----------------- | +| C.algo.EvpKDF.create | 初始化EvpKDF新创建的密钥推导函数。 | function | no | yes | +| C.EvpKDF | EvpKDF派生密钥。 | function | no | yes | + +**API** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------ | ---------------------------------- | -------- | -------- | ----------------- | +| compute | 计算基于EvpKDF密码的密钥派生函数。 | function | no | yes | + +#### format + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------------------------- | ------------------------------------------- | -------- | -------- | ----------------- | +| C.format.OpenSSL.stringify | 将CipherParams对象转换为OpenSSL兼容字符串。 | function | no | yes | +| C.format.OpenSSL.parse | 将OpenSSL兼容字符串转换为CipherParams对象。 | function | no | yes | +| C.format.Hex.stringify | 将CipherParams对象转换为16进制字符串。 | function | no | yes | +| C.format.Hex.parse | 将16进制字符串转换为CipherParams对象。 | function | no | yes | + +#### enc/Encoder + +**静态方法** + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | HarmonyOS Support | +| :------------------------ | ------------------------------------- | -------- | -------- | ----------------- | +| C.enc.Hex.stringify | 将字节数组转换为十六进制字符串。 | function | no | yes | +| C.enc.Hex.parse | 将十六进制字符串转换为字节数组。 | function | no | yes | +| C.enc.Latin1.stringify | 将字节数组转换为Latin1格式字符串。 | function | no | yes | +| C.enc.Latin1.parse | 将Latin1格式字符串转换为字节数组。 | function | no | yes | +| C.enc.Utf8.stringify | 将字节数组转换为UTF-8格式字符串。 | function | no | yes | +| C.enc.Utf8.parse | 将UTF-8格式字符串转换为字节数组。 | function | no | yes | +| C.enc.Utf16.stringify | 将字节数组转换为UTF-16格式字符串。 | function | no | yes | +| C.enc.Utf16.parse | 将UTF-16格式字符串转换为字节数组。 | function | no | yes | +| C.enc.Utf16BE.stringify | 将字节数组转换为UTF-16 BE格式字符串。 | function | no | yes | +| C.enc.Utf16BE.parse | 将UTF-16 BE格式字符串转换为字节数组。 | function | no | yes | +| C.enc.Utf16LE.stringify | 将字节数组转换为UTF-16 LE格式字符串。 | function | no | yes | +| C.enc.Utf16LE.parse | 将UTF-16 LE格式字符串转换为字节数组。 | function | no | yes | +| C.enc.Base64.stringify | 将字节数组转换为Base64格式字符串。 | function | no | yes | +| C.enc.Base64.parse | 将Base64格式字符串转换为字节数组。 | function | no | yes | +| C.enc.Base64url.stringify | 将字节数组转换为Base64url格式字符串。 | function | no | yes | +| C.enc.Base64url.parse | 将Base64url格式字符串转换为字节数组。 | function | no | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [MIT License](https://github.com/brix/crypto-js/blob/4.2.0/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/dayJs.md b/en/dayJs.md new file mode 100644 index 00000000..9427191f --- /dev/null +++ b/en/dayJs.md @@ -0,0 +1,346 @@ + +> 模板版本：v0.2.0 + +

+

DayJs

+

+

+ + License + +

+ +> [!tip] [Github 地址](https://github.com/iamkun/dayjs?tab=readme-ov-file) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install dayjs --save +``` + +#### **yarn** + +```bash +yarn add dayjs --save +``` + + + +快速使用： + +```bash +import dayjs from 'dayjs' + +dayjs().format() +``` + +## 约束与限制 + +## 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.21; + +## API + +详情请查看[DayJs官方文档](https://day.js.org/docs/zh-CN/installation/installation) + +以下dayjs为day.js导出的对象，即： + +```bash +import dayjs from 'dayjs'; +``` + +下面的代码展示了这个库的基本使用示例： + +```tsx +import React, { useState, useEffect, useRef } from "react"; +import { View, Text, Button, StyleSheet } from "react-native"; +import dayjs from "dayjs"; +import duration from "dayjs/plugin/duration"; + +const DayJsDemo = () => { + dayjs.extend(duration); + + return ( + + ValueAssignmentDemo: 取值/赋值 + + 获取或设置毫秒：{dayjs().millisecond()} + + 获取或设置秒：{dayjs().second()} + 获取或设置分钟：{dayjs().minute()} + 获取或设置小时：{dayjs().hour()} + + 获取或设置月份里的日期：{dayjs().date()} + + 获取或设置星期几：{dayjs().day()} + 获取或设置月份：{dayjs().month()} + 获取或设置年份。：{dayjs().year()} + + 从Dayjs对象中获取相应信息的 getter：年{dayjs().get("year")} 月 + {dayjs().get("month")} + + + 格式化{dayjs().format("YYYY-MM-DD")} + + 时长{dayjs.duration(100)} + + 时间比较{dayjs().isSame("2011-01-01", "year") ? "相等" : "不相等"} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + paddingTop: 50, + padding: 8, + }, + navigationContainer: { + flex: 1, + paddingTop: 50, + padding: 8, + }, + textCommon: { + marginBottom: 10, + fontSize: 15, + alignItems: "center", + justifyContent: "center", + }, + interval: { + marginBottom: 10, + }, + viewBox: { + width: "100%", + borderWidth: 1, + marginBottom: 2, + padding: 5, + }, + viewButtonBox: { + width: "100%", + flexDirection: "row", + alignItems: "center", + marginBottom: 10, + }, + formatLabel: { + marginRight: 2, + fontSize: 16, + fontWeight: "700", + }, + flexRowCenter: { + flexDirection: "row", + alignItems: "center", + justifyContent: "center", + }, + flexColCenter: { + alignItems: "center", + justifyContent: "center", + }, + headerTitle: { + fontSize: 18, + fontWeight: "700", + }, + componentTitle: { + fontSize: 25, + fontWeight: "700", + marginBottom: 20, + }, + inputStyle: { + width: 200, + height: 40, + borderWidth: 1, + borderRadius: 10, + }, +}); +export default DayJsDemo; +``` + +如下是已验证接口展示: + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +#### **Get + Set** + +| Name | Description | Type | Required | HarmonyOS Support | note | +| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | ------------------------------------------------- | +| millisecond | Gets or sets the milliseconds. | function | no | yes | | +| second | Gets or sets the seconds. | function | no | yes | | +| minute | Gets or sets the minutes. | function | no | yes | | +| hour | Gets or sets the hour. | function | no | yes | | +| date | Gets or sets the day of the month | function | no | yes | | +| day | Gets or sets the day of the week. | function | no | yes | | +| weekday | Gets or sets the day of the week according to the locale. | function | no | yes | This requires the `Weekday` plugin to work | +| isoWeekday | Gets or sets the ISO day of the week with 1 being Monday and 7 being Sunday. | function | no | yes | This requires the `IsoWeek` plugin to work | +| dayOfYear | Gets or sets the day of the year. | function | no | yes | This requires the `DayOfYear` plugin to work | +| week | Gets or sets the week of the year. | function | no | yes | This requires the `WeekOfYear` plugin to work | +| isoWeek | Gets or sets the ISO week of the year. | function | no | yes | This requires the `IsoWeek` plugin to work | +| month | Gets or sets the month. | function | no | yes | | +| quarter | Gets or sets the quarter. | function | no | yes | This requires the `QuarterOfYear` plugin to work | +| year | Gets or sets the year. | function | no | yes | | +| weekYear | Gets the week-year according to the locale. | function | no | yes | This requires the `WeekYear` plugin to work | +| isoWeekYear | Gets the ISO week-year. | function | no | yes | This requires the `IsoWeek` plugin to work | +| isoWeeksInYear | Gets the number of weeks in the current year, according to ISO weeks. | function | no | yes | This requires the `IsoWeeksInYear` plugin to work | +| get | String getter, returns the corresponding information getting from Day.js object. Units are case insensitive, and support plural and short forms. Note, short forms are case sensitive. | function | no | yes | | +| set | Generic setter, accepting unit as first argument, and value as second, returns a new instance with the applied changes. | function | no | yes | | + +#### **Manipulate** + +| Name | Description | Type | Required | HarmonyOS Support | note | +| --------- | -------------------------------------------------------------------------- | -------- | -------- | ----------------- | -------------------------------------- | +| add | Returns a cloned Day.js object with a specified amount of time added. | function | no | yes | | +| subtract | Returns a cloned Day.js object with a specified amount of time subtracted. | function | no | yes | | +| startOf | Returns a cloned Day.js object and set it to the start of a unit of time. | function | no | yes | | +| endOf | Returns a cloned Day.js object and set it to the end of a unit of time. | function | no | yes | | +| local | This returns a Day.js object with a flag to use local time. | function | no | yes | This requires the `UTC` plugin to work | +| utc | This returns a Day.js object with a flag to use UTC time. | function | no | yes | This requires the `UTC` plugin to work | +| utcOffset | Get the UTC offset in minutes. | function | no | yes | This requires the `UTC` plugin to work | + +#### **Display** + +| Name | Description | Type | Required | HarmonyOS Support | note | +| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | ----------------------------------------------- | +| format | Get the formatted date according to the string of tokens passed in. | function | no | yes | | +| fromNow | Returns the string of relative time from now.If you pass true, you can get the value without the suffix. | function | no | yes | This requires the `RelativeTime` plugin to work | +| from | Returns the string of relative time from X.If you pass true, you can get the value without the suffix. | function | no | yes | This requires the `RelativeTime` plugin to work | +| toNow | Returns the string of relative time to now.If you pass true, you can get the value without the suffix. | function | no | yes | This requires the `RelativeTime` plugin to work | +| to | Returns the string of relative time to X.If you pass true, you can get the value without the suffix. | function | no | yes | This requires the `RelativeTime` plugin to work | +| calendar | Calendar time displays time relative to a given reference time (defaults to now) but does so slightly differently than dayjs#fromNow. | function | no | yes | This requires the `Calendar` plugin to work | +| diff | This indicates the difference between two date-time in the specified unit.To get the difference in milliseconds, use dayjs#diff.To get the difference in another unit of measurement, pass that measurement as the second argument. | function | no | yes | | +| valueOf | This returns the number of milliseconds since the Unix Epoch of the Day.js object. | function | no | yes | | +| unix | This returns the Unix timestamp (the number of seconds since the Unix Epoch) of the Day.js object. | function | no | yes | | +| daysInMonth | Get the number of days in the current month. | function | no | yes | | +| toDate | To get a copy of the native Date object parsed from the Day.js object use dayjs#toDate. | function | no | yes | | +| toArray | Returns an array that mirrors the parameters | function | no | yes | This requires the `ToArray` plugin to work | +| toJSON | To serialize as an ISO 8601 string. | function | no | yes | | +| toISOString | To format as an ISO 8601 string. | function | no | yes | | +| toObject | Returns an object with the date's properties. | function | no | yes | This requires the `ToObject` plugin to work | +| toString | Returns a string representation of the date. | function | no | yes | | + +#### **Query** + +| Name | Description | Type | Required | HarmonyOS Support | note | +| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | ----------------- | ------------------------------------------------- | +| isBefore | This indicates whether the Day.js object is before the other supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. In that case, the comparison respects the given unit and the units above. | function | no | yes | | +| isSame | This indicates whether the Day.js object is the same as the other supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. | function | no | yes | | +| isAfter | This indicates whether the Day.js object is after the other supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. In that case the comparision respects the given unit and the units above. | function | no | yes | | +| isSameOrBefore | This indicates whether the Day.js object is the same or before another supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. | function | no | yes | This requires the `IsSameOrBefore` plugin to work | +| isSameOrAfter | This indicates whether the Day.js object is the same or after another supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the second parameter. | function | no | yes | This requires the `IsSameOrAfter` plugin to work | +| isBetween | This indicates whether the Day.js object is between two other supplied date-time.If you want to limit the granularity to a unit other than milliseconds, pass it as the third parameter. In that case the comparision respects the given unit and the units above. | function | no | yes | This requires the `IsBetween` plugin to work | +| isDayjs | This indicates whether a variable is a Day.js object or not. | function | no | yes | | +| isLeapYear | This indicates whether the Day.js object's year is a leap year or not. | function | no | yes | This requires the `IsLeapYear` plugin to work | + +#### **Durations** + +| Name | Description | Type | Required | HarmonyOS Support | note | +| -------- | ------------------------------------------------------------------------------------ | -------- | -------- | ----------------- | ------------------------------------------- | +| duration | To create a duration, call dayjs.duration() with the length of time in milliseconds. | function | no | yes | This requires the `Duration` plugin to work | + +#### **Plugins** + +加载插件： + +```bash +import duration from 'dayjs/plugin/duration' + +dayjs.extend(duration) +``` + +| Name | Description | Required | HarmonyOS Support | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------------- | +| advancedFormat | AdvancedFormat extends dayjs().format API to supply more format options. | no | yes | +| arraySupport | ArraySupport extends dayjs(), dayjs.utc APIs to support array argument. | no | yes | +| bigIntSupport | BigIntSupport extends dayjs(), dayjs.unix APIs to support BigInt argument. | no | yes | +| buddhistEra | BuddhistEra extends dayjs().format API to supply Buddhist Era (B.E.) format options. | no | yes | +| calendar | Calendar adds .calendar API to return a string to display calendar time | no | yes | +| customParseFormat | CustomParseFormat extends dayjs() constructor to support custom formats of input strings. | no | yes | +| dayOfYear | DayOfYear adds .dayOfYear() API to returns a number indicating the Dayjs's day of the year, or to set the day of the year. | no | yes | +| devHelper | DevHelper adds some helper function to give you more hints and warnings while using Day.js. | no | yes | +| duration | Duration adds .duration .isDuration APIs to support duration. | no | yes | +| isBetween | IsBetween adds .isBetween() API to returns a boolean indicating if a date is between two other dates. | no | yes | +| isLeapYear | IsLeapYear adds .isLeapYear API to returns a boolean indicating whether the Dayjs's year is a leap year or not. | no | yes | +| isSameOrAfter | IsSameOrAfter adds .isSameOrAfter() API to return a boolean indicating if a date is the same or after another date. | no | yes | +| isSameOrBefore | IsSameOrBefore adds .isSameOrBefore() API to returns a boolean indicating if a date is same or before another date. | no | yes | +| isToday | IsToday adds .isToday() API to indicates whether the Day.js object is today or not. | no | yes | +| isTomorrow | IsTomorrow adds .isTomorrow() API to indicates whether the Day.js object is tomorrow or not. | no | yes | +| isYesterday | IsYesterday adds .isYesterday() API to indicates whether the Day.js object is yesterday or not. | no | yes | +| isoWeek | IsoWeek adds .isoWeek() API to get or set the ISO week of the year. And adds .isoWeekday() to get or set ISO day of the week and .isoWeekYear() to get ISO week-year, and extends .startOf .endOf APIs to support unit isoWeek. | no | yes | +| isoWeeksInYear | IsoWeeksInYear adds .isoWeeksInYear() API to return a number to get the number of weeks in year, according to ISO weeks. | no | yes | +| localeData | LocaleData extends dayjs().localeData API to supply locale data. | no | yes | +| localizedFormat | LocalizedFormat extends dayjs().format API to supply localized format options. | no | yes | +| minMax | MinMax adds .min .max APIs to return a dayjs to compare given dayjs instances. This accepts both multiple arguments and array that contains Day.js instance. | no | yes | +| objectSupport | ObjectSupport extends dayjs(), dayjs.utc, dayjs().set, dayjs().add, dayjs().subtract APIs to support object argument. | no | yes | +| pluralGetSet | PluralGetSet adds plural getter & setter APIs .milliseconds(), .seconds(), .minutes(), .hours(), .days(), .weeks(), .isoWeeks(), .months(), .quarters(), .years(), .dates(). | no | yes | +| quarterOfYear | QuarterOfYear adds .quarter() API to return to which quarter of the year belongs a date, and extends .add .subtract .startOf .endOf APIs to support unit quarter. | no | yes | +| relativeTime | RelativeTime adds .from .to .fromNow .toNow APIs to formats date to relative time strings (e.g. 3 hours ago). | no | yes | +| timezone | Timezone adds dayjs.tz .tz .tz.guess .tz.setDefault APIs to parse or display between time zones. | no | yes | +| toArray | ToArray adds .toArray() API to return an array that mirrors the parameters | no | yes | +| toObject | ToObject adds .toObject() API to return an object with the date's properties. | no | yes | +| updateLocale | UpdateLocale adds .updateLocale API to update a locale's properties. | no | yes | +| utc | UTC adds .utc .local .isUTC APIs to parse or display in UTC. | no | yes | +| weekOfYear | WeekOfYear adds .week() API to returns a number indicating the Dayjs's week of the year. | no | yes | +| weekYear | WeekYear adds .weekYear() API to get locale aware week of the year. | no | yes | +| weekday | Weekday adds .weekday() API to get or set locale aware day of the week. | no | yes | + +#### **格式化时间** + +| **Format** | **Description** | **Output** | +| ---------- | --------------------------------------------------------- | --------------------- | +| YY | Two-digit year | 18 | +| YYYY | Four-digit year | 2018 | +| M | The month, beginning at 1 | 1-12 | +| MM | The month, 2-digits | 01-12 | +| MMM | The abbreviated month name | Jan-Dec | +| MMMM | The full month name | January-December | +| D | The day of the month | 1-31 | +| DD | The day of the month, 2-digits | 01-31 | +| d | The day of the week, with Sunday as 0 | 0-6 | +| dd | The min name of the day of the week | Su-Sa | +| ddd | The short name of the day of the week | Sun-Sat | +| dddd | The name of the day of the week | Sunday-Saturday | +| H | The hour | 0-23 | +| HH | The hour, 2-digits | 00-23 | +| h | The hour, 12-hour clock | 1-12 | +| hh | The hour, 12-hour clock, 2-digits | 01-12 | +| m | The minute | 0-59 | +| mm | The minute, 2-digits | 00-59 | +| s | The second | 0-59 | +| ss | The second, 2-digits | 00-59 | +| SSS | The millisecond, 3-digits | 000-999 | +| Z | The offset from UTC, ±HH:mm | +05:00 | +| ZZ | The offset from UTC, ±HHmm | +0500 | +| A | | AM PM | +| a | | am pm | +| Q | Quarter | 1-4 | +| Do | Day of Month with ordinal | 1st 2nd ... 31st | +| k | The hour, beginning at 1 | 1-24 | +| kk | The hour, 2-digits, beginning at 1 | 01-24 | +| X | Unix Timestamp in second | 1360013296 | +| x | Unix Timestamp in millisecond | 1360013296123 | +| w | Week of year ( dependent WeekOfYear plugin ) | 1 2 ... 52 53 | +| ww | Week of year, 2-digits ( dependent WeekOfYear plugin ) | 01 02 ... 52 53 | +| W | ISO Week of year ( dependent IsoWeek plugin ) | 1 2 ... 52 53 | +| WW | ISO Week of year, 2-digits ( dependent IsoWeek plugin ) | 01 02 ... 52 53 | +| wo | Week of year with ordinal ( dependent WeekOfYear plugin ) | 1st 2nd ... 52nd 53rd | +| gggg | Week Year ( dependent WeekYear plugin ) | 2017 | +| GGGG | ISO Week Year ( dependent IsoWeek plugin ) | 2017 | +| z | Abbreviated named offset ( dependent Timezone plugin ) | EST | +| zzz | Unabbreviated named offset ( dependent Timezone plugin ) | Eastern Standard Time | + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/iamkun/dayjs/blob/dev/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/deepmerge.md b/en/deepmerge.md new file mode 100644 index 00000000..2284de0c --- /dev/null +++ b/en/deepmerge.md @@ -0,0 +1,130 @@ + +> 模板版本：v0.1.3 + +

+

deepmerge

+

+

+ + License + +

+ +> [!tip] [Github 地址](https://github.com/TehShrike/deepmerge) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install deepmerge@4.3.1 +``` + +#### **yarn** + +```bash +yarn add deepmerge@4.3.1 +``` + + + +快速使用： + +```js +import React from 'react'; +import { View, Text, StyleSheet, ScrollView } from 'react-native'; +import deepmerge from 'deepmerge'; + +const App = () => { + // 定义两个需要合并的对象 + const object1 = { + name: 'John', + age: 30, + address: { + street: '123 Main St', + city: 'Springfield', + }, + }; + + const object2 = { + age: 31, + address: { + country: 'USA', + }, + hobbies: ['Reading', 'Hiking'], + }; + + // 使用 deepmerge 合并两个对象 + const mergedObject = deepmerge(object1, object2); + + return ( + + Object 1: + {JSON.stringify(object1, null, 2)} + + Object 2: + {JSON.stringify(object2, null, 2)} + + Merged Object: + {JSON.stringify(mergedObject, null, 2)} + + ); +}; + +const styles = StyleSheet.create({ + container: { + flexGrow: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#f5fcff', + padding: 20, + }, + title: { + fontSize: 20, + fontWeight: 'bold', + marginVertical: 10, + }, + text: { + fontSize: 16, + marginBottom: 20, + textAlign: 'left', + width: '100%', + }, +}); + +export default App; +``` + +## 约束与限制 + +### 兼容性 + +在下述版本验证通过： + +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; +2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; + +## API + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情见 [deepmerge源库地址](https://github.com/TehShrike/deepmerge) + +| Name | Description | Type | Required | HarmonyOS Support | +| ---------------------------------------- | ---------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| deepmerge(x, y, [options]) | Merge two objects x and y deeply, returning a new merged object with the elements from both x and y. | function | no | yes | +| deepmerge.all(arrayOfObjects, [options]) | Merges any number of objects into a single result object. | function | no | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/TehShrike/deepmerge/blob/master/license.txt) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/flipper-plugin-react-navigation.md b/en/flipper-plugin-react-navigation.md new file mode 100644 index 00000000..5a296f7a --- /dev/null +++ b/en/flipper-plugin-react-navigation.md @@ -0,0 +1,63 @@ +> 模板版本：v0.2.2 + +

+

flipper-plugin-react-navigation

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install flipper-plugin-react-navigation@1.3.32 +``` + +#### **yarn** + +```bash +yarn add flipper-plugin-react-navigation@1.3.32 +``` + + +下面的代码展示了这个库的基本使用场景，更多详情请参考[使用教程](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation)： + +编辑 `~/.flipper/config.json` (当 flipper 处于关闭状态) +```js +{ + "pluginPaths": ["/path/to/react-navigation/packages"] +} +``` +然后在 `flipper-plugin-react-navigation` 里运行 `yarn watch` + + +## 约束与限制 +此库是flipper插件库，需配合flipper App使用。使用方法请参考[使用教程](https://github.com/react-navigation/react-navigation/tree/6.x/packages/flipper-plugin-react-navigation) + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.20-CAPI; SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; +2. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-navigation/react-navigation/blob/6.x/packages/flipper-plugin-react-navigation/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/freakycoder-react-native-bounceable.md b/en/freakycoder-react-native-bounceable.md new file mode 100644 index 00000000..4094068c --- /dev/null +++ b/en/freakycoder-react-native-bounceable.md @@ -0,0 +1,137 @@ +> 模板版本：v0.2.2 + + + +

+

@freakycoder/react-native-bounceable

+

+

+ + Supported platforms + + + License + +

+ + + +> [!TIP] [Github 地址](https://github.com/WrathChaos/react-native-bounceable) + +## 安装与使用 + +进入到工程目录并输入以下命令： + +### npm + +```bash +npm i @freakycoder/react-native-bounceable@1.0.3 +``` + +### yarn + +``` +yarn add @freakycoder/react-native-bounceable@1.0.3 +``` + +下面的代码展示了这个库的基本使用场景： + +1、引入库文件 + +```jsx +import RNBounceable from "@freakycoder/react-native-bounceable"; +``` + +2、使用场景： + +您可以将**任何子组件**放入 **RNBounceable** 组件中，当它被按下时，它会使其反弹 + +```jsx + {}}> + + Bounce + + +``` + +详细使用场景 + +```javascript +import React from 'react'; +import type { PropsWithChildren } from 'react'; +import { StyleSheet, View, Text }from 'react-native'; +import RNBounceable from "@freakycoder/react-native-bounceable"; + +let flag:boolean = true; +export function BounceableExample () { + const customStyle = { + backgroundColor: 'red', + padding: 10, + borderRadius: 100, + alignItems: 'center', + justifyContent: 'center', + }; + + + Press Me + +} + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + }, + bounceStyle: { + backgroundColor: 'lightblue' + }, + textStyle: { + fontSize: 20, + color: 'red', + }, + }); +``` + + + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证： + +1. RNOH: 0.72.28; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.500; ROM：5.0.0.31; + +## 属性和方法 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Property | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | ------------------------------------------------------------ | :------: | :------: | ----------- | ----------------- | +| bounceEffectIn | change the bounce effect's value（reduce） | number | no | iOS/Android | yes | +| bounceEffectOut | change the bounce effect's value（amplification） | number | no | iOS/Android | yes | +| bounceVelocityIn | The speed of the press | number | no | iOS/Android | yes | +| bounceVelocityOut | The speed at which it is released | number | no | iOS/Android | yes | +| bouncinessIn | Elastic coefficient when pressed (set value 0-50 has obvious effect display) | number | no | iOS/Android | yes | +| bouncinessOut | Elastic coefficient when released (set value 0-50 has obvious effect display) | number | no | iOS/Android | yes | +| onPress | set your own logic for the onPress functionality | function | no | iOS/Android | yes | +| style | set the style like any other View container | style | no | iOS/Android | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://opensource.org/license/MIT) ，请自由地享受和参与开源。 diff --git a/en/galio-framework.md b/en/galio-framework.md new file mode 100644 index 00000000..902143fc --- /dev/null +++ b/en/galio-framework.md @@ -0,0 +1,407 @@ +> 模板版本：v0.2.2 + +

+

galio-framework

+

+

+ + Supported platforms + + + License + +

+ + + + +> [!TIP] [Github 地址](https://github.com/galio-org/galio) + +## 安装与使用 + + + +#### **npm** + +```bash +npm install galio-framework@0.8.0 +``` + +#### **yarn** + +```bash +yarn add galio-framework@0.8.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import { Card, Block, theme } from 'galio-framework'; +import React, { useState } from 'react'; +import { Image, ScrollView, StyleSheet, Text, View } from 'react-native'; + +const CardDemo = () => { + return ( + + + + ) +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: '#fff', + }, + accordion: { + borderWidth: 1, + borderColor: '#ccc', + borderRadius: 5, + overflow: 'hidden', + shadowRadius: 10 + }, + listStyle: { + borderTopWidth: 10, + borderTopColor: 'red', + }, + headerStyle: { + backgroundColor: '#5E72E4', + padding: 10, + }, + contentStyle: { + paddingVertical: 10, + paddingHorizontal: 20, + fontWeight: 'bold' + }, + inputArea: { + width: '100%', + height: '15%', + borderWidth: 2, + borderColor: '#000000', + marginTop: 8, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: "white" + }, + baseText: { + width: '100%', + height: '100%', + fontWeight: 'bold', + textAlign: 'center', + fontSize: 16, + }, + shadow: { + shadowColor: "red", + shadowOffset: { + width: 10, + height: 3, + }, + }, + viewShadow: { + elevation: 1.5, + shadowColor: "#FF9C09", + shadowOffset: { width: 0, height: 0 }, + shadowOpacity: 1, + shadowRadius: 1.5, + }, + cardImageRadius: { + borderRadius: 30, + opacity:0.5 + }, + imageBlockStyle: { + borderColor: 'blue', + borderWidth: 5, + borderBlockColor: 'yellow' + }, + footerStyle: { + color: 'yellow', + backgroundColor: '#FF7167', + fontSize: 10, + fontWeight: 'bold', + borderRadius:10 + } +}); + +export default CardDemo; +``` + +## Link + +本库依赖react-native-vector-icons，如已在鸿蒙工程中引入过该库，则无需再次引入。 + +如未引入请参照[react-native-vector-icons 文档](/zh-cn/react-native-vector-icons.md)进行引入 + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.27; SDK: HarmonyOS NEXT Developer Beta1 5.0.0.25(API Version 12 Canary4); IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.29; + +## 属性 + +详情请见[galio](https://galio.io/docs/#/components) + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 Yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +### [Accordion](https://galio.io/docs/#/components/accordion?id=accordion) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--------------: | :----------------------------------------------------------: | :-------: | :------: | :---------: | :---------------: | +| style | Styling the Block which encapsulates the whole FlatList used for rendering the elements. | object | no | iOS/Android | Yes | +| dataArray | Array of objects with the following keys: title, content, icon: { name, family, size, color, style} | array | no | iOS/Android | Yes | +| opened | Index number representing which of the elements of your array should be opened when the component first renders. | number | no | iOS/Android | Yes | +| listStyle | FlatList style prop. | object | no | iOS/Android | Yes | +| icon | Icon for the un-expanded piece of content | component | no | iOS/Android | Yes | +| expandedIcon | Icon used when the content is expanded. | component | no | iOS/Android | Yes | +| headerStyle | Object styling the header of the Accordion. | object | no | iOS/Android | Yes | +| contentStyle | Object styling the content section of the Accordion. | object | no | iOS/Android | Yes | +| onAccordionClose | Function called when the user closes one of the Accordion's items. | function | no | iOS/Android | Yes | +| onAccordionOpen | Function called when the user expands one of the Accordion's items. | function | no | iOS/Android | Yes | + +### [Block](https://github.com/galio-org/galio/blob/master/LICENSE.md) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---------: | :------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: | +| bottom | alignItems: 'flex-end' alignSelf: 'flex-end' | boolean | no | iOS/Android | Yes | +| card | changes the View's border-radus, -width and -color | boolean | no | iOS/Android | Yes | +| center | alignItems: 'center' alignSelf: 'center' | boolean | no | iOS/Android | Yes | +| flex | flex: 1 **or** `` | boolean, number | no | iOS/Android | Yes | +| fluid | width: 'auto' | boolean | no | iOS/Android | Yes | +| height | changes the height of the Block | number | no | iOS/Android | Yes | +| left | alignItems: 'flex-start' | boolean | no | iOS/Android | Yes | +| middle | alignItems: 'center' alignSelf: 'center'. | boolean | no | iOS/Android | Yes | +| right | alignItems: 'flex-start' | boolean | no | iOS/Android | Yes | +| row | flexDirection: 'row' | boolean | no | iOS/Android | Yes | +| safe | Wraps the Block with a SafeAreaView | boolean | no | iOS/Android | Yes | +| shadow | adds shadow on the Block | boolean | no | iOS/Android | Yes | +| shadowColor | changes the shadow's color | string | no | iOS/Android | Yes | +| space | your options are: 'between', 'around' or 'evenly' | string | no | iOS/Android | Yes | +| top | alignItems: 'flex-start' alignSelf: 'flex-start' | boolean | no | iOS/Android | Yes | +| width | changes the width of the Block | number | no | iOS/Android | Yes | + +### [Button](https://galio.io/docs/#/components/button?id=button) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---------: | :----------------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: | +| capitalize | Transforms the first character in a capital letter | boolean | no | iOS/Android | Yes | +| color | your options are: 'primary', 'theme', 'warning', 'succes', 'transparent' or your own color | string | no | iOS/Android | Yes | +| disabled | Disables the button | boolean | no | iOS/Android | Yes | +| icon | pick whatever icon you want from Expo's icons | boolean, string | no | iOS/Android | Yes | +| iconColor | sets the icon's color | boolean, string | no | iOS/Android | Yes | +| iconFamily | pick whatever icon family suits the icon you chose from Expo's icons | number | no | iOS/Android | Yes | +| iconSize | sets the icon's size | boolean | no | iOS/Android | Yes | +| loading | Uses the for the loading effect | boolean | no | iOS/Android | Yes | +| loadingSize | your options are: 'small', 'large' | boolean | no | iOS/Android | Yes | +| lowercase | makes all letters lowercase | boolean | no | iOS/Android | Yes | +| onlyIcon | adds specific styling for using only an icon in your button | boolean | no | iOS/Android | Yes | +| opacity | changes the button's opacity | boolean | no | iOS/Android | Yes | +| radius | changes the button's radius | string | no | No | No | +| shadowColor | the default shadowColor is based on the button's color but you can also write a specific shadowColor | string | no | iOS/Android | Yes | +| shadowColor | removes shadow | boolean | no | iOS/Android | Yes | +| size | your options are: 'large', 'small' | number | no | iOS/Android | Yes | +| uppercase | makes all letters uppercase | boolean | no | iOS/Android | Yes | + +### [Card](https://galio.io/docs/#/components/card?id=card) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-------------: | :----------------------------------------------------------: | :-------------: | :------: | :---------: | :---------------: | +| card | adding the necessary styles | boolean | no | iOS/Android | Yes | +| shadow | adding the necessary styles for shadows | boolean | no | iOS/Android | Yes | +| borderless | adding the card's border | boolean | no | iOS/Android | Yes | +| image | write your relative path or URL to the image | string | no | iOS/Android | Yes | +| imageBlockStyle | styles for the Block wrapping the Image | string | no | iOS/Android | Yes | +| imageStyle | styles for the Image | object | no | iOS/Android | Yes | +| avatar | write your relative path or URL to the avatar's image | string | no | iOS/Android | Yes | +| location | where is this coming from? write the location of the author | string | no | iOS/Android | Yes | +| locationColor | the default locationColor is based on themes.COLORS.MUTED, but you can also write your own color | boolean, string | no | iOS/Android | Yes | +| title | write your main card's title | string | no | iOS/Android | Yes | +| titleColor | change your title's color | string | no | iOS/Android | Yes | +| caption | write your main card's title | string | no | iOS/Android | Yes | +| captionColor | change your caption's color | string | no | iOS/Android | Yes | +| footerStyle | styles for the block wrapping the whole author's section | object | no | iOS/Android | Yes | + +### [Checkbox](https://galio.io/docs/#/components/checkbox?id=checkbox) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------: | :----------------------------------------------------------: | :----------------------------------------------------------: | :------: | :---------: | :---------------: | +| checkboxStyle | By sending an object you can style the checkbox's color, size and more | any | no | iOS/Android | Yes | +| disabled | This disables the possibility of the checkbox being used. | boolean | no | iOS/Android | Yes | +| flexDirection | Maybe you need the checkbox to be on top of an image? You can do that with this prop. | oneOf(['row', 'row-reverse', 'column', 'column-reverse']), string | no | iOS/Android | Yes | +| iconColor | This prop changes the icon color. | string | no | iOS/Android | Yes | +| iconName | This prop changes the icon. | string | no | iOS/Android | Yes | +| iconSize | This prop changes the size of the icon. | number | no | iOS/Android | Yes | +| iconFamily | In case you need an icon from a different package, this prop helps you change the icon package. | string | no | iOS/Android | Yes | +| image | This allows you to place an image instead of text. | string | no | iOS/Android | Yes | +| imageStyle | Style the way your image looks here！ | any | no | iOS/Android | Yes | +| initialValue | Should the initial state of your checkbox be false or true? | boolean | no | iOS/Android | Yes | +| label | The text next to your checkbox. | string | no | iOS/Android | Yes | +| labelStyle | Style your checkbox's text | any | no | iOS/Android | Yes | +| onChange | This prop take an arrow function and everytime the user presses the checkbox the function is called. | function | no | iOS/Android | Yes | + +### [Deck Swiper](https://galio.io/docs/#/components/deckswiper?id=deck-swiper) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------------: | :----------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | +| style | Styling the Block which encapsulates the components used for swiping. | object | no | iOS/Android | Yes | +| components | An array of components used for building the deck. | array | no | iOS/Android | Yes | +| onSwipeRight | Function called when the user swipes right. | function | no | iOS/Android | Yes | +| onSwipeLeft | Function called when the user swipes left. | function | no | iOS/Android | Yes | +| focusedElementStyle | Styling for the first element of the deck. | object | no | iOS/Android | Yes | +| nextElementStyle | Styling for the elements underneath the first element of the deck. | object | no | iOS/Android | Yes | + +### [Icon](https://galio.io/docs/#/components/icon?id=icon) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----: | :-------------------------------------------: | :----: | :------: | :---------: | :---------------: | +| name | Choose your Icon's name from Expo's icon list | string | no | iOS/Android | Yes | +| family | Choose your Icon's family from the same list | string | yes | iOS/Android | Yes | +| size | This sets your Icon's size | number | no | iOS/Android | Yes | +| color | This sets your Icon's color | string | no | iOS/Android | Yes | + +### [Input](https://galio.io/docs/#/components/input?id=input) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------: | :----------------------------------------------------------: | :-----: | :------: | :---------: | :---------------: | +| type | this is basically the TextInput's keyboardType prop and it has the next options: 'default', 'number-pad', 'decimal-pad', 'numeric', 'email-address', 'phone-pad'. | string | no | iOS/Android | Yes | +| password | Tells the input that this is going to be a password input | boolean | no | iOS/Android | Yes | +| placeholderTextColor | Sets the placeholder's text color | string | no | iOS/Android | Yes | +| label | Sets the label of the input | string | no | iOS/Android | Yes | +| bgColor | Sets the Input's backgroundColor | string | no | iOS/Android | Yes | +| rounded | Sets the corners to be rounded | boolean | no | iOS/Android | Yes | +| borderless | Sets the Input's borderWidth to 0 | boolean | no | iOS/Android | Yes | +| viewPass | Adds the functionality of pressing a button in order to see your password's letters | boolean | no | iOS/Android | Yes | +| icon | Choose your Icon's name from Expo's icon list | string | no | iOS/Android | Yes | +| iconColor | Changes the Icon's color | string | no | iOS/Android | Yes | +| family | Choose your Icon's family from the same list | string | no | iOS/Android | Yes | +| color | Sets the Input's text color. | string | no | iOS/Android | Yes | +| help | Sets a helper line for more information regarding your input. | string | no | iOS/Android | Yes | +| left | Sets the Icon to the left of the Input. | boolean | no | iOS/Android | Yes | +| right | Sets the Icon to the right of the Input. | boolean | no | iOS/Android | Yes | +| topHelp | Sets the helper line above the input. | boolean | no | iOS/Android | Yes | +| bottomHelp | Sets the helper line below the input. | boolean | no | iOS/Android | Yes | + +### [NavBar](https://galio.io/docs/#/components/navbar?id=navbar) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------: | :----------------------------------------------------------: | :----------: | :------: | :---------: | :---------------: | +| back | Adds a back button for your navBar. | boolean | no | iOS/Android | Yes | +| transparent | Sets the backgroundColor and borderColor to 'transparent' | boolean | no | iOS/Android | Yes | +| title | Title of the NavBar | node, string | no | iOS/Android | Yes | +| titleStyle | Sets the styling for the title | object | no | iOS/Android | Yes | +| left | Left side of the NavBar | node | no | iOS/Android | Yes | +| leftStyle | Sets the styling for the View wrapping the left side element. | object | no | iOS/Android | Yes | +| leftIconColor | Sets the color of the left side's icon. | string | no | iOS/Android | Yes | +| onLeftPress | Function for the left side of the navbar | function | no | iOS/Android | Yes | +| right | Right side of the NavBar | node | no | iOS/Android | Yes | +| rightStyle | Sets the styling for the View wrapping the left side element. | object | no | iOS/Android | Yes | + +### [Radio](https://galio.io/docs/#/components/radio?id=radio) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-------------: | :---------------------------------------: | :----------------------------------------------------------: | :------: | :---------: | :---------------: | +| color | color. | string | no | iOS/Android | Yes | +| containerStyle | Container Style | any | no | iOS/Android | Yes | +| radioOuterStyle | Title of the NavBar | any | no | iOS/Android | Yes | +| radioInnerStyle | Sets the styling for the title | any | no | iOS/Android | Yes | +| disabled | Prohibited Use | boolean | no | iOS/Android | Yes | +| flexDirection | Determines the direction of the main axis | oneOfType(['row', 'row-reverse', 'column', 'column-reverse']), string | no | iOS/Android | Yes | +| initialValue | Initial Value | boolean | no | iOS/Android | Yes | +| label | Label | string | no | iOS/Android | Yes | +| labelStyle | Label Styles | any | no | iOS/Android | Yes | +| onChange | Change when radio is seleted | function | no | iOS/Android | Yes | + +### [Text](https://galio.io/docs/#/components/text?id=text) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----: | :------------------------------------------: | :-----: | :------: | :---------: | :---------------: | +| h1 | Sets the text's fontSize to 44px. | boolean | no | iOS/Android | Yes | +| h2 | Sets the text's fontSize to 38px. | boolean | no | iOS/Android | Yes | +| h3 | Sets the text's fontSize to 30px. | boolean | no | iOS/Android | Yes | +| h4 | Sets the text's fontSize to 24px. | boolean | no | iOS/Android | Yes | +| h5 | Sets the text's fontSize to 18px. | boolean | no | iOS/Android | Yes | +| p | Sets the text's fontSize to 16px. | boolean | no | iOS/Android | Yes | +| size | Sets the fontSize of the text. | number | no | iOS/Android | Yes | +| color | Sets the color of the text. | string | no | iOS/Android | Yes | +| muted | Changes the text color to theme.COLORS.MUTED | boolean | no | iOS/Android | Yes | +| bold | Sets the fontWeight to 'bold'. | boolean | no | iOS/Android | Yes | +| italic | Sets the fontStyle to 'italic'. | boolean | no | iOS/Android | Yes | + +### [Toast Notification](https://galio.io/docs/#/components/toastnotification?id=toast-notification) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---------------: | :----------------------------------------------------------: | :---------: | :------: | :---------: | :---------------: | +| style | Styling the Block which encapsulate | object | no | iOS/Android | Yes | +| children | The content of your toast notification. You can even just write a text or create your own component. | node/string | no | iOS/Android | Yes | +| isShow | Toggle between the toast being shown or not. | bool | no | iOS/Android | Yes | +| positionIndicator | one of: 'top', 'center', 'bottom' | string | no | iOS/Android | Yes | +| positionOffset | Whether to use positioning | number | no | iOS/Android | Yes | +| fadeInDuration | The number of ms for the fade in animation. | number | no | iOS/Android | Yes | +| fadeOutDuration | The number of ms for the fade out animation. | number | no | iOS/Android | Yes | +| color | one of: 'primary', 'theme', 'info', 'warning', 'success' | string | no | iOS/Android | Yes | +| round | Maybe you want a rounded toast notification? | boolean | no | iOS/Android | Yes | +| textStyle | Style object for the children prop used as a string. | object | no | iOS/Android | Yes | + +### [Slider](https://galio.io/docs/#/components/slider?id=slider) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---------------: | :----------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | +| activeColor | This sets the active color of your slider. | string | no | iOS/Android | Yes | +| value | The initial value at which the thumb of the slider is positioned | number | no | iOS/Android | Yes | +| disabled | This prop makes the slider unusable to the user. | boolean | no | iOS/Android | Yes | +| minimumValue | Sets the minimum value for the Slider. | number | no | iOS/Android | Yes | +| maximumValue | Sets the maximum value for the Slider. | number | no | iOS/Android | Yes | +| trackStyle | By passing an object you can style the track of the Slider. | any | no | iOS/Android | Yes | +| thumbStyle | By passing an object you can style the thumb of the Slider. | any | no | iOS/Android | Yes | +| step | This is a stepper. It sets fixed values for the thumb. | number | no | iOS/Android | Yes | +| onSlidingComplete | By passing an arrow function you can decide what is going to happen when the Sliding is complete | function | no | iOS/Android | Yes | +| onSlidingStart | By passing an arrow function you can decide what is going to happen when the Sliding starts | function | no | iOS/Android | Yes | +| onValueChange | By passing an arrow function you can decide what is going to happen when the Sliding is moving. | function | no | iOS/Android | Yes | + +### [Switch](https://galio.io/docs/#/components/switch?id=switch) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :-----------------: | :------------------------------------------: | :----------------------------------------------------------: | :------: | :---------: | :---------------: | +| color | Switch Color | oneOfType(['primary', 'theme', 'error', 'warning', 'success', 'info']), string | no | No | No | +| disabled | Whether the switch is disabled | boolean | no | iOS/Android | Yes | +| initialValue | Initial value | boolean | no | iOS/Android | Yes | +| trackColor | track Color | object | no | iOS/Android | Yes | +| ios_backgroundColor | ios background color | string | no | iOS/Android | Yes | +| onChange | Events that occur when the switch is changed | function | yes | iOS/Android | Yes | + +### [GalioTheme](https://galio.io/docs/?ref=galio-repo#/GalioTheme?id=galiotheme-usage) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---: | :----------------------------------------------------------: | :----: | :------: | :---------: | :---------------: | +| color | Theme color, [COLORS reference table](https://galio.io/docs/?ref=galio-repo#/GalioTheme?id=colors-reference-table) | Object | no | iOS/Android | Yes | +| size | Set Font Size, [SIZES reference table](https://galio.io/docs/?ref=galio-repo#/GalioTheme?id=sizes-reference-table) | Object | no | iOS/Android | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License(MIT)](https://github.com/galio-org/galio/blob/master/LICENSE.md)，请自由地享受和参与开源。 + diff --git a/en/gorhom-bottom-sheet.md b/en/gorhom-bottom-sheet.md new file mode 100644 index 00000000..b174abf7 --- /dev/null +++ b/en/gorhom-bottom-sheet.md @@ -0,0 +1,269 @@ +> 模板版本：v0.2.2 + +

+

@gorhom/bottom-sheet

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-bottom-sheet) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/bottom-sheet Releases](https://github.com/react-native-oh-library/react-native-bottom-sheet/releases)，并下载适用版本的 tgz 包。 + + + +#### npm + +```bash +npm install @react-native-oh-tpl/bottom-sheet@file:# +``` + +#### yarn + +```bash +yarn add @react-native-oh-tpl/bottom-sheet@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +```jsx +// bottom-sheet组件 +import React, { useCallback, useRef, useMemo } from "react"; +import { StyleSheet, View, Text, Button } from "react-native"; +import BottomSheet, { BottomSheetView } from "@gorhom/bottom-sheet"; + +const App = () => { + // hooks + const sheetRef = useRef(null); + + // variables + const snapPoints = useMemo(() => ["25%", "50%", "90%"], []); + + // callbacks + const handleSheetChange = useCallback((index) => { + console.log("handleSheetChange", index); + }, []); + const handleSnapPress = useCallback((index) => { + sheetRef.current?.snapToIndex(index); + }, []); + const handleClosePress = useCallback(() => { + sheetRef.current?.close(); + }, []); + + // render + return ( + + + + + ) + } + const styles = StyleSheet.create({ + container: { + alignItems: "center", + justifyContent: "center", + backgroundColor:"#fff", + + } + }); +``` +## Link + +本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-svg-capi.md#link)进行引入 + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.27; SDK: HarmonyOS-NEXT-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.29; + +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 Yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----------------: | :----------------------------------------------------------: | :-----------------: | :------: | :---------: | :---------------: | +| colors | colors prop is either:(Single valid color in any format or URL to a gradient;Array of colors in HEX format. At least 2 colors should be provided) | `string & string[]` | No | Android/iOS | Yes | +| colorsTime | Indicates the time when a color should switch to the next color. The first number is the countdown duration and the last one is 0 or goal. Works only when colors is an array of HEX colors | number[] | No | Android/iOS | Yes | +| isPlaying | Play or pause animation | boolean | No | Android/iOS | Yes | +| initialRemainingTime | Set the initial remaining time if it is different than the duration | number | No | Android/iOS | Yes | +| updateInterval | Update interval in seconds. Determines how often the timer updates. When set to 0 the value will update on each key frame | number | No | Android/iOS | Yes | +| size | Width and height of the SVG element | number | No | Android/iOS | Yes | +| strokeWidth | Path stroke width | number | No | Android/iOS | Yes | +| trailStrokeWidth | Trail stroke width | number | No | Android/iOS | Yes | +| strokeLinecap | Path stroke line cap | `round 、 square 、 butt` | No | Android/iOS | Yes | +| rotation | Progress path rotation direction| `clockwise 、 counterclockwise` | No | Android/iOS | Yes | +| isGrowing | Indicated if the progress path should be growing instead of shrinking | boolean | No | Android/iOS | Yes | +| trailColor | Circle trail color - takes any valid color format| string | No | Android/iOS | Yes | +| isSmoothColorTransition |Indicates if the colors should smoothly transition to the next color | boolean | No | Android/iOS | Yes | +| children | Render function to customize the time/content in the center of the circle | function | No | Android/iOS |Yes +| onComplete | On animation complete event handler | function | No | Android/iOS | Yes | +| onUpdate | On remaining time update event handler | function | No | Android/iOS | Yes | + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/vydimitrov/react-countdown-circle-timer/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-i18next.md b/en/react-i18next.md new file mode 100644 index 00000000..48b8167a --- /dev/null +++ b/en/react-i18next.md @@ -0,0 +1,115 @@ + +> 模板版本：v0.1.3 + +

+

react-i18next

+

+

+ + License + +

+ +> [!tip] [Github 地址](https://github.com/i18next/react-i18next) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash + +npm install i18next@^23.2.3 +npm install react-i18next@^14.0.0 + +``` + +#### **yarn** + +```bash + +yarn add i18next@^23.2.3 +yarn add react-i18next@^14.0.0 + +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React from "react"; +import { createRoot } from "react-dom/client"; +import i18n from "i18next"; +import { useTranslation, initReactI18next } from "react-i18next"; + +i18n + .use(initReactI18next) // passes i18n down to react-i18next + .init({ + // the translations + // (tip move them in a JSON file and import them, + // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui) + resources: { + en: { + translation: { + "Welcome to React": "Welcome to React and react-i18next", + }, + }, + }, + lng: "en", // if you're using a language detector, do not define the lng option + fallbackLng: "en", + + interpolation: { + escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape + }, + }); + +function App() { + const { t } = useTranslation(); + + return

{t("Welcome to React")}

; +} + +// append app to dom +const root = createRoot(document.getElementById("root")); +root.render(); +``` + +## 约束与限制 + +### 兼容性 + +在下述版本验证通过： + +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; +2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情见 [react-i18next源库地址](https://github.com/i18next/react-i18next) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- | +| initReactI18next | we pass the i18n instance to react-i18next which will make it available for all the components. | function | no | / | yes | +| useTranslation | It gets the t function and i18n instance inside your functional component. | function | no | / | yes | +| withTranslation | The withTranslation is a classic HOC (higher order component) and gets the t function and i18n instance inside your component via props. | function | no | / | yes | +| Translation | The Translation is a render prop and gets the t function and i18n instance to your component. | function | no | / | yes | +| Trans | The Trans component is the best way to translate a JSX tree in one translation. This enables you to eg. easily translate text containing a link component or formatting | function | no | / | yes | +| I18nextProvider | The I18nextProvider does take an i18next instance via prop i18n and passes that down using the context API. | function | no | / | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/i18next/react-i18next/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-lifecycles-compat.md b/en/react-lifecycles-compat.md new file mode 100644 index 00000000..e952c0dd --- /dev/null +++ b/en/react-lifecycles-compat.md @@ -0,0 +1,180 @@ + +> 模板版本：v0.2.2 + +

+

react-lifecycles-compat

+

+

+ + Supported platforms + + + License + +

+ + + + +> [!TIP] [Github 地址](https://github.com/reactjs/react-lifecycles-compat) + +## 安装与使用 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install react-lifecycles-compat@3.0.4 +``` + +#### **yarn** + +```bash +yarn add react-lifecycles-compat@3.0.4 +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React from "react"; +import { Text, View, Button } from "react-native"; +import { polyfill } from "react-lifecycles-compat"; +import { State } from "react-native-gesture-handler"; +class ShowComponent extends React.Component { + render() { + return ( + + + 新组件 + + + ); + } +} +class ExampleComponent extends React.Component { + state = { + Text1: "未执行", + count1: 0, + Text2: "未执行", + visible: false, + }; + static getDerivedStateFromProps = (nextProps, prevState) => { + // Normally this method would only work for React 16.3 and newer, + // But the polyfill will make it work for older versions also! + return { Text1: "已执行", count1: prevState.count1 + 1 }; + }; + + getSnapshotBeforeUpdate(prevProps, prevState) { + // Normally this method would only work for React 16.3 and newer, + // But the polyfill will make it work for older versions also! + return true; + } + componentDidUpdate(prevProps, prevState, snapshot) { + if (snapshot) { + if (this.state.Text2 !== "已执行") { + this.setState({ + Text2: "已执行", + }); + } + } + } + // render() and other methods ... + handleClick = () => { + this.setState({ visible: true }); + }; + render() { + const { visible, Text1, Text2, count1 } = this.state; + return ( + + + {visible ? : {visible}} + + + getDerivedStateFromProps生命周期会在React初始化挂载和后续更新时调用render之前调用，返回一个对象来更新state，或者返回null就不更新任何内容 + + + getSnapshotBeforeUpdate生命周期会在React更新DOM之前时直接调用，使你的组件能够在DOM发生更改之前捕获一些信息 + + + + + + + + + + + + + + + {this.state.playTime} / {this.state.duration} + + + + + + + + + + ); + } + + private onStatusPress = (e: any): void => { + const touchX = e.nativeEvent.locationX; + console.log(`touchX: ${touchX}`); + + const playWidth = + (this.state.currentPositionSec / this.state.currentDurationSec) * + (screenWidth - 56); + console.log(`currentPlayWidth: ${playWidth}`); + + const currentPosition = Math.round(this.state.currentPositionSec); + + if (playWidth && playWidth < touchX) { + const addSecs = Math.round(currentPosition + 1000); + this.audioRecorderPlayer.seekToPlayer(addSecs); + console.log(`addSecs: ${addSecs}`); + } else { + const subSecs = Math.round(currentPosition - 1000); + this.audioRecorderPlayer.seekToPlayer(subSecs); + console.log(`subSecs: ${subSecs}`); + } + }; + + private onStartRecord = async (): Promise => { + + const audioSet: AudioSet = { + AudioEncoderAndroid: AudioEncoderAndroidType.AAC, + AudioSourceAndroid: AudioSourceAndroidType.MIC, + AVEncoderAudioQualityKeyIOS: AVEncoderAudioQualityIOSType.high, + AVNumberOfChannelsKeyIOS: 2, + AVFormatIDKeyIOS: AVEncodingOption.aac, + OutputFormatAndroid: OutputFormatAndroidType.AAC_ADTS, + AudioSourceHarmony: AudioSourceHarmonyType.MIC, + AudioMimeHarmony: AudioMimeHarmonyType.AUDIO_AAC, + AudioFileFormatHarmony: AudioFormatHarmonyType.MPEG_4A, + AudioEncodingBitRateHarmony: 3200, + AudioSamplingRateHarmony: 44100, + AudioChannelsHarmony: 2, + }; + + console.log('audioSet', audioSet); + + const uri = await this.audioRecorderPlayer.startRecorder( + 'audio.m4a', + audioSet, + ); + + this.audioRecorderPlayer.addRecordBackListener((e: RecordBackType) => { + console.log('record-back', e); + this.setState({ + recordSecs: e.currentPosition, + recordTime: this.audioRecorderPlayer.mmssss( + Math.floor(e.currentPosition), + ), + }); + }); + + console.log(`uri: ${uri}`); + }; + + private onPauseRecord = async (): Promise => { + try { + const r = await this.audioRecorderPlayer.pauseRecorder(); + console.log(r); + } catch (err) { + console.log('pauseRecord', err); + } + }; + + private onResumeRecord = async (): Promise => { + await this.audioRecorderPlayer.resumeRecorder(); + }; + + private onStopRecord = async (): Promise => { + const result = await this.audioRecorderPlayer.stopRecorder(); + this.audioRecorderPlayer.removeRecordBackListener(); + this.setState({ + recordSecs: 0, + }); + console.log(result, '>>>>>>>stopRecorder'); + }; + + private onStartPlay = async (): Promise => { + console.log('onStartPlay'); + + try { + + + const msg = await this.audioRecorderPlayer.startPlayer('https://sis-sample-audio.obs.cn-north-1.myhuaweicloud.com/16k16bit.mp3', { 'User-Agent': 'Mozilla/5.0 (X11; Linux x86_64; rv:12.0) Gecko/20100101 Firefox/21.0' }); + const volume = await this.audioRecorderPlayer.setVolume(1); + this.audioRecorderPlayer.addPlayBackListener((e: PlayBackType) => { + console.log('playBackListener', e); + this.setState({ + currentPositionSec: e.currentPosition, + currentDurationSec: e.duration, + playTime: this.audioRecorderPlayer.mmssss(e.currentPosition), + duration: this.audioRecorderPlayer.mmssss(Math.floor(e.duration)), + }); + }); + + } catch (err) { + console.log('startPlayer error', err); + } + }; + + private onPausePlay = async (): Promise => { + await this.audioRecorderPlayer.pausePlayer(); + }; + + private onResumePlay = async (): Promise => { + await this.audioRecorderPlayer.resumePlayer(); + }; + + private onStopPlay = async (): Promise => { + console.log('onStopPlay'); + this.audioRecorderPlayer.stopPlayer(); + this.audioRecorderPlayer.removePlayBackListener(); + }; +} + +export default Page; + +``` +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!tip] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-oh-tpl/react-native-audio-recorder-player": "file:../../node_modules/@react-native-oh-tpl/react-native-audio-recorder-player/harmony/audio_recorder_player.har" + } +``` +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` +方法二：直接链接源码 + +> [!tip] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 配置 CMakeLists 和引入 RNAudioRecorderPlayerPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-audio-recorder-player/src/main/cpp" ./audio_recorder_player) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_audio_recorder_player) +# RNOH_END: manual_package_linking_2 +``` +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "RNAudioRecorderPlayerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` +### 在 ArkTs 侧引入 react-native-audio-recorder-player Package + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff ++ import {RNAudioRecorderPlayerPackage} from '@react-native-oh-tpl/react-native-audio-recorder-player/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNAudioRecorderPlayerPackage(ctx) + ]; +} +``` +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-audio-recorder-player Releases](https://github.com/react-native-oh-library/react-native-audio-recorder-player/releases) + +### 权限要求 + +#### 在 entry 目录下的module.json5中添加权限 + +打开 `entry/src/main/module.json5`，添加： + +```diff +... +"requestPermissions": [ ++ {"name": "ohos.permission.INTERNET"},//网络播放音频需添加 ++ { ++ "name": "ohos.permission.MICROPHONE", ++ "reason": "$string:Access_Create_Audio", ++ "usedScene": { ++ "abilities": [ ++ "EntryAbility" ++ ], ++ "when": "always" ++ } ++ }, + ] +] +``` +#### 在 entry 目录下添加申请权限的原因 + +打开 `entry/src/main/resources/base/element/string.json`，添加： + +```diff +... +{ + "string": [ ++ { ++ "name": "Access_Create_Audio", ++ "value": "access create Audio" ++ }， + ] +} +``` +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| `mmss` | Convert milliseconds to minute:second string | function(milliseconds:number): string | No | Android，iOS | yes | +| `mmssss` | Convert milliseconds to minute:second:milliseconds string | function(milliseconds:number): string | No | Android，iOS | yes | +| `setSubscriptionDuration` | Set default callback time when starting recorder or player. Default to 0.5 which is 500ms| function(seconds:float):void | No | Android，iOS | yes | +| `addRecordBackListener` |Get callback from native module. Will receive currentPosition, currentMetering (if configured in startRecorder). | function(callBack:(value:RecordBackType)=>void): void | No | Android，iOS | yes | +| `removeRecordBackListener` |Removes recordBack listener. | function(): void | No | Android，iOS | yes | +| `addPlayBackListener` | Get callback from native module. Will receive duration, currentPosition. | function(callBack:(value: PlayBackType)=>void): void | No | Android，iOS | yes | +| `removePlayBackListener` | Removes playback listener. | function(): void | No | Android，iOS | yes | +| `startRecorder` |Start recording. Not passing uri will save audio in default location. | function(uri?:string,audioSets?: AudioSet,meteringEnabled?: boolean): Promise< string > | No | Android，iOS | yes | +| `pauseRecorder` | Pause recording. | function() : Promise< string > | No | Android，iOS | yes | +| `resumeRecorder` | Resume recording. | function() : Promise< string > | No | Android，iOS | yes | +| `stopRecorder` | Stop recording. | function() : Promise< string > | No | Android，iOS | yes | +| `startPlayer` | Start playing. Not passing the param will play audio in default location. | function(uri?:string,httpHeaders?:Record) : Promise< string > | No | Android，iOS | yes | +| `stopPlayer` | Stop playing. | function() : Promise< string > | No | Android，iOS | yes | +| `pausePlayer` | Pause playing. | function() : Promise< string > | No | Android，iOS | yes | +| `resumePlayer` | Resume playing. | function() : Promise< string > | No | Android，iOS | yes | +| `seekToPlayer` | Seek audio. | function(milliseconds:number) : Promise< string > | No | Android，iOS | yes | +| `setVolume` | Set volume of audio player (default 1.0, range: 0.0 ~ 1.0). | function(volume:float) : Promise< string > | No | Android，iOS | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/hyochan/react-native-audio-recorder-player/blob/main/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-audio-toolkit.md b/en/react-native-audio-toolkit.md new file mode 100644 index 00000000..059cd5f1 --- /dev/null +++ b/en/react-native-audio-toolkit.md @@ -0,0 +1,615 @@ + + +> 模板版本：v0.2.2 + +

+

@react-native-community/audio-toolkit

+

+

+ + Supported platforms + + + License + +

+ + +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-audio-toolkit) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/audio-toolkit Releases](https://github.com/react-native-oh-library/react-native-audio-toolkit/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/audio-toolkit@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/audio-toolkit@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +> [!TIP] # demo使用了三方库[@react-native-oh-tpl/react-native-slider](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-slider.md) + +> [!TIP] # demo使用了权限三方库[@react-native-oh-tpl/react-native-permissions](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-permissions.md) + +```tsx +import React, { Component } from 'react'; +import { Button, PermissionsAndroid, Platform, StyleSheet, Switch, Text, View, ScrollView } from 'react-native'; +import Slider from '@react-native-oh-tpl/react-native-slider'; +import { Player, Recorder, MediaStates } from '@react-native-community/audio-toolkit'; +import RTNPermissions, {RESULTS} from "@react-native-oh-tpl/react-native-permissions"; + +const filename = 'test.mp4'; + + +type Props = {}; + +type State = { + playPauseButton: string, + recordButton: string, + + stopButtonDisabled: boolean, + playButtonDisabled: boolean | undefined, + recordButtonDisabled: boolean, + + recordPauseButtonDisabled: boolean, + + loopButtonStatus: boolean, + progress: number, + + error: string | null +}; + +export default class App extends Component { + player: Player | null = null; + recorder: Recorder | null = null; + lastSeek: number = 0; + _progressInterval: NodeJS.Timeout | null = null; + + constructor(props: Props) { + super(props); + + this.state = { + playPauseButton: 'Preparing...', + recordButton: 'Preparing...', + + stopButtonDisabled: true, + playButtonDisabled: true, + recordButtonDisabled: true, + recordPauseButtonDisabled:true, + + loopButtonStatus: false, + progress: 0, + + error: null + }; + } + + componentWillMount() { + this.player = null; + this.recorder = null; + this.lastSeek = 0; + this._reloadPlayer(); + this._reloadRecorder(); + + this._progressInterval = setInterval(() => { + if (this.player && this._shouldUpdateProgressBar()) { + let currentProgress = Math.max(0, this.player.currentTime) / this.player.duration; + if (isNaN(currentProgress)) { + currentProgress = 0; + } + this.setState({ progress: currentProgress }); + } + }, 100); + } + + componentWillUnmount() { + if (this._progressInterval) { + clearInterval(this._progressInterval); + } + } + + _shouldUpdateProgressBar() { + // Debounce progress bar update by 200 ms + return Date.now() - this.lastSeek > 200; + } + + _updateState() { + + this.setState({ + playPauseButton: this.player && this.player.isPlaying ? 'Pause' : 'Play', + recordButton: this.recorder && this.recorder.isRecording ? 'Stop' : 'Record', + + recordPauseButtonDisabled: !this.recorder || !this.recorder.isRecording, + + stopButtonDisabled: !this.player || !this.player.canStop, + playButtonDisabled: !this.player || !this.player.canPlay || this.recorder?.isRecording, + recordButtonDisabled: (!this.recorder || (this.player && !this.player.isStopped)) ?? true, + }); + } + + _playPause() { + this.player?.playPause((err, paused) => { + if (err) { + this.setState({ + error: err.message + }); + } + this._updateState(); + }); + } + + _stop() { + this.player?.stop(() => { + this._updateState(); + }); + } + + _seek(percentage: number) { + if (!this.player) { + return; + } + + this.lastSeek = Date.now(); + let position = percentage * this.player.duration; + + this.player.seek(position, () => { }); + } + + _getPlayPath() { + if (this.recorder) { + return this.recorder.fsPath; + } + return filename; + } + + _reloadPlayer() { + if (this.player) { + this.player.destroy(); + } + this.player = new Player(this._getPlayPath(), { + autoDestroy: false + }).prepare((err) => { + if (err) { + console.log('error at _reloadPlayer():'); + console.log(err); + } else { + if (this.player) { + this.player.looping = this.state.loopButtonStatus; + } + } + + this._updateState(); + }); + + this._updateState(); + + this.player.on('ended', () => { + this._updateState(); + }); + this.player.on('pause', () => { + this._updateState(); + }); + } + + _reloadRecorder() { + if (this.recorder) { + this.recorder.destroy(); + } + + this.recorder = new Recorder(filename, { + bitrate: 256000, + channels: 2, + sampleRate: 44100, + quality: 'max' + }); + + this._updateState(); + } + + _toggleRecord() { + if(this.recorder && this.recorder.state === MediaStates.PAUSED){ + this.recorder?.record((err) => { + this._updateState(); + }) + return + } + if (this.player) { + this.player.destroy(); + } + + let recordAudioRequest; + if (Platform.OS == 'android') { + recordAudioRequest = this._requestRecordAudioPermission(); + } else if (Platform.OS === 'harmony') { + recordAudioRequest = this._requestRecordAudioPermissionHs(); + } else { + recordAudioRequest = new Promise(function (resolve, reject) { resolve(true); }); + } + + recordAudioRequest.then((hasPermission) => { + if (!hasPermission) { + this.setState({ + error: 'Record Audio Permission was denied' + }); + return; + } + + this.recorder?.toggleRecord((err, stopped) => { + if (err) { + this.setState({ + error: err.message + }); + } + if (stopped) { + this._reloadPlayer(); + this._reloadRecorder(); + } + this._updateState(); + }); + }); + } + + + async _requestRecordAudioPermissionHs() { + try { + let check = await RTNPermissions.request('ohos.permission.MICROPHONE'); + console.info("RTNPermissions===== request", check); + if (check === RESULTS.GRANTED) { + return true; + } else { + return false; + } + } catch (err) { + console.error(err); + return false; + } + } + + async _requestRecordAudioPermission() { + try { + const granted = await PermissionsAndroid.request( + PermissionsAndroid.PERMISSIONS.RECORD_AUDIO, + { + title: 'Microphone Permission', + message: 'ExampleApp needs access to your microphone to test react-native-audio-toolkit.', + buttonNeutral: 'Ask Me Later', + buttonNegative: 'Cancel', + buttonPositive: 'OK', + }, + ); + if (granted === PermissionsAndroid.RESULTS.GRANTED) { + return true; + } else { + return false; + } + } catch (err) { + console.error(err); + return false; + } + } + + _toggleLooping(value: boolean) { + this.setState({ + loopButtonStatus: value + }); + if (this.player) { + this.player.looping = value; + } + } + + render() { + return ( + + + + Playback + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + }; + + return ( + + + BleManager + + + + + + + + + + + + + + item.id} + style={{ width: '100%' }} + /> + + ) +} + +const boxShadow = { + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, +}; + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + flexDirection: 'column', + alignItems: 'center', + backgroundColor: '#F1F3F5', + }, + baseText: { + width: '100%', + height: '100%', + fontWeight: 'bold', + textAlign: 'center', + fontSize: 16, + ellipsizeMode: 'tail', + numberOfLines: 2 + }, + titleArea: { + width: '90%', + height: '8%', + alignItems: 'center', + flexDirection: 'row', + }, + title: { + width: '90%', + color: '#000000', + textAlign: "center", + fontSize: 30, + border:5, + }, + scrollView: { + width: '90%', + marginHorizontal: 10, + }, + + inputArea: { + width: '90%', + height: '10%', + borderWidth: 2, + borderColor: '#000000', + marginTop: 8, + justifyContent: 'center', + alignItems: 'center', + }, + baseArea: { + width: '100%', + height: 60, + borderRadius: 4, + borderColor: '#000000', + marginTop: 6, + backgroundColor: '#FFFFFF', + flexDirection: 'row', + alignItems: 'center', + paddingLeft: 8, + paddingRight: 8 + }, + engine: { + position: 'absolute', + right: 10, + bottom: 0, + color: Colors.black, + }, + buttonGroup: { + flexDirection: 'row', + width: '100%' + }, + scanButton: { + alignItems: 'center', + justifyContent: 'center', + paddingVertical: 16, + paddingHorizontal: 16, + backgroundColor: '#0a398a', + margin: 10, + borderRadius: 12, + flex: 1, + ...boxShadow, + }, + scanButtonText: { + fontSize: 16, + letterSpacing: 0.25, + color: Colors.white, + }, + body: { + backgroundColor: '#0082FC', + flex: 1, + }, + sectionContainer: { + marginTop: 32, + paddingHorizontal: 24, + }, + sectionTitle: { + fontSize: 24, + fontWeight: '600', + color: Colors.black, + }, + sectionDescription: { + marginTop: 8, + fontSize: 18, + fontWeight: '400', + color: Colors.dark, + }, + highlight: { + fontWeight: '700', + }, + footer: { + color: Colors.dark, + fontSize: 12, + fontWeight: '600', + padding: 4, + paddingRight: 12, + textAlign: 'right', + }, + peripheralName: { + fontSize: 16, + textAlign: 'center', + padding: 10, + }, + rssi: { + fontSize: 12, + textAlign: 'center', + padding: 2, + }, + peripheralId: { + fontSize: 12, + textAlign: 'center', + padding: 2, + paddingBottom: 20, + }, + row: { + marginLeft: 10, + marginRight: 10, + borderRadius: 20, + ...boxShadow, + alignItems: 'center' + }, + noPeripherals: { + margin: 10, + textAlign: 'center', + color: Colors.white, + }, +}); +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md)。 + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +>[!TIP] 因本库需要两台手机去进行对端扫描和连接，所以两台手机各装一个har包编译（`ble_managerGatt.har` 和 `ble_managerServers.har`） + +第一台手机：`ble_managerGatt.har` + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-ble-manager": "file:../../node_modules/@react-native-oh-tpl/react-native-ble-manager/harmony/ble_managerGatt.har"， + } +``` + +第二台手机：`ble_managerServers.har` + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-ble-manager": "file:../../node_modules/@react-native-oh-tpl/react-native-ble-manager/harmony/ble_managerServers.har"， + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 BlePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { BlePackage } from '@react-native-oh-tpl/react-native-ble-manager/ts'; + + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new BlePackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-ble-manager Releases](https://github.com/react-native-oh-library/react-native-ble-manager/releases) + +### 权限要求 + +- 由于此库涉及蓝牙系统控制功能，使用对应接口时则需要配置对应的权限，权限需配置在entry/src/main目录下module.json5文件中。其中部分权限需弹窗向用户申请授权。具体权限配置见文档：[程序访问控制](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/Readme-CN.md#/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/app-permission-mgmt-overview.md)。 + +- 此库部分功能与接口需要normal权限：ohos.permission.ACCESS_BLUETOOTH。 + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Required | Platform | HarmonyOS Support | +| -------------------------------------------- | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| start | Init the module. Returns a `Promise` object. Don’t call this multiple times. | No | IOS/Android | Yes | +| scan | Scan for available peripherals | No | IOS/Android | Yes | +| stopScan | Stop the scanning | No | IOS/Android | yes | +| connect | Attempts to connect to a peripheral. In many case if you can’t connect you have to scan for the peripheral before | No | IOS/Android | Yes | +| disconnect | Disconnect from a peripheral | No | IOS/Android | Yes | +| enableBluetooth | Create the ACTION_REQUEST_ENABLE to ask the user to activate the bluetooth | No | Android | Yes | +| checkState | Force the module to check the state of the native BLE manager and trigger a BleManagerDidUpdateState event | No | IOS/Android | Yes | +| readRSSI | Read the current value of the RSSI | No | IOS/Android | Yes | +| createBond | Start the bonding (pairing) process with the remote device | No | Android | Yes | +| retrieveServices | Retrieve the peripheral’s services and characteristics | No | IOS/Android | Yes | +| startNotification | Start the notification on the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | Yes | +| read | Read the current value of the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | Yes | +| write | Write with response to the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | Yes | +| readDescriptor | Read the current value of the specified descriptor, you need to call `retrieveServices` method before | No | IOS/Android | Yes | +| writeDescriptor | Write a value to the specified descriptor, you need to call `retrieveServices` method before | No | IOS/Android | Yes | +| requestMTU | Request an MTU size used for a given connection | No | Android | Yes | +| getConnectedPeripherals | Return the connected peripherals | No | IOS/Android | Yes | +| getBondedPeripherals | Return the bonded peripherals | No | IOS/Android | Yes | +| getDiscoveredPeripherals | Return the discovered peripherals after a scan | No | IOS/Android | Yes | +| removeBond | Remove a paired device | No | Android | No | +| refreshCache | refreshes the peripheral’s services and characteristics cache Returns a `Promise` object. | No | Android | No | +| requestConnectionPriority | Request a connection parameter update | No | Android | No | +| startNotificationUseBuffer | Start the notification on the specified characteristic, you need to call `retrieveServices` method before | No | Android | No | +| removePeripheral | Removes a disconnected peripheral from the cached list | No | Android | Yes | +| CompanionScan | Scan for companion devices | No | Android | No | +| getAssociatedPeripherals | Retrive associated peripherals (from companion manager) | No | Android | No | +| removeAssociatedPeripheral | Remove a associated peripheral | No | Android | No | +| setName | Create the request to set the name of the bluetooth adapter | No | Android | No | +| isScanning | Checks whether the scan is in progress and return `true` or `false` | No | IOS/Android | Yes | +| writeWithoutResponse | Write without response to the specified characteristic, you need to call `retrieveServices` method before | No | IOS/Android | No | +| getMaximumWriteValueLengthForWithoutResponse | Return the maximum value length for WriteWithoutResponse | No | IOS | No | +| getMaximumWriteValueLengthForWithResponse | Return the maximum value length for WriteWithResponse | No | IOS | No | +| isPeripheralConnected | Check whether a specific peripheral is connected and return `true` or `false` | No | IOS | Yes | +| supportsCompanion | Check if current device supports companion device manager | No | Android | No | +| stopNotification | Stop the notification on the specified characteristic | No | IOS/Android | No | + +## 遗留问题 + +- [ ] refreshCache 用于清理和刷新蓝牙设备缓存的一部分 [issue#3](https://github.com/react-native-oh-library/react-native-ble-manager/issues/3) +- [ ] requestConnectionPriority 用于请求蓝牙连接优先级 [issue#4](https://github.com/react-native-oh-library/react-native-ble-manager/issues/4) +- [ ] startNotificationUseBuffer 用来启动一个带缓冲区的通知服务 [issue#6](https://github.com/react-native-oh-library/react-native-ble-manager/issues/6) +- [ ] CompanionScan 扫描配套设备[issue#5](https://github.com/react-native-oh-library/react-native-ble-manager/issues/5) +- [ ] getAssociatedPeripherals 检索相关外围设备（从配套管理器） [issue#7](https://github.com/react-native-oh-library/react-native-ble-manager/issues/7) +- [ ] removeAssociatedPeripheral 移除相关外围设备 [issue#8](https://github.com/react-native-oh-library/react-native-ble-manager/issues/8) +- [ ] setName 创建设置蓝牙适配器名称 [issue#9](https://github.com/react-native-oh-library/react-native-ble-manager/issues/9) +- [ ] supportsCompanion 检查当前设备是否支持配套设备管理器 [issue#10](https://github.com/react-native-oh-library/react-native-ble-manager/issues/10) +- [ ] stopNotification 停止指定特征的通知 [issue#11](https://github.com/react-native-oh-library/react-native-ble-manager/issues/11) +- [ ] writeWithoutResponse 写入不响应指定特性 [issue#12](https://github.com/react-native-oh-library/react-native-ble-manager/issues/12) +- [ ] removeBond 删除已配对的设备 [issue#13](https://github.com/react-native-oh-library/react-native-ble-manager/issues/13) +- [ ] getMaximumWriteValueLengthForWithoutResponse 用于获取在不带响应的情况下可以写入的最大数据长度 [issue#14](https://github.com/react-native-oh-library/react-native-ble-manager/issues/14) +- [ ] getMaximumWriteValueLengthForWithResponse 它用于获取在带有响应的情况下可以写入的最大数据长度 [issue#15](https://github.com/react-native-oh-library/react-native-ble-manager/issues/15) + +## 其他 + +## 开源协议 + +本项目基于[The MIT License (MIT)](https://github.com/innoveit/react-native-ble-manager/blob/master/LICENSE) ，请自由地享受和参与开源。 + + + diff --git a/en/react-native-ble-plx.md b/en/react-native-ble-plx.md new file mode 100644 index 00000000..b93aff25 --- /dev/null +++ b/en/react-native-ble-plx.md @@ -0,0 +1,310 @@ + +> 模板版本：v0.2.2 + +

+

react-native-ble-plx

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-ble-plx) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-ble-plx Releases](https://github.com/react-native-oh-library/react-native-ble-plx/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-ble-plx@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-ble-plx@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import { + BleError, + BleErrorCode, + BleManager, + Device, + State as BluetoothState, + LogLevel, + type DeviceId, + type TransactionId, + type UUID, + type Characteristic, + type Base64, + type Subscription +} from 'react-native-ble-plx' + +class BLEServiceInstance { + manager: BleManager + device: Device | null + + constructor() { + this.device = null + this.manager = new BleManager() + } + + scanDevices = async (onDeviceFound: (device: Device) => void, UUIDs: UUID[] | null = null) => { + this.manager.startDeviceScan(UUIDs, null, (error, device) => { + if (error) { + console.error(error.message) + this.manager.stopDeviceScan() + return + } + if (device) { + onDeviceFound(device) + } + }) + } + + connectToDevice = (deviceId: DeviceId) => + new Promise((resolve, reject) => { + this.manager.stopDeviceScan() + this.manager + .connectToDevice(deviceId) + .then(device => { + this.device = device + resolve(device) + }) + .catch(error => { + if (error.errorCode === BleErrorCode.DeviceAlreadyConnected && this.device) { + resolve(this.device) + } else { + console.error(error.message) + reject(error) + } + }) + }) + + discoverAllServicesAndCharacteristicsForDevice = async () => + new Promise((resolve, reject) => { + if (!this.device) { + reject(new Error(deviceNotConnectedErrorText)) + return + } + this.manager + .discoverAllServicesAndCharacteristicsForDevice(this.device.id) + .then(device => { + resolve(device) + this.device = device + }) + .catch(error => { + reject(error) + }) + }) + + readCharacteristicForDevice = async (serviceUUID: UUID, characteristicUUID: UUID) => + new Promise((resolve, reject) => { + if (!this.device) { + reject(new Error(deviceNotConnectedErrorText)) + return + } + this.manager + .readCharacteristicForDevice(this.device.id, serviceUUID, characteristicUUID) + .then(characteristic => { + resolve(characteristic) + }) + .catch(error => { + console.error(error.message) + }) + }) + + writeCharacteristicWithResponseForDevice = async (serviceUUID: UUID, characteristicUUID: UUID, time: Base64) => { + if (!this.device) { + console.error(deviceNotConnectedErrorText) + throw new Error(deviceNotConnectedErrorText) + } + return this.manager + .writeCharacteristicWithResponseForDevice(this.device.id, serviceUUID, characteristicUUID, time) + .catch(error => { + console.error(error.message) + }) + } +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-ble-plx": "file:../../node_modules/@react-native-oh-tpl/react-native-ble-plx/harmony/rn_bleplx.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 BlePlxPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import {BlePlxPackage} from '@react-native-oh-tpl/react-native-ble-plx/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new BlePlxPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-ble-plx Releases](https://github.com/react-native-oh-library/react-native-ble-plx/releases) + +### 权限要求 + +- 由于此库涉及蓝牙系统控制功能，使用对应接口时则需要配置对应的权限，权限需配置在entry/src/main目录下module.json5文件中。其中部分权限需弹窗向用户申请授权。具体权限配置见文档：[程序访问控制](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/Readme-CN.md#/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/app-permission-mgmt-overview.md)。 + +- 此库部分功能与接口需要normal权限：ohos.permission.ACCESS_BLUETOOTH。 + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| createClient(restoreStateIdentifier?: string) | creat client | void | yes | iOS/Android | yes | +| destroyClient() | remove client | Promise | yes | iOS/Android | yes | +| cancelTransaction(transactionId: string) | cancel transcation | Promise | yes | iOS/Android | no | +| setLogLevel(logLevel: string) | set log level | Promise | yes | iOS/Android | no | +| logLevel() | show log level | Promise | yes | iOS/Android | no | +| enable(transactionId: string) | can get transaction Id | Promise | yes | iOS/Android | yes | +| disable(transactionId: string) | cannot get transaction Id | Promise | yes | iOS/Android | yes | +| state() | bluetooth state | Promise | yes | iOS/Android | yes | +| startDeviceScan(filteredUUIDs: string[], options: Object) | start scan device | Promise| yes | iOS/Android | yes | +| stopDeviceScan() | stop scan device | Promise | yes | iOS/Android | yes | +| requestConnectionPriorityForDevice(deviceId: string, connectionPriority: number,transactionId: string) | request connect priority device | Promise | yes | iOS/Android | no | +| readRSSIForDevice(deviceId: string, transactionId: string) | read RSSI device | Promise | yes | iOS/Android | yes | +| requestMTUForDevice(deviceId: string, mtu: number, transactionId: string) | request MTU device | Promise | yes | iOS/Android | yes | +| devices(deviceIdentifiers: string[]) | identify devices | Promise | yes | iOS/Android | yes | +| connectedDevices(serviceUUIDs: string[]) | connect devices | Promise | yes | iOS/Android | yes | +| connectToDevice(deviceId: string, options?: Object) | option to connect device | Promise | yes | iOS/Android | yes | +| cancelDeviceConnection(deviceId: string) | cancel device connection | Promise | yes | iOS/Android | yes | +| isDeviceConnected(deviceId: string) | connected device | Promise | yes | iOS/Android | yes | +| discoverAllServicesAndCharacteristicsForDevice(deviceId: string, transactionId: string) | discover all device service and characteristics | Promise | yes | iOS/Android | yes | +| servicesForDevice(deviceId: string) | device service | Promise | yes | iOS/Android | yes | +| characteristicsForDevice(deviceId: string, serviceUUID: string) | device characteristics | Promise | yes | iOS/Android | yes | +| characteristicsForService(serviceIdentifier: number) | service characteristics | Promise | yes | iOS/Android | yes | +| descriptorsForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string): Promise | device descriptors | Promise | yes | iOS/Android | yes | +| descriptorsForService(serviceIdentifier: number, characteristicUUID: string) | service descriptors | Promise | yes | iOS/Android | yes | +| descriptorsForCharacteristic(characteristicIdentifier: number) |descriptors identifier device characteristic | Promise | yes | iOS/Android | yes | +| readCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, transactionId: string) | read device characteristic | Promise | yes | iOS/Android | yes | +| readCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | read service charcteristic | Promise | yes | iOS/Android | yes | +| readCharacteristic(characteristicIdentifier: number, transactionId: string) | read identifier characteristic | Promise | yes | iOS/Android | yes | +| writeCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write device characteristic | Promise | yes | iOS/Android | yes | +| writeCharacteristicForService(serviceIdentifier: number, characteristicUUID: string, valueBase64: string,response: boolean, transactionId: string) | write service characteristic | Promise | yes | iOS/Android | yes | +| writeCharacteristic(characteristicIdentifier: number, valueBase64: string, response: boolean,transactionId: string) | write identifier characteristic | Promise | yes | iOS/Android | yes | +| monitorCharacteristicForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string,transactionId: string) | monitor device characteristic | Promise | yes | iOS/Android | yes | +| monitorCharacteristicForService(serviceIdentifier: number, characteristicUUID: string,transactionId: string) | monitor service characteristic | Promise | yes | iOS/Android | yes | +| monitorCharacteristic(characteristicIdentifier: number, transactionId: string) | monitor identifier characteristic | Promise | yes | iOS/Android | yes | +| readDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read device descriptor | Promise | yes | iOS/Android | yes | +| readDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,transactionId: string) | read service descriptor | Promise | yes | iOS/Android | yes | +| readDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string,transactionId: string) | read identifier characteristic descriptor | Promise | yes | iOS/Android | yes | +| readDescriptor(descriptorIdentifier: number, transactionId: string) | read identifier descriptor | Promise | yes | iOS/Android | yes | +| writeDescriptorForDevice(deviceId: string, serviceUUID: string, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write device descriptor | Promise | yes | iOS/Android | yes | +| writeDescriptorForService(serviceIdentifier: number, characteristicUUID: string, descriptorUUID: string,valueBase64: string, transactionId: string) | write service descriptor | Promise | yes | iOS/Android | yes | +| writeDescriptorForCharacteristic(characteristicIdentifier: number, descriptorUUID: string, valueBase64: string,transactionId: string) | write identifier characteristic descriptor | Promise | yes | iOS/Android | yes | +| writeDescriptor(descriptorIdentifier: number, valueBase64: string, transactionId: string) | write identifier descriptor | Promise | yes | iOS/Android | yes | + +## 遗留问题 + +- [ ] cancelTransaction(transactionId: string)接口harmony暂不支持: [issue#2](https://github.com/react-native-oh-library/react-native-ble-plx/issues/2) +- [ ] setLogLevel(logLevel: string)接口harmony暂不支持: [issue#3](https://github.com/react-native-oh-library/react-native-ble-plx/issues/3) +- [ ] logLevel()接口harmony暂不支持: [issue#4](https://github.com/react-native-oh-library/react-native-ble-plx/issues/4) +- [ ] requestConnectionPriorityForDevice(deviceId: string, connectionPriority: number,transactionId: string)接口harmony暂不支持: [issue#5](https://github.com/react-native-oh-library/react-native-ble-plx/issues/5) + +## 其他 + +## 开源协议 + +本项目基于 [Apache License 2.0](https://github.com/dotintent/react-native-ble-plx/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-blob-util.md b/en/react-native-blob-util.md new file mode 100644 index 00000000..7ce24a58 --- /dev/null +++ b/en/react-native-blob-util.md @@ -0,0 +1,610 @@ +> 模板版本：v0.2.2 + +

+

react-native-blob-util

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-blob-util) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-blob-util@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-blob-util@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState } from "react"; +import { + ScrollView, + StyleSheet, + Button, + View, + Text, + NativeEventEmitter, +} from "react-native"; +import ReactNativeBlobUtil from "react-native-blob-util"; + +export default function BlobUtilDemo() { + const [result, setResult] = useState < string | null > (null); + const [mkdirParam, setMkdirParam] = useState(""); + + const createFile = async () => { + await ReactNativeBlobUtil.fs.createFile( + result + "/text.txt", + "123456", + "utf8" + ); + }; + + const ls = async () => { + await ReactNativeBlobUtil.fs.ls(ReactNativeBlobUtil.fs.dirs.CacheDir); + }; + + const createFileASCII = async () => { + await ReactNativeBlobUtil.fs.createFile( + result + "/text.txt", + [102, 111, 111], + "ascii" + ); + }; + + const unlink = () => { + ReactNativeBlobUtil.fs.unlink(result + "/text.txt"); + }; + + const getConstants = () => { + let obj = ReactNativeBlobUtil.fs.dirs.CacheDir; + setResult(obj); + }; + + const writeFile = () => { + ReactNativeBlobUtil.fs.writeFile( + result + "/text.txt", + "Try to write str", + "utf8" + ); + }; + + const writeStream = () => { + ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false); + }; + + const writeArrayChunk = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "ascii", false) + .then((reactNativeBlobUtilWriteStream) => { + reactNativeBlobUtilWriteStream.encoding = "ascii"; + reactNativeBlobUtilWriteStream.write(["101", "32", "97"]); + }); + }; + + const writeChunk = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "utf8", false) + .then((reactNativeBlobUtilWriteStream) => { + reactNativeBlobUtilWriteStream.write("Zm9vIChXcml0ZSBCYXNlNjQpMQ=="); + }); + }; + + const closeStream = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "utf8", false) + .then((reactNativeBlobUtilWriteStream) => { + setTimeout(() => { + reactNativeBlobUtilWriteStream.close(); + }, 1000); + }); + }; + const readStream = () => { + ReactNativeBlobUtil.fs.readStream(result + "/text.txt", "utf8", 4000, 200); + }; + + const mkdir = () => { + ReactNativeBlobUtil.fs.mkdir( + ReactNativeBlobUtil.fs.dirs.DocumentDir + "/" + mkdirParam + ); + }; + + const stat = () => { + ReactNativeBlobUtil.fs.stat(result + "/text.txt"); + }; + + const copyFileToCache = () => { + ReactNativeBlobUtil.fs.cp(result + "/text.txt", result + "/text1.txt"); + }; + + const writeFileArray = () => { + ReactNativeBlobUtil.fs.writeFile( + result + "/text.txt", + [102, 111, 111], + "ascii" + ); + }; + + const exists = () => { + ReactNativeBlobUtil.fs.exists(result + "/text.txt"); + }; + + const lstat = () => { + ReactNativeBlobUtil.fs.lstat(result + "/text.txt"); + }; + + const mv = () => { + ReactNativeBlobUtil.fs.mv(result + "/text.txt", result + "/text1.txt"); + }; + + const hash = () => { + ReactNativeBlobUtil.fs.hash(result + "/text.txt", "md5"); + }; + + const readFile = () => { + ReactNativeBlobUtil.fs.readFile(result + "/text.txt", "utf8", 4000); + }; + + const slice = () => { + ReactNativeBlobUtil.fs.slice( + result + "/text.txt", + result + "/text1.txt", + 2, + 5 + ); + }; + + const df = () => { + ReactNativeBlobUtil.fs.df(); + }; + + const addListener = () => { + let obj = "addListener是空实现"; + setResult(obj); + }; + + const removeListeners = () => { + let obj = "removeListeners是空实现"; + setResult(obj); + }; + + const emitExpiredEvent = () => { + let obj = "emitExpiredEvent是空实现,三方库没有调用"; + setResult(obj); + }; + + return ( + + + BlobUtil + + + {result} + + + + + BlobUtilTurboModule.getConstants() + + + + BlobUtilTurboModule.createFile() + + + + BlobUtilTurboModule.unlink() + + + + + BlobUtilTurboModule.copyFileToCache() + + + + + BlobUtilTurboModule.writeFile() + + + + BlobUtilTurboModule.stat() + + + + BlobUtilTurboModule.mkdir() + + + + BlobUtilTurboModule.writeStream() + + + + BlobUtilTurboModule.ls() + + + + + BlobUtilTurboModule.createFileASCII() + + + + + + BlobUtilTurboModule.writeFileArray() + + + + + BlobUtilTurboModule.exists() + + + + BlobUtilTurboModule.lstat() + + + + BlobUtilTurboModule.hash() + + + + BlobUtilTurboModule.readFile() + + + + BlobUtilTurboModule.slice() + + + + BlobUtilTurboModule.df() + + + + BlobUtilTurboModule.closeStream() + + + + + BlobUtilTurboModule.writeArrayChunk() + + + + + BlobUtilTurboModule.writeChunk() + + + + BlobUtilTurboModule.readStream() + + + + BlobUtilTurboModule.mv() + + + + addListener() + + + + removeListeners() + + + + emitExpiredEvent() + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + width: "100%", + height: "100%", + flexDirection: "column", + alignItems: "center", + backgroundColor: "#F1F3F5", + }, + baseText: { + width: "100%", + height: "100%", + fontWeight: "bold", + textAlign: "center", + fontSize: 16, + ellipsizeMode: "tail", + numberOfLines: 2, + }, + titleArea: { + width: "90%", + height: "8%", + alignItems: "center", + flexDirection: "row", + }, + title: { + width: "90%", + color: "#000000", + textAlign: "left", + fontSize: 30, + }, + scrollView: { + width: "90%", + marginHorizontal: 10, + }, + + inputArea: { + width: "90%", + height: "10%", + borderWidth: 2, + borderColor: "#000000", + marginTop: 8, + justifyContent: "center", + alignItems: "center", + }, + baseArea: { + width: "100%", + height: 60, + borderRadius: 4, + borderColor: "#000000", + marginTop: 6, + backgroundColor: "#FFFFFF", + flexDirection: "row", + alignItems: "center", + paddingLeft: 8, + paddingRight: 8, + }, +}); +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +``` +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 BlobUtilPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff ++ import {BlobUtilPackage} from '@react-native-oh-tpl/react-native-blob-util/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ ++ new BlobUtilPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 +#### Fetch API + +##### ReactNativeBlobUtil.fetch + +| Name | Description|Type | Required | Platform | HarmonyOS Support | +| ------- | --------|--- | -------- | ----------- | ----------------- | +| progress | 进度 | Function | No | iOS/Android | yes | +| uploadProgress | 上传进度 | Function | No | iOS/Android | yes | +| cancel | 取消 | Function | No | iOS/Android | yes | + + + +#### Android API + +##### ReactNativeBlobUtil.android + +| Name | Description| Type | Required | Platform | HarmonyOS Support | +| :-----------------: | :------|----: | :------: | :------: | :---------------: | +| actionViewIntent | 动作视图意图| Function | No | Android | No | +| getContentIntent | 获取内容意图| Function | No | Android | No | +| addCompleteDownload | 添加完整下载| Function | No | Android | No | + +#### File System Access API + +##### ReactNativeBlobUtil.fs + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :---------: | :---------------------| -----------: | :------: | :---------: | :---------------: | +| dirs | 目录 | Function | NO | iOS/Android | yes | +| createFile | 创建文件 | Function | NO | iOS/Android | yes | +| writeFile | 写文件 | Function | NO | iOS/Android | yes | +| writeStream | 写流 | Function | NO | iOS/Android | yes | +| appendFile | 追加文件 | Function | NO | iOS/Android | yes | +| readFile | 读取文件 | Function | NO | iOS/Android | yes | +| hash | 哈希 | Function | NO | iOS/Android | yes | +| readStream | 读流 | Function | NO | iOS/Android | yes | +| mkdir | 创建目录 | Function | NO | iOS/Android | yes | +| ls | 查看当下的文件和目录| Function | NO | iOS/Android | yes | +| mv | 移动文件位置 | Function | NO | iOS/Android | yes | +| cp | 复制文件 | Function | NO | iOS/Android | yes | +| exists | 检查文件是否存在 | Function | NO | iOS/Android | yes | +| isDir | 是否是目录 | Function | NO | iOS/Android | yes | +| unlink | 删除文件 | Function | NO | iOS/Android | yes | +| lstat | 获取目录下文件的统计数据 | Function | NO | iOS/Android | yes | +| stat | 类似地获取数据或目录的统计信息| Function | NO | iOS/Android | yes | +| scanFile | 扫描文件 | Function | NO | Android | no | +| asset | 资产 | Function | NO | iOS/Android | yes | +| df | 获取设备的可用磁盘空间和总磁盘空间| Function | NO | iOS/Android | yes | + +#### iOS API + +#### ReactNativeBlobUtil.ios + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ----------------------| ---------------- | -------- | -------- | ----------------- | +| previewDocument | 文档查看器--需要系统权限 | Function | No | iOS | yes | +| openDocument | 显示与文件交互的选项菜单--需要系统权限| Function | No | iOS | yes | + +#### Network Utils + +##### ReactNativeBlobUtil.net + +| Name | Description| Type | Required | Platform | HarmonyOS Support | +| ------------- | ----------- | ---| ----- | ----------- | ----------------- | +| getCookies | 获取 cookie| Function | No | iOS/Android | no | +| removeCookies | 删除 cookie| Function | No | iOS/Android | no | + +#### Session API + +##### ReactNativeBlobUtil.session + +| Name | Description| Type | Required | Platform | HarmonyOS Support | +| ------- | ----------- | --| ------ | ----------- | ----------------- | +| add | 向此会话添加文件路径 | Function | No | iOS/Android | yes | +| remove | 从此会话中删除会话条目而不删除文件 | Function | No | iOS/Android | yes | +| list | 返回包含此会话中的文件路径的数组 | Function | No | iOS/Android | yes | +| dispose | 删除会话中的所有文件 | Function | No | iOS/Android | yes | + +#### MediaStore(Android Media Storage) + +##### ReactNativeBlobUtil.MediaCollection + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | --------| ------ | -------- | -------- | ----------------- | +| CopyToMediaStore | 复制到媒体存储| Function | No | Android | no | +| createMediaFile | 创建媒体文件| Function | No | Android | no | +| writeMediaFile | 写媒体文件 | Function | No | Android | no | +| copyToInternal | 复制到内部 | Function | No | Android | no | + +#### Utils API + +| Name | Description| Type | Required | Platform | HarmonyOS Support | +| ------ | ----------- | ---| ----- | ----------- | ----------------- | +| wrap | 使文件路径可以被识别| Function | No | iOS/Android | yes | +| base64 | 使用base64编码解码| Function | No | iOS/Android | yes | +| session | 用于管理缓存文件 | Function | No | iOS/Android | yes | + +## 遗留问题 + - [ ] blob-util在使用getCookies、removeCookies 在Android、iOS、Harmony OS 上使用都会报错: [issue#381](https://github.com/RonRadtke/react-native-blob-util/issues/381) +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/RonRadtke/react-native-blob-util/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git "a/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md" "b/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md" new file mode 100644 index 00000000..78861a58 --- /dev/null +++ "b/en/react-native-blob-util\357\274\210nocodegen\357\274\211.md" @@ -0,0 +1,654 @@ +> 模板版本：v0.2.2 + +

+

react-native-blob-util

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-blob-util) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-blob-util@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-blob-util@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState } from "react"; +import { + ScrollView, + StyleSheet, + Button, + View, + Text, + NativeEventEmitter, +} from "react-native"; +import ReactNativeBlobUtil from "react-native-blob-util"; + +export default function BlobUtilDemo() { + const [result, setResult] = (useState < string) | (null > null); + const [mkdirParam, setMkdirParam] = useState(""); + + const createFile = async () => { + await ReactNativeBlobUtil.fs.createFile( + result + "/text.txt", + "123456", + "utf8" + ); + }; + + const ls = async () => { + await ReactNativeBlobUtil.fs.ls(ReactNativeBlobUtil.fs.dirs.CacheDir); + }; + + const createFileASCII = async () => { + await ReactNativeBlobUtil.fs.createFile( + result + "/text.txt", + [102, 111, 111], + "ascii" + ); + }; + + const unlink = () => { + ReactNativeBlobUtil.fs.unlink(result + "/text.txt"); + }; + + const getConstants = () => { + let obj = ReactNativeBlobUtil.fs.dirs.CacheDir; + setResult(obj); + }; + + const writeFile = () => { + ReactNativeBlobUtil.fs.writeFile( + result + "/text.txt", + "Try to write str", + "utf8" + ); + }; + + const writeStream = () => { + ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false); + }; + + const writeArrayChunk = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "ascii", false) + .then((reactNativeBlobUtilWriteStream) => { + reactNativeBlobUtilWriteStream.encoding = "ascii"; + reactNativeBlobUtilWriteStream.write(["101", "32", "97"]); + }); + }; + + const writeChunk = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "utf8", false) + .then((reactNativeBlobUtilWriteStream) => { + reactNativeBlobUtilWriteStream.write("Zm9vIChXcml0ZSBCYXNlNjQpMQ=="); + }); + }; + + const closeStream = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "utf8", false) + .then((reactNativeBlobUtilWriteStream) => { + setTimeout(() => { + reactNativeBlobUtilWriteStream.close(); + }, 1000); + }); + }; + const readStream = () => { + ReactNativeBlobUtil.fs.readStream(result + "/text.txt", "utf8", 4000, 200); + }; + + const mkdir = () => { + ReactNativeBlobUtil.fs.mkdir( + ReactNativeBlobUtil.fs.dirs.DocumentDir + "/" + mkdirParam + ); + }; + + const stat = () => { + ReactNativeBlobUtil.fs.stat(result + "/text.txt"); + }; + + const copyFileToCache = () => { + ReactNativeBlobUtil.fs.cp(result + "/text.txt", result + "/text1.txt"); + }; + + const writeFileArray = () => { + ReactNativeBlobUtil.fs.writeFile( + result + "/text.txt", + [102, 111, 111], + "ascii" + ); + }; + + const exists = () => { + ReactNativeBlobUtil.fs.exists(result + "/text.txt"); + }; + + const lstat = () => { + ReactNativeBlobUtil.fs.lstat(result + "/text.txt"); + }; + + const mv = () => { + ReactNativeBlobUtil.fs.mv(result + "/text.txt", result + "/text1.txt"); + }; + + const hash = () => { + ReactNativeBlobUtil.fs.hash(result + "/text.txt", "md5"); + }; + + const readFile = () => { + ReactNativeBlobUtil.fs.readFile(result + "/text.txt", "utf8", 4000); + }; + + const slice = () => { + ReactNativeBlobUtil.fs.slice( + result + "/text.txt", + result + "/text1.txt", + 2, + 5 + ); + }; + + const df = () => { + ReactNativeBlobUtil.fs.df(); + }; + + const addListener = () => { + let obj = "addListener是空实现"; + setResult(obj); + }; + + const removeListeners = () => { + let obj = "removeListeners是空实现"; + setResult(obj); + }; + + const emitExpiredEvent = () => { + let obj = "emitExpiredEvent是空实现,三方库没有调用"; + setResult(obj); + }; + + return ( + + + BlobUtil + + + {result} + + + + + BlobUtilTurboModule.getConstants() + + + + BlobUtilTurboModule.createFile() + + + + BlobUtilTurboModule.unlink() + + + + + BlobUtilTurboModule.copyFileToCache() + + + + + BlobUtilTurboModule.writeFile() + + + + BlobUtilTurboModule.stat() + + + + BlobUtilTurboModule.mkdir() + + + + BlobUtilTurboModule.writeStream() + + + + BlobUtilTurboModule.ls() + + + + + BlobUtilTurboModule.createFileASCII() + + + + + + BlobUtilTurboModule.writeFileArray() + + + + + BlobUtilTurboModule.exists() + + + + BlobUtilTurboModule.lstat() + + + + BlobUtilTurboModule.hash() + + + + BlobUtilTurboModule.readFile() + + + + BlobUtilTurboModule.slice() + + + + BlobUtilTurboModule.df() + + + + BlobUtilTurboModule.closeStream() + + + + + BlobUtilTurboModule.writeArrayChunk() + + + + + BlobUtilTurboModule.writeChunk() + + + + BlobUtilTurboModule.readStream() + + + + BlobUtilTurboModule.mv() + + + + addListener() + + + + removeListeners() + + + + emitExpiredEvent() + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + width: "100%", + height: "100%", + flexDirection: "column", + alignItems: "center", + backgroundColor: "#F1F3F5", + }, + baseText: { + width: "100%", + height: "100%", + fontWeight: "bold", + textAlign: "center", + fontSize: 16, + ellipsizeMode: "tail", + numberOfLines: 2, + }, + titleArea: { + width: "90%", + height: "8%", + alignItems: "center", + flexDirection: "row", + }, + title: { + width: "90%", + color: "#000000", + textAlign: "left", + fontSize: 30, + }, + scrollView: { + width: "90%", + marginHorizontal: 10, + }, + + inputArea: { + width: "90%", + height: "10%", + borderWidth: 2, + borderColor: "#000000", + marginTop: 8, + justifyContent: "center", + alignItems: "center", + }, + baseArea: { + width: "100%", + height: 60, + borderRadius: 4, + borderColor: "#000000", + marginTop: 6, + backgroundColor: "#FFFFFF", + flexDirection: "row", + alignItems: "center", + paddingLeft: 8, + paddingRight: 8, + }, +}); +``` + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +``` +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + + +### 3.配置 CMakeLists 和引入 BlobUtilPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: rnoh_blob_util +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-blob-util/src/main/cpp" ./blob-util) +# RNOH_END: rnoh_blob_util + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: rnoh_blob_util +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_blob_util) +# RNOH_END: rnoh_blob_util +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "BlobUtilPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 BlobUtilPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... ++ import {BlobUtilPackage} from '@react-native-oh-tpl/react-native-blob-util/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new BlobUtilPackage(ctx) + ]; +} +``` + +### 5.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases) + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +#### Android API + +##### ReactNativeBlobUtil.android + +| Name | Description | Required | Platform | HarmonyOS Support | +| :-----------------: | :----------: | :------: | :------: | :---------------: | +| actionViewIntent | 动作视图意图 | No | Android | No | +| getContentIntent | 获取内容意图 | No | Android | No | +| addCompleteDownload | 添加完整下载 | No | Android | No | + +#### File System Access API + +##### ReactNativeBlobUtil.fs + +| Name | Description | Required | Platform | HarmonyOS Support | +| :---------: | :--------------------------------: | :------: | :---------: | :---------------: | +| dirs | 目录 | NO | iOS/Android | Yes | +| createFile | 创建文件 | NO | iOS/Android | Yes | +| writeFile | 写文件 | NO | iOS/Android | Yes | +| writeStream | 写流 | NO | iOS/Android | Yes | +| appendFile | 追加文件 | NO | iOS/Android | Yes | +| readFile | 读取文件 | NO | iOS/Android | Yes | +| hash | 哈希 | NO | iOS/Android | Yes | +| readStream | 读流 | NO | iOS/Android | Yes | +| mkdir | 创建目录 | NO | iOS/Android | Yes | +| ls | 查看当下的文件和目录 | NO | iOS/Android | Yes | +| mv | 移动文件位置 | NO | iOS/Android | Yes | +| cp | 复制文件 | NO | iOS/Android | Yes | +| exists | 检查文件是否存在 | NO | iOS/Android | Yes | +| isDir | 是否是目录 | NO | iOS/Android | Yes | +| unlink | 删除文件 | NO | iOS/Android | Yes | +| lstat | 获取目录下文件的统计数据 | NO | iOS/Android | Yes | +| stat | 类似地获取数据或目录的统计信息 | NO | iOS/Android | Yes | +| scanFile | 扫描文件 | NO | Android | No | +| asset | 资产 | NO | iOS/Android | Yes | +| df | 获取设备的可用磁盘空间和总磁盘空间 | NO | iOS/Android | Yes | + +#### iOS API + +#### ReactNativeBlobUtil.ios + +| Name | Description | Required | Platform | HarmonyOS Support | +| --------------- | -------------------------------------- | -------- | -------- | ----------------- | +| previewDocument | 文档查看器--需要系统权限 | No | iOS | No | +| openDocument | 显示与文件交互的选项菜单--需要系统权限 | No | iOS | No | + +#### Network Utils + +##### ReactNativeBlobUtil.net + +| Name | Description | Required | Platform | HarmonyOS Support | +| ------------- | ----------- | -------- | ----------- | ----------------- | +| getCookies | 获取 cookie | No | iOS/Android | No | +| removeCookies | 删除 cookie | No | iOS/Android | No | + +#### Session API + +##### ReactNativeBlobUtil.session + +| Name | Description | Required | Platform | HarmonyOS Support | +| ------- | ----------- | -------- | ----------- | ----------------- | +| session | 会话 | No | iOS/Android | No | + +#### MediaStore(Android Media Storage) + +##### ReactNativeBlobUtil.MediaCollection + +| Name | Description | Required | Platform | HarmonyOS Support | +| ---------------- | -------------- | -------- | -------- | ----------------- | +| CopyToMediaStore | 复制到媒体存储 | No | Android | No | +| createMediaFile | 创建媒体文件 | No | Android | No | +| writeMediaFile | 写媒体文件 | No | Android | No | +| copyToInternal | 复制到内部 | No | Android | No | + +#### Utils API + +| Name | Description | Required | Platform | HarmonyOS Support | +| ------ | ----------- | -------- | ----------- | ----------------- | +| wrap | | No | iOS/Android | No | +| base64 | | No | iOS/Android | No | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/RonRadtke/react-native-blob-util/blob/master/LICENSE) ，请自由地享受和参与开源。 + diff --git a/en/react-native-blurhash.md b/en/react-native-blurhash.md new file mode 100644 index 00000000..df28cbdc --- /dev/null +++ b/en/react-native-blurhash.md @@ -0,0 +1,442 @@ +> 模板版本：v0.2.2 + +

+

react-native-blurhash

+

+

+ + Supported platforms + + + License + + +

+ + + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-blurhash) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-blurhash Releases](https://github.com/react-native-oh-library/react-native-blurhash/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-blurhash@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-blurhash@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```jsx +import React, { useCallback, useMemo, useState } from 'react'; +import { Blurhash } from 'react-native-blurhash'; +import { + ActivityIndicator, + Alert, + SafeAreaView, + StatusBar, + StyleSheet, + Switch, + Text, + TextInput, + TouchableOpacity, + View +} from 'react-native'; + +const COLORS = { + background: '#F5FCFF', + statusBar: 'rgba(100, 0, 100, 0.6)', + textInput: 'rgba(200, 0, 100, 0.5)', + button: 'rgba(200, 0, 100, 0.4)', + switchEnabled: 'rgba(200, 0, 100, 0.5)', + switchDisabled: 'rgba(200, 0, 100, 0.2)', + switchThumb: 'white', + shadow: 'black', +}; +const SWITCH_THUMB_COLORS = { + false: COLORS.switchDisabled, + true: COLORS.switchEnabled, +}; + +const BlurhashDemo: React.FC = (): JSX.Element => { + + //#region State & Props + const [blurhash, setBlurhash] = useState('LHK1gsM,rzD+4-xn,vWT~q=_ixS]'); + const [decodeAsync, setDecodeAsync] = useState(true); + const [encodingImageUri, setEncodingImageUri] = useState( + 'http://gips2.baidu.com/it/u=3150002139,2124277596&fm=3028&app=3028&f=JPEG&fmt=auto?w=2048&h=2048' + ); + const [isEncoding, setIsEncoding] = useState(false); + const [isValiding, setIsVailding] = useState(false); + //#endregion + + //#region Memos + const buttonOpacity = useMemo( + () => (encodingImageUri.length < 5 || isEncoding ? 0.5 : 1), + [encodingImageUri.length, isEncoding], + ); + const encodeButtonStyle = useMemo( + () => [styles.encodeButton, { opacity: buttonOpacity }], + [buttonOpacity], + ); + //#endregion + + //#region Callbacks + const onLoadStart = useCallback(() => { + console.log('onLoadStart called!'); + }, []); + const onLoadEnd = useCallback(() => { + console.log('onLoadEnd called!'); + }, []); + const onLoadError = useCallback((message?: string) => { + console.log(`onLoadError called! Message: ${message}`); + }, []); + const startEncoding = useCallback(async () => { + try { + if (encodingImageUri.length < 5) return; + setIsEncoding(true); + const _blurhash = await Blurhash.encode(encodingImageUri, 4, 3); + setBlurhash(_blurhash); + setIsEncoding(false); + } catch (e: any) { + setIsEncoding(false); + console.warn('Failed to encode!', e); + Alert.alert('Encoding error', e.message); + } + }, [encodingImageUri]); + const isVaild = () => { + console.log(blurhash); + const data = Blurhash.isBlurhashValid(blurhash) + Alert.alert("blurhash is valid? : " + data.isValid) + console.log(data); + } + const CCache = useCallback(() => { + Blurhash.clearCosineCache() + }, []) + //#endregion + + return ( + <> + + + + + + + + + {/* To test if `decodeAsync` really doesn't block the UI thread, you can press this Touchable and see it reacting. */} + + Decode Async: + + + + + {isEncoding ? ( + + ) : ( + Encode + )} + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: COLORS.background, + }, + blurhashContainer: { + shadowRadius: 3, + shadowColor: COLORS.shadow, + shadowOffset: { + height: 2, + width: 0, + }, + shadowOpacity: 0.4, + overflow: 'visible', + }, + blurhashRadiusMask: { + elevation: 5, + // borderRadius has to be applied to the parent + borderRadius: 5, + overflow: 'hidden', + }, + blurhashImage: { + width: 300, + height: 200, + // Custom styling for width, height, scaling etc here + }, + textInput: { + marginTop: 20, + borderRadius: 5, + borderWidth: 1, + borderColor: COLORS.textInput, + width: '70%', + height: 35, + paddingHorizontal: 20, + textAlign: 'center', + }, + row: { + marginTop: 30, + flexDirection: 'row', + alignItems: 'center', + }, + text: { + fontSize: 16, + marginRight: 15, + }, + encodeButton: { + height: 37, + width: 120, + marginTop: 30, + backgroundColor: COLORS.button, + borderRadius: 10, + paddingVertical: 10, + paddingHorizontal: 35, + justifyContent: 'center', + }, +}); + +export default BlurhashDemo +``` + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-blurhash": "file:../../node_modules/@react-native-oh-tpl/react-native-blurhash/harmony/blurhash.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.配置 CMakeLists 和引入 BlurhashPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@rnoh/react-native-openharmony/src/main/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-blurhash/src/main/cpp" ./blurhash) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_blurhash) +# RNOH_END: manual_package_linking_2 + +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "BlurhashPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 BlurhashPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff ++ import {BlurhashPackage} from '@react-native-oh-tpl/react-native-blurhash/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new BlurhashPackage(ctx), + ]; +} + +``` + +### 5.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-blurhash Releases](https://github.com/react-native-oh-library/react-native-blurhash/releases) + +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------------ | ------------------------------------------------------------ | --------- | -------- | -------- | ----------------- | +| `blurhash` | The blurhash string to use. Example: `LGFFaXYk^6#M@-5c,1J5@[or[Q6.` | string | yes | All | yes | +| `decodeWidth?` | The width (resolution) to decode to. Higher values decrease performance, use `16` for large lists, otherwise you can increase it to `32`. | number | no | All | yes | +| `decodeHeight?` | The height (resolution) to decode to. Higher values decrease performance, use `16` for large lists, otherwise you can increase it to `32`. | number | no | All | yes | +| `decodePunch?` | Adjusts the contrast of the output image. Tweak it if you want a different look for your placeholders. | number | no | All | yes | +| `decodeAsync?` | Asynchronously decode the Blurhash on a background Thread instead of the UI-Thread. | boolean | no | All | yes | +| `resizeMode?` | Sets the resize mode of the image. (no, `'repeat'` is not supported.) | enum | no | All | yes | +| `onLoadStart?: () => void` | A callback to call when the Blurhash started to decode the given `blurhash` string. | function | no | All | yes | +| `onLoadEnd?: () => void` | A callback to call when the Blurhash successfully decoded the given `blurhash` string and rendered the image to the `` view. | function | no | All | yes | +| `onLoadError?: (message?: string) => void` | A callback to call when the Blurhash failed to load. Use the `message` parameter to get the error message. | function | no | All | yes | +| All `View` props | All properties from the React Native `View`. Use `style.width` and `style.height` for display-sizes. Also, `style.borderRadius` is natively supported on iOS. | ViewProps | no | All | yes | + + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | -------- | ----------------- | +| encode() | Encodes the given image URI to a blurhash string | (imageUri: string, componentsX: number, componentsY: number)=> Promise\; | no | All | yes | +| clearCosineCache() | Clears the cosine cache and frees up memory. | ()=> void | no | All | yes | +| getAverageColor) | Gets the average color in a given blurhash string. | (blurhash: string)=> RGB \|undefined; | no | All | yes | +| isBlurhashValid() | Verifies if the given blurhash is valid by checking it's type, length and size flag. | (blurhash: string)=> ReturnType\; | no | All | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/mrousavy/react-native-blurhash/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-bootsplash.md b/en/react-native-bootsplash.md new file mode 100644 index 00000000..13643d61 --- /dev/null +++ b/en/react-native-bootsplash.md @@ -0,0 +1,390 @@ +> 模板版本：v0.2.2 + +

+

react-native-bootsplash

+

+

+ + Supported platforms + + + License + + +

+ + + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-bootsplash) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-bootsplash Releases](https://github.com/react-native-oh-library/react-native-bootsplash/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-bootsplash@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-bootsplash@file:# +``` + +#### 生成配置文件 +为了加快设置速度，我们提供了一个CLI来自动生成配置、创建Android Drawable XML文件、iOS Storyboard文件和HarmonyOS Resources文件 + +```bash +$ npx react-native generate-bootsplash --help +# --- or --- +$ yarn react-native generate-bootsplash --help +``` + +该命令可以使用多个参数: + +```js +Usage: react-native generate-bootsplash [options] + +Generate a launch screen using a logo file path (PNG or SVG) + +Options: + --project-type Project type ("detect", "bare" or "expo") (default: "detect") + --platforms Platforms to generate for, separated by a comma (default: "android,ios,web,harmony") + --background Background color (in hexadecimal format) (default: "#fff") + --logo-width Logo width at @1x (in dp - we recommend approximately ~100) (default: 100) + --assets-output Assets output directory path (default: "assets/bootsplash") + --flavor Android flavor build variant (where your resource directory is) (default: "main") + --html HTML template file path (your web app entry point) (default: "public/index.html") + --license-key License key to enable brand and dark mode assets generation + --brand Brand file path (PNG or SVG) + --brand-width Brand width at @1x (in dp - we recommend approximately ~80) (default: 80) + --dark-background [dark mode] Background color (in hexadecimal format) + --dark-logo [dark mode] Logo file path (PNG or SVG) + --dark-brand [dark mode] Brand file path (PNG or SVG) + -h, --help display help for command +``` + +命令用法示例: + +```bash +# Without license key +npx react-native generate-bootsplash svgs/light-logo.svg +``` + +命令执行后将创建以下文件: +```js +# Without license key +android/app/src/main/res/drawable-mdpi/bootsplash_logo.png +android/app/src/main/res/drawable-hdpi/bootsplash_logo.png +android/app/src/main/res/drawable-xhdpi/bootsplash_logo.png +android/app/src/main/res/drawable-xxhdpi/bootsplash_logo.png +android/app/src/main/res/drawable-xxxhdpi/bootsplash_logo.png +android/app/src/main/AndroidManifest.xml +android/app/src/main/res/values/colors.xml +android/app/src/main/res/values/styles.xml + +ios/YourApp/BootSplash.storyboard +ios/YourApp/Colors.xcassets/BootSplashBackground-.colorset/Contents.json +ios/YourApp/Images.xcassets/BootSplashLogo-.imageset/Contents.json +ios/YourApp/Images.xcassets/BootSplashLogo-.imageset/logo-.png +ios/YourApp/Images.xcassets/BootSplashLogo-.imageset/logo-@2x.png +ios/YourApp/Images.xcassets/BootSplashLogo-.imageset/logo-@3x.png +ios/YourApp/Info.plist +ios/YourApp.xcodeproj/project.pbxproj + +harmony/entry/src/main/resources/base/media/bootsplash_logo.png +harmony/entry/src/main/resources/base/element/color.json +harmony/entry/src/main/module.json5 + +public/index.html + +assets/bootsplash/manifest.json +assets/bootsplash/logo.png +assets/bootsplash/logo@1,5x.png +assets/bootsplash/logo@2x.png +assets/bootsplash/logo@3x.png +assets/bootsplash/logo@4x.png +``` + +编辑您的启动Ability文件, 它通常是配置在entry模块module.json5中abilities属性中配置的第一个abilitie: + +```diff ++ import { window } from '@kit.ArkUI'; ++ import { RNBootSplashScreen } from '@react-native-oh-tpl/react-native-bootsplash/src/main/ets/RNBootSplashScreen'; + +export default class EntryAbility extends RNAbility { ++ onWindowStageCreate(windowStage: window.WindowStage) { ++ RNBootSplashScreen.init(this.context, windowStage).then(() => { ++ super.onWindowStageCreate(windowStage); ++ }) ++ } + + ... +} +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +> [!TIP] 示例中logo参数使用了本地图片资源，可以到[react-native-boot-splash demo](https://github.com/react-native-oh-library/RNOHDCS/tree/main/react-native-boot-splash/source)获取该图片 + +```js +import { useState , useEffect} from "react"; +import { Animated, View, Text, Dimensions, Platform, StatusBar, StyleSheet } from "react-native"; +import BootSplash from "react-native-bootsplash"; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#F5FCFF", + }, + text: { + fontSize: 30, + fontWeight: "700", + margin: 20, + lineHeight: 30, + color: "#333", + textAlign: "center", + }, +}); + +type Props = { + onAnimationEnd: () => void; +}; + +export const AnimatedBootSplash = ({ onAnimationEnd }: Props) => { + const [opacity] = useState(() => new Animated.Value(1)); + const [translateY] = useState(() => new Animated.Value(0)); + + const { container, logo /*, brand */ } = BootSplash.useHideAnimation({ + manifest: require("../source/bootsplash_manifest.json"), + logo: require("../source/bootsplash_logo.png"), + statusBarTranslucent: true, + navigationBarTranslucent: false, + + animate: () => { + const { height } = Dimensions.get("window"); + Animated.stagger(250, [ + Animated.spring(translateY, { + useNativeDriver: true, + toValue: -50, + }), + Animated.spring(translateY, { + useNativeDriver: true, + toValue: height, + }), + ]).start(); + Animated.timing(opacity, { + useNativeDriver: true, + toValue: 0, + duration: 150, + delay: 350, + }).start(() => { + onAnimationEnd(); + }); + }, + }); + + return ( + + + + ); +}; + +const App = () => { + const [visible, setVisible] = useState(true); + + useEffect(() => { + StatusBar.setBarStyle("dark-content"); + }, []); + + return ( + <> + + Hello World + {visible && ( + { + BootSplash.isVisible(); + console.log("--------++++AnimationEnd") + setVisible(false); + }} + /> + )} + + + ); +}; + +export default App; +``` + +```json +// bootsplash_manifest.json +{ + "background": "#F5FCFF", + "logo": { + "width": 300, + "height": 89 + } +} +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-bootsplash": "file:../../node_modules/@react-native-oh-tpl/react-native-bootsplash/harmony/boot_splash.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 RNBootSplashPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { RNBootSplashPackage } from '@react-native-oh-tpl/react-native-bootsplash/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNBootSplashPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-bootsplash Releases](https://github.com/react-native-oh-library/react-native-bootsplash/releases) + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------------------------ | -------- | -------- | ------------ | ----------------- | +| hide | Hide the splash screen. | function | no | Android、IOS | yes | +| isVisible | Return the current visibility status of the native splash screen. | function | no | Android、IOS | yes | +| useHideAnimation | A hook to easily create a custom hide animation by animating all splash screen elements using Animated, react-native-reanimated or else (similar as the video on top of this documentation). | function | no | Android、IOS | yes | + +### hide + +```js +type hide = (config?: { fade?: boolean }) => Promise; +``` + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----- | ---------------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | +| fade | Hide the splash screen (immediately, or with a fade out). | boolean | No | iOS/Android | partially | + +### useHideAnimation + +```js +useHideAnimation(config: {UseHideAnimationConfig}) => {container: ContainerProps;logo: LogoProps;brand: BrandProps;}; +``` + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----- | ---------------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | +| ready | a boolean flag to delay the animate execution (default: true) | boolean | No | iOS/Android | partially | +| manifest | the manifest file is generated in your assets directory | Manifest | Yes | iOS/Android | partially | +| logo | logo image in animation | ImageRequireSource | No | iOS/Android | partially | +| darkLogo | logo image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | +| brand | brand image in animation | ImageRequireSource | No | iOS/Android | partially | +| darkBrand | brand image in animation in dark mode | ImageRequireSource | No | iOS/Android | partially | +| statusBarTranslucent | sets whether the status bar is transparent | boolean | No | iOS/Android | partially | +| navigationBarTranslucent | sets whether the navigation bar is transparent | boolean | No | iOS/Android | partially | +| animate | custom hide animation | function | Yes | iOS/Android | partially | + +## 遗留问题 + +- [ ] HarmonyOS的window窗口上不支持设置动画属性，hide接口fade参数设置true没有效果 问题: [issue#13](https://github.com/react-native-oh-library/react-native-bootsplash/issues/13) + +## 其他 +- 执行generate-bootsplash命令行时，由于 `--brand, --brand-width 和 --dark-*` 选项需要购买license才能使用，涉及功能未开源，HarmonyOS平台不支持使用 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/zoontek/react-native-bootsplash/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-bouncy-checkbox.md b/en/react-native-bouncy-checkbox.md new file mode 100644 index 00000000..2271f049 --- /dev/null +++ b/en/react-native-bouncy-checkbox.md @@ -0,0 +1,147 @@ +> 模板版本：v0.2.2 + +

+

react-native-bouncy-checkbox

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/WrathChaos/react-native-bouncy-checkbox) + +## 安装与使用 + +> [!TIP] 需要配套的服务和三方依赖 + +| Dependencies | Version | +| ------------------------------------ | ------- | +| @freakycoder/react-native-bounceable | 1.0.3 | + +本库依赖[@freakycoder/react-native-bounceable文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/freakycoder-react-native-bounceable.md) + +#### **npm** + +```bash +npm install --save react-native-bouncy-checkbox@4.0.1 +``` + +#### **yarn** + +```bash +yarn install --save react-native-bouncy-checkbox@4.0.1 +``` + +下面的代码展示了这个库的基本使用场景： +```js +import React, { useState } from "react"; +import { StyleSheet,View,Image } from 'react-native'; +import BouncyCheckbox from "react-native-bouncy-checkbox"; + +export default function BouncyCheckboxwy () { + const [checkboxState, setCheckboxState] = React.useState(false); + return ( + + + } + onPress={() => setCheckboxState(!checkboxState)} + /> + + + ); +}; +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + }, + textContainer:{ + backgroundColor: 'lightblue', + borderWidth: 5, + borderColor: 'black', + padding: 5, + }, + textstyle: { + fontSize: 30, + color: '#010101', + fontWeight: '600', + textDecorationLine: "none", + } +}); +``` + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证： + +1. RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.404; ROM：5.0.0.31; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :------------------- | ------------------------------------------------------------ | --------- | -------- | -------- | ----------------- | +| isChecked | if you want to control check state yourself, you can use `isChecked` prop now! | boolean | no | All | yes | +| onPress | set your own onPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false | function | no | All | yes | +| onLongPress | set your own onLongPress functionality after the bounce effect, callback receives the next `isChecked` boolean if disableBuiltInState is false | function | no | All | yes | +| text | set the checkbox's text | string | no | All | yes | +| textComponent | set the checkbox's text by a React Component | component | no | All | yes | +| disableText | if you want to use checkbox without text, you can enable it | boolean | no | All | yes | +| size | size of `width` and `height` of the checkbox | number | no | All | yes | +| style | set/override the container style | style | no | All | yes | +| textStyle | set/override the text style | style | no | All | yes | +| iconStyle | set/override the outer icon container style | style | no | All | yes | +| innerIconStyle | set/override the inner icon container style | style | no | All | yes | +| fillColor | change the checkbox's filled color | color | no | All | yes | +| unfillColor | change the checkbox's un-filled color when it's not checked | color | no | All | yes | +| iconComponent | set your own icon component | component | no | All | yes | +| checkIconImageSource | set your own check icon image | image | no | All | yes | +| textContainerStyle | set/override the text container style | ViewStyle | no | All | yes | +| ImageComponent | set your own Image component instead of RN's default Image | component | no | All | yes | +| TouchableComponent | set/override the main TouchableOpacity component with any Touchable Component like Pressable | component | no | All | yes | +| bounceEffectIn | change the bounce effect when press in | number | no | All | yes | +| bounceEffectOut | change the bounce effect when press out | number | no | All | yes | +| bounceVelocityIn | change the bounce velocity when press in | number | no | All | yes | +| bounceVelocityOut | change the bounce velocity when press out | number | no | All | yes | +| bouncinessIn | change the bounciness when press in | number | no | All | yes | +| bouncinessOut | change the bounciness when press out | number | no | All | yes | + +### + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/WrathChaos/react-native-bouncy-checkbox/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-button.md b/en/react-native-button.md new file mode 100644 index 00000000..e195e298 --- /dev/null +++ b/en/react-native-button.md @@ -0,0 +1,128 @@ + +> 模板版本：v0.2.2 + +

+

react-native-button

+

+

+ + Supported platforms + + + License + +

+ + +> [!tip] [Github 地址](https://github.com/ide/react-native-button) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-button@3.1.0 --save +``` + +#### **yarn** + +```bash +yarn add react-native-button@3.1.0 --save +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +/** + * Sample React Native App + * https://github.com/facebook/react-native + * @flow + */ + +import React, { Component } from 'react'; +import Button from 'react-native-button'; +import { + View, Text +} from 'react-native'; + +export default class ExampleComponent extends Component { + constructor(props, context) { + super(props, context); + this.state = { + isDisabled: false + } + } + _handlePress() { + this.setState({ + isDisabled: true + }); + console.log('Now, button disabled'); + } + render() { + const { isDisabled } = this.state; + return ( + + + + ); + } +}; +``` + + + +## 约束与限制 + +## 兼容性 + +本文档内容基于以下版本验证通过： + +react-native-harmony：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | default | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------------------------------------------------ | -------- | -------- | -------- | ----------------- | ----------------- | +| `accessibilityLabel` | VoiceOver will read this string when a user selects the associated element. | String | | No | All | yes | +| `allowFontScaling` | Specifies whether fonts should scale to respect Text Size accessibility settings. | Bool | | No | All | yes | +| `Disabled` | Disables the button | Bool | false | No | All | yes | +| `Style` | The style for the button | View Style Prop | ｛｝ | No | All | yes | +| `styleDisabled` | The style for the disabled button | View Style Prop | ｛｝ | No | All | yes | +| `containerStyle` | The style for the container | View Style Prop | ｛｝ | No | All | yes | +| `disabledContainerStyle` | The style for the container when the button is disabled | View Style Prop | ｛｝ | No | All | yes | +| `childGroupStyle` | The style for the child views | View Style Prop | ｛｝ | No | All | yes | +| `androidBackground` | The background for android devices. | Background Prop Type | | No | Android | no | +| `onPress` | Handler to be called when the user taps the button. | Function | | No | All | yes | + + + +## 遗留问题 + + 无 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/ide/react-native-button/blob/main/LICENSE) ，请自由地享受和参与开源。 + diff --git a/en/react-native-calendar-events.md b/en/react-native-calendar-events.md new file mode 100644 index 00000000..4e795c13 --- /dev/null +++ b/en/react-native-calendar-events.md @@ -0,0 +1,412 @@ + +> 模板版本：v0.2.2 + +

+

react-native-calendar-events

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-calendar-events) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-calendar-events Releases](https://github.com/react-native-oh-library/react-native-calendar-events/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-calendar-events@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-calendar-events@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js + +import React from 'react'; +import { + SafeAreaView, + StyleSheet, + ScrollView, + View, + Text, + StatusBar, + Button, + Alert, + Platform, +} from 'react-native'; +import {Header, Colors} from 'react-native/Libraries/NewAppScreen'; +import RNCalendarEvents from 'react-native-calendar-events'; + +const sourceStruct = { + /** The Account name */ + name: "testName", + /** The Account type */ + type: "testTyoe", +} + +//saveEvent +const calendarOptions = { + title: 'test1', + type: 'local', + displayName: "testSaveCalendar" +}; + +//saveEvent +const location = { + location: "nanjin", + longitude: 118, + latitude: 31, +} +const eventService = { + type: 'Meeting', + uri: "", + description: "testEventService", +} +const attendees = { + name: "testAttendees", + email: "testEmail", +} +const recurrenceRuleHarmony = { + recurrenceFrequency: 2, + expire: 0, +} +const eventDetails = { + id: 1, + type: 0, + title: 'testEvent', + location: location, + startTime: new Date().getTime() + 60 * 60 * 1000 * 3, + endTime: new Date().getTime() + 60 * 60 * 1000 * 10, + isAllDay: false, + attendee: [attendees], + timeZone: "beijing", + reminderTime: [new Date().getTime()], + recurrenceRule: recurrenceRuleHarmony, + description: "test", + service: eventService, +}; + +const fetchAllEventStartTime: string = (new Date().getTime() + 60 * 60 * 1000).toString() +const fetchAllEventEndTime: string = (new Date().getTime() + 60 * 60 * 1000 * 15).toString() +function CalendarDemo() { + return ( + <> + + + +
+ + Engine: Hermes + + + + + Read/Write Auth + + + + RNCallKeep.isCallActive + + + RNCallKeep.checkIfBusy + + + ); +} + +``` +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 在工程根目录的 `oh-package.json5` 添加 overrides字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "file:./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-callkeep": "file:../../node_modules/@react-native-oh-tpl/react-native-callkeep/harmony/call_keep.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + + +### 3.在 ArkTs 侧引入 RNCallKeepPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { RNCallKeepPackage } from '@react-native-oh-tpl/react-native-callkeep'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNCallKeepPackage(ctx), + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-callkeep Releases](https://github.com/react-native-oh-library/react-native-callkeep/releases) + + + +## 静态方法 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 YES 表示 HarmonyOS 平台支持该属性；NO 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | :------: | :------: | :----------------: | +| isCallActive() | The call exists user has already answered the call | RNCallKeep.isCallActive(uuid) | NO | iOS | YES | +| checkIfBusy() | Checks if there are any active calls on the device | RNCallKeep.checkIfBusy() | NO | iOS | YES | +| getCalls() | Returns a Promise. The result will be an array with all current calls and their states | RNCallKeep.getCalls() | NO | iOS | NO | +| checkSpeaker() | Checks if the device speaker is on and returns a promise with a boolean value | RNCallKeep.checkSpeaker() | NO | iOS | NO | +| startCall() | Make an outgoing call | RNCallKeep.startCall(uuid, handle, contactIdentifier, handleType, hasVideo) | NO | ALL | YES | +| displayIncomingCall() | Display system UI for incoming calls | RNCallKeep.displayIncomingCall() | NO | ALL | NO | +| answerIncomingCall() | Use this to tell the sdk a user answered a call from the app UI | RNCallKeep.answerIncomingCall(uuid) | NO | ALL | NO | +| updateDisplay() | Use this to update the display after an outgoing call has started | RNCallKeep.updateDisplay(uuid, displayName, handle) | NO | ALL | NO | +| endCall() | When finish an incoming/outgoing call | RNCallKeep.endCall(uuid) | NO | ALL | NO | +| endAllCalls() | End all ongoing calls | RNCallKeep.endAllCalls() | NO | ALL | NO | +| rejectCall() | When you reject an incoming call | RNCallKeep.rejectCall(uuid) | NO | ALL | NO | +| reportEndCallWithUUID() | Report that the call ended without the user initiating | RNCallKeep.reportEndCallWithUUID(uuid, reason) | NO | ALL | NO | +| setMutedCall() | Switch the mic on/off | RNCallKeep.setMutedCall(uuid, true) | NO | ALL | NO | +| setOnHold() | Set a call on/off hold | RNCallKeep.setOnHold(uuid, true) | NO | ALL | NO | +| removeEventListener() | Allows to remove the listener on an event | RNCallKeep.removeEventListener() | NO | ALL | NO | +| setup() | Doing this allows capturing events prior to the react native event bridge being up | RNCallKeep.setup() | NO | ALL | NO | +| setSettings() | Initialize Operation Settings | RNCallKeep.setSettings() | NO | ALL | NO | +| getAudioRoutes() | Get the list of available audio routes. i.e. bluetooth, wired/ear-piece, speaker and phone | RNCallKeep.getAudioRoutes() | NO | ALL | NO | +| setAudioRoute() | Set audio route using a route | RNCallKeep.setAudioRoute(uuid, routeName) | NO | ALL | NO | +| getInitialEvents() | This is alternative to event | RNCallKeep.getInitialEvents() | NO | ALL | NO | +| clearInitialEvents() | Clear all pending actions returned | RNCallKeep.clearInitialEvents() | NO | ALL | NO | +| setAvailable() | Tell *ConnectionService* that the device is ready to make outgoing calls via the native Phone app | RNCallKeep.setAvailable(true) | NO | Android | NO | +| setForegroundServiceSettings() | Configures the Foreground Service | RNCallKeep.setForegroundServiceSettings() | NO | Android | NO | +| canMakeMultipleCalls() | Disable the "Add call" button in ConnectionService UI | RNCallKeep.canMakeMultipleCalls(false) | NO | Android | NO | +| setCurrentCallActive() | Mark the current call as active | RNCallKeep.setCurrentCallActive(uuid) | NO | Android | NO | +| checkIsInManagedCall() | Returns true if there is an active native call | RNCallKeep.checkIsInManagedCall() | NO | Android | NO | +| setConnectionState() | Change the state of the call | RNCallKeep.setConnectionState(uuid, state) | NO | Android | NO | +| toggleAudioRouteSpeaker() | Update the audio route of Audio Service | RNCallKeep.toggleAudioRouteSpeaker(uuid, true) | NO | Android | NO | +| backToForeground() | Use this to display the application in foreground if the application was in background state | RNCallKeep.backToForeground() | NO | Android | NO | +| registerPhoneAccount() | Registers Android phone account manually | RNCallKeep.registerPhoneAccount(options) | NO | Android | NO | +| registerEvents() | Registering Initialization Events | RNCallKeep.registerAndroidEvents() | NO | Android | NO | +| sendDTMF() | On Play Dtmf Tone | RNCallKeepModule.sendDTMF(uuid, key) | NO | Android | NO | +| unregisterEvents() | Unregistering Initialization Events | RNCallKeep.unregisterAndroidEvents() | NO | Android | NO | +| setReachable() | Check if the application is reachable before making a call from the native phone application. | RNCallKeep.setReachable() | NO | Android | NO | +| supportConnectionService() | Tells if `ConnectionService` is available on the device | RNCallKeep.supportConnectionService() | NO | Android | NO | +| hasPhoneAccount() | Checks if the user has enabled the phone account for your application | RNCallKeep.hasPhoneAccount() | NO | Android | NO | +| hasOutgoingCall() | When waking up the Android application in background mode | RNCallKeep.hasOutgoingCall() | NO | Android | NO | +| hasDefaultPhoneAccount() | Checks if the user has set a default phone account | RNCallKeep.hasDefaultPhoneAccount(options) | NO | Android | NO | +| checkPhoneAccountEnabled() | Checks if the user has set a default phone account and it's enabled | RNCallKeep.checkPhoneAccountEnabled() | NO | Android | NO | +| isConnectionServiceAvailable() | Check if the device support ConnectionService | RNCallKeep.isConnectionServiceAvailable() | NO | Android | NO | + +## 遗留问题 + +- [ ] react-native-callkeep 部分方法未实现 HarmonyOS 化： [issue#2](https://github.com/react-native-oh-library/react-native-callkeep/issues/2)。 + + + +## 其他 + +## 开源协议 + +本项目基于 [The ISC License (ISC)](https://github.com/react-native-webrtc/react-native-callkeep/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-camera-kit.md b/en/react-native-camera-kit.md new file mode 100644 index 00000000..c09c909f --- /dev/null +++ b/en/react-native-camera-kit.md @@ -0,0 +1,358 @@ +> 模板版本：v0.2.2 + +

+

react-native-camera-kit

+

+

+ + Supported platforms + + + License + +

+ + + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-camera-kit) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-camera-kit Releases](https://github.com/react-native-oh-library/react-native-camera-kit/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +>[!TIP] # 处替换为 tgz 包的路径 + + + +#### npm + +```bash +npm install @react-native-oh-tpl/react-native-camera-kit@file:# +``` + +#### yarn + +```bash +yarn add @react-native-oh-tpl/react-native-camera-kit@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 +### camera example +``` js +import React, {useRef, useState} from 'react'; +import {Text, StyleSheet, View, Button} from 'react-native'; +import {CameraApi, CameraType,Camera} from 'react-native-camera-kit'; + +export const CameraDemo: React.FC = (): JSX.Element => { + const nativeRef = useRef(null); + const [zoom, setZoom] = useState(0); + const [errorStr, setErrorStr] = useState(''); + const [photo, setPhoto] = useState(''); + + const onError = (e: any) => { + setErrorStr(e.nativeEvent.errorMessage); + }; + + const onZoom = (e: any) => { + setZoom(e.nativeEvent.zoom); + }; + + const onPhoto = async () => { + const result = await nativeRef.current?.capture(); + result && setPhoto(JSON.stringify(result)); + }; + + return ( + <> + + + + + + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + flexDirection: 'column', + alignItems: 'center', + backgroundColor: '#F1F3F5', + }, + baseText: { + fontWeight: 'bold', + textAlign:'center', + fontSize:16 + }, + + titleArea:{ + width:'90%', + height:'8%', + alignItems:'center', + flexDirection:'row', + }, + + title: { + width:'90%', + color:'#000000', + textAlign:'left', + fontSize: 30, + }, + + scrollView: { + width:'90%', + marginHorizontal: 20, + }, + + inputArea: { + width:'90%', + height:'30%', + borderWidth:2, + borderColor:'#000000', + marginTop:8, + justifyContent:'center', + alignItems:'center', + }, + baseArea: { + width:'100%', + height:60, + borderRadius:4, + borderColor:'#000000', + marginTop:8, + backgroundColor:'#FFFFFF', + flexDirection: 'row', + alignItems:'center', + paddingLeft:8, + paddingRight:8 + } +}); +``` + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-create-thumbnail": "file:../../node_modules/@react-native-oh-tpl/react-native-create-thumbnail/harmony/createThumbnail.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-create-thumbnail": "file:../../node_modules/@react-native-oh-tpl/react-native-create-thumbnail/harmony/createThumbnail" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 3.在 ArkTs 侧引入 BlobUtilPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { CreateThumbnailPackage } from '@react-native-oh-tpl/react-native-create-thumbnail/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new CreateThumbnailPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-create-thumbnail Releases](https://github.com/react-native-oh-library/react-native-create-thumbnail/releases) + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +#### **createThumbnail** +| Name | Description | Type | Required | HarmonyOS Support | +| ---- | ---- | ---- | -------- | -------- | +| createThumbnail | thumbnail generator with storage/cache management and support for both local and remote videos | function | NO | yes | + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | type | Required | Platform | HarmonyOS Support | +| :-----------------: | :----------: | :------: | :------: | :---------------: | :---------------: | +| url | Path to video file (local or remote) | String | yes | Android/ios | yes | +| timeStamp | Thumbnail timestamp (in milliseconds) | Number | NO | Android/ios | yes | +| format | Thumbnail format, can be one of: jpeg, or png | String | NO | Android/ios | yes | +| dirSize | Maximum size of the cache directory (in megabytes). When this directory is full, the previously generated thumbnails will be deleted to clear about half of it's size. | Number | NO | Android/ios | yes | +| headers | Headers to load the video with. e.g. { Authorization: 'someAuthToken' } | Object | NO | Android/ios | yes | +| cacheName | Cache name for this thumbnail to avoid duplicate generation. If specified, and a thumbnail already exists with the same cache name, it will be returned instead of generating a new one. | String | NO | Android/ios | yes | +## 返回值 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | type | Required | Platform | HarmonyOS Support | +| :-----------------: | :----------: | :------: | :------: | :---------------: | :---------------: | +| path | Path to generated thumbnail | String | NO | Android/ios | yes | +| size | Size (in bytes) of thumbnail | Number | NO | Android/ios | yes | +| mime | Mimetype of thumbnail | String | NO | Android/ios | yes | +| width | Thumbnail width | Number | NO | Android/ios | yes | +| height | Thumbnail height | Number | NO | Android/ios | yes | + + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/souvik-ghosh/react-native-create-thumbnail/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-credit-card-input.md b/en/react-native-credit-card-input.md new file mode 100644 index 00000000..bac58755 --- /dev/null +++ b/en/react-native-credit-card-input.md @@ -0,0 +1,200 @@ +> 模板版本：v0.2.2 + +

+

react-native-credit-card-input

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-credit-card-input) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[https://github.com/react-native-oh-library/react-native-credit-card-input Releases](https://github.com/react-native-oh-library/react-native-credit-card-input/releases)，并下载适用版本的 tgz 包 + +进入到工程目录并输入以下命令： + +>[!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-credit-card-input@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-credit-card-input@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React, { Component } from "react"; +import { StyleSheet, View, Switch } from "react-native"; +import { CreditCardInput, LiteCreditCardInput } from "react-native-credit-card-input"; + +const s = StyleSheet.create({ + switch: { + alignSelf: "center", + marginTop: 20, + marginBottom: 20, + }, + container: { + backgroundColor: "#F5F5F5", + marginTop: 60, + }, + label: { + color: "black", + fontSize: 12, + }, + input: { + fontSize: 16, + color: "black", + }, +}); + + +export default class Example extends Component { + state = { useLiteCreditCardInput: false }; + + _onChange = (formData) => console.log(JSON.stringify(formData, null, " ")); + _onFocus = (field) => console.log("focusing", field); + _setUseLiteCreditCardInput = (useLiteCreditCardInput) => this.setState({ useLiteCreditCardInput }); + + render() { + return ( + + + + { this.state.useLiteCreditCardInput ? + ( + + ) : ( + + ) + } + + ); + } +} + +``` +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1.RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; + +## 属性 + +>[!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +>[!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情见[react-native-credit-card-input](https://github.com/sbycrosz/react-native-credit-card-input) + +### LiteCreditCardInput + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| autoFocus | Automatically focus Card Number field on render | PropTypes.bool | no | Android/iOS | yes | +| onChange | Receives a formData object every time the form changes | PropTypes.func | no | Android/iOS | yes | +| onFocus | Receives the name of currently focused field| PropTypes.func | no | Android/iOS | yes | +| placeholders | Defaults to\{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" \} | string | no | Android/iOS | yes | +| inputStyle| Style for credit-card form's textInput | Text.propTypes.style | no | Android/iOS | yes | +| validColor| Color that will be applied for valid text input. Defaults to: "\{inputStyle.color\}" | PropTypes.string | no | Android/iOS | yes | +| invalidColor| Color that will be applied for invalid text input. Defaults to: "red" | PropTypes.string | no | Android/iOS | yes | +| placeholderColor| Color that will be applied for text input placeholder. Defaults to: "gray" | PropTypes.string | no | Android/iOS | yes | +| additionalInputsProps | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in RN TextInput. | PropTypes.objectOf(TextInput.propTypes) | no | Android/iOS | yes | + +### CreditCardInput + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| autoFocus | Automatically focus Card Number field on render | PropTypes.bool | no | Android/iOS | yes | +| onChange | Receives a formData object every time the form changes | PropTypes.func | no | Android/iOS | yes | +| onFocus | Receives the name of currently focused field | PropTypes.func | no | Android/iOS | yes | +| labels | Defaults to\{ number: "CARD NUMBER", expiry: "EXPIRY", cvc: "CVC/CCV" \}| PropTypes.object | no | Android/iOS | yes | +| placeholders | Defaults to\{ number: "1234 5678 1234 5678", expiry: "MM/YY", cvc: "CVC" \} | PropTypes.object | no | Android/iOS | yes | +| cardScale | Scales the credit-card view.Defaults to 1, which translates to \{ width: 300, height: 190 \} | PropTypes.number | no | Android/iOS | yes | +| cardFontFamily | Font family for the CreditCardView, works best with monospace fonts. Defaults to Courier (iOS) or monospace (android) | PropTypes.string | no | Android/iOS | yes | +| cardImageFront | Image for the credit-card view e.g. require("./card.png") | PropTypes.number | no | Android/iOS | yes | +| cardImageBack | Image for the credit-card view e.g. require("./card.png") | PropTypes.number | no | Android/iOS | yes | +| labelStyle | Style for credit-card form's labels | Text.propTypes.style | no | Android/iOS | yes | +| inputStyle | Style for credit-card form's textInput | Text.propTypes.style | no | Android/iOS | yes | +| inputContainerStyle | Style for textInput's containerDefaults to: \{ borderBottomWidth: 1, borderBottomColor:"black" \} | ViewPropTypes.style | no | Android/iOS | yes | +| validColor | Color that will be applied for valid text input. Defaults to: "\{inputStyle.color\}" | PropTypes.string | no | Android/iOS | yes | +| invalidColor | Color that will be applied for invalid text input. Defaults to: "red" | PropTypes.string | no | Android/iOS | yes | +| placeholderColor | Color that will be applied for text input placeholder. Defaults to: "gray" | PropTypes.string | no | Android/iOS | yes | +| requiresName | Shows cardholder's name field Default to false | PropTypes.bool | no | Android/iOS | yes | +| requiresCVC | Shows CVC field Default to true | PropTypes.bool | no | Android/iOS | yes | +| requiresPostalCode | Shows postalCode field Default to false | PropTypes.string | no | Android/iOS | yes | +| validatePostalCode | Function to validate postalCode, expects incomplete, valid, or invalid as return values | PropTypes.func | no | Android/iOS | yes | +| allowScroll | enables horizontal scrolling on CreditCardInput Defaults to false | PropTypes.bool | no | Android/iOS | yes | +| cardBrandIcons | brand icons for CardView. see ./src/Icons.js for details | PropTypes.object | no | Android/iOS | yes | +| additionalInputsProps | An object with Each key of the object corresponding to the name of the field. Allows you to change all props documented in RN TextInput. | PropTypes.objectOf(TextInput.propTypes) | no | Android/iOS | yes | + +### CardView + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| focused | Determines the front face of the card | PropTypes.string | no | Android/iOS | yes | +| brand | Brand of the credit card | PropTypes.string | no | Android/iOS | yes | +| name | Cardholder's name (Use empty string if you need to hide the placeholder) | PropTypes.string | no | Android/iOS | yes | +| number | Credit card number (you'll need to the formatting yourself) | PropTypes.string | no | Android/iOS | yes | +| expiry | Credit card expiry (should be in MM/YY format) | PropTypes.string | no | Android/iOS | yes | +| cvc | Credit card CVC | PropTypes.string | no | Android/iOS | yes | +| placeholder | Placeholder texts | PropTypes.object | no | Android/iOS | yes | +| scale | Scales the card | PropTypes.number | no | Android/iOS | yes | +| fontFamily | Defaults to Courier and monospace in iOS and Android respectively | PropTypes.string | no | Android/iOS | yes | +| imageFront | Image for the credit-card | PropTypes.number | no | Android/iOS | yes | +| imageBack | Image for the credit-card | PropTypes.number | no | Android/iOS | yes | +| customIcons | brand icons for CardView. see ./src/Icons.js for details | PropTypes.object | no | Android/iOS | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/sbycrosz/react-native-credit-card-input/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-crypto-js.md b/en/react-native-crypto-js.md new file mode 100644 index 00000000..b5b5ca6e --- /dev/null +++ b/en/react-native-crypto-js.md @@ -0,0 +1,162 @@ +> 模板版本：v0.2.2 + +

+

react-native-crypto-js

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/imchintan/react-native-crypto-js) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-crypto-js@1.0.0 +``` + +#### **yarn** + +```bash +yarn add react-native-crypto-js@1.0.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState } from 'react'; +import { + ScrollView, + Text, + View, + TextInput, + Button, + Alert +} from 'react-native'; +import CryptoJS from "react-native-crypto-js"; +//import CryptoJS from "rn-crypto-js"; + +function encrypt_str(text: string) { + let ciphertext = CryptoJS.AES.encrypt(text, 'secret key 123').toString(); + Alert.alert('encrypt：', ciphertext, [{ text: 'OK' }]); + return ciphertext; +} + +function decrypt_str(text: string) { + let bytes = CryptoJS.AES.decrypt(text, 'secret key 123'); + let originalText = bytes.toString(CryptoJS.enc.Utf8); + Alert.alert('decrypt：', originalText, [{ text: 'OK' }]); +} + +function encrypt_obj(text: string) { + let ciphertext = CryptoJS.AES.encrypt(JSON.stringify(text), 'secret key 123').toString(); + Alert.alert('encrypt：', ciphertext, [{ text: 'OK' }]); + return ciphertext; +} + +function decrypt_obj(text: string) { + let bytes = CryptoJS.AES.decrypt(text, 'secret key 123'); + let originalText = JSON.parse(bytes.toString(CryptoJS.enc.Utf8)); + Alert.alert('decrypt：', originalText, [{ text: 'OK' }]); + return originalText; +} + +function MD5_encrypt_str(text: string) { + let ciphertext = CryptoJS.MD5(text).toString(); + Alert.alert('encrypt：', ciphertext, [{ text: 'OK' }]); + return ciphertext; +} + +function HMD5_encrypt_str(text: string) { + let ciphertext = CryptoJS.HmacMD5(text, 'secret key 123').toString(); + Alert.alert('encrypt：', ciphertext, [{ text: 'OK' }]); + return ciphertext; +} + +export const ReactNativeCryptoJsExample = () => { + const [cryptText, setCryptText] = useState('test 123'); + const [cryptText1, setCryptText1] = useState('test123'); + const [cryptText2, setCryptText2] = useState('test123'); + const [decryptText, setDecryptText] = useState(''); + const [cryptObj, setCryptObj] = useState('[{id: 1}, {id: 2}]'); + const [decryptObj, setDecryptObj] = useState(''); + return ( + + Encrypt and decrypt character strings using the AES algorithm. + + ) => setCryptText(cryptText)} defaultValue={cryptText} /> + + + + + ); +}; + +export default App; +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-default-preference": "file:../../node_modules/@react-native-oh-tpl/react-native-default-preference/harmony/react_native_default_preference.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + + +### 3.在 ArkTs 侧引入 RNDefaultPreferencePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... + ++ import { RNDefaultPreferencePackage } from '@react-native-oh-tpl/react-native-default-preference/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNDefaultPreferencePackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： +[@react-native-oh-tpl/react-native-default-preference Releases](https://github.com/react-native-oh-library/react-native-default-preference/releases) + + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| get | Take out key-value pairs | function | yes | Android、iOS | yes | +| set | Set key-value pairs | function | yes | Android、iOS | yes | +| clear | Clear key-value pairs | function | yes | Android、iOS | yes | +| getMultiple | Take out multiple key-value pairs | function | yes | Android、iOS | yes | +| setMultiple | Set multiple key-value pairs | function | yes | Android、iOS | yes | +| clearMultiple | Clear multiple key-value pairs | function | yes | Android、iOS | yes | +| getAll | Take out all key-value pairs | function | no | Android、iOS | yes | +| clearAll | Clear all key-value pairs | function | no | Android、iOS | yes | +| getName | Gets the name of the Preferences instance. | function | no | Android、iOS | yes | +| setName | Sets the name of the Preferences instance. | function | yes | Android、iOS | yes | + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/kevinresol/react-native-default-preference/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-device-info.md b/en/react-native-device-info.md new file mode 100644 index 00000000..84a863f0 --- /dev/null +++ b/en/react-native-device-info.md @@ -0,0 +1,296 @@ + +> 模板版本：v0.2.2 + +

+

react-native-device-info

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-device-info) + + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-device-info Releases](https://github.com/react-native-oh-library/react-native-device-info/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-device-info@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-device-info@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js + +import DeviceInfo from 'react-native-device-info'; + DeviceInfo.getBundleId(); + DeviceInfo.getVersion(); + DeviceInfo.getReadableVersion(); + DeviceInfo.getBuildNumber(); + DeviceInfo.isTablet(); + DeviceInfo.getApplicationName(); + DeviceInfo.getBrand(); + DeviceInfo.getModel(); + DeviceInfo.getDeviceType(); +``` +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前HarmonyOS暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的HarmonyOS工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-device-info": "file:../../node_modules/@react-native-oh-tpl/react-native-device-info/harmony/device_info.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + + +### 3.在 ArkTs 侧引入 RNDeviceInfoPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import {RNDeviceInfoPackage} from '@react-native-oh-tpl/react-native-device-info/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNDeviceInfoPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-device-info Releases](https://github.com/react-native-oh-library/react-native-device-info/releases) + + +### 权限要求 + +#### 在 entry 目录下的module.json5中添加权限 + +打开 `entry/src/main/module.json5`，添加： + +```diff +... +"requestPermissions": [ + { + "name": "ohos.permission.GET_NETWORK_INFO" + }, + { + "name": "ohos.permission.GET_WIFI_INFO" + } +] +``` + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| getAndroidId |Gets the ANDROID_ID. See API documentation for appropriate use. | Promise| yes | Android | no | +| getApiLevel | Gets the API level. | Promise| yes | Android | yes | +| getApplicationName | Gets the application name. | string | yes | IOS/Android/Windows/visionOS | yes | +| getAvailableLocationProviders | Returns an object of platform-specfic location providers/servcies, with value whether or not they are currently available.boolean | Promise | yes | IOS/Android/visionOS | yes | +| getBaseOs | The base OS build the product is based on. | Promise | yes | Android/Windows/Web | yes | +| getBuildId | Gets build number of the operating system. | Promise | yes | IOS/Android/Windows/visionOS | yes | +| getBatteryLevel | Gets the battery level of the device as a float comprised between 0 and 1. | Promise | yes | IOS/Android /Windows/Web/visionOS | yes | +| getBootloader | The system bootloader version number. | Promise | yes | Android | yes | +| getBrand | Gets the device brand. | string | yes | IOS/Android/Windows/visionOS | yes | +| getBuildNumber | Gets the application build number. | string | yes | IOS/Android/Windows/visionOS | yes | +| getBundleId | Gets the application bundle identifier. | string | yes | IOS/Android/Windows/visionOS | yes | +| isCameraPresent | Tells if the device has any camera now. | Promise | yes | Android/Windows/Web | yes | +| getCarrier | Gets the carrier name (network operator). | Promise | yes | IOS/Android | yes | +| getCodename | The current development codename, or the string "REL" if this is a release build. | Promise | yes | Android | yes | +| getDevice | The name of the industrial design. | Promise | yes | Android | yes | +| getDeviceId |Gets the device ID. | string | yes | IOS/Android/Windows/visionOS | no | +| getDeviceType | TReturns the device's type as a string | string | yes | IOS/Android/visionOS | yes | +| getDisplay | A build ID string meant for displaying to the user. | Promise | yes | Android | yes | +| getDeviceName | Gets the device name. | Promise | yes | IOS/Android/Windows/visionOS | yes | +| getDeviceToken | Gets the device token (see DeviceCheck). Only available for iOS 11.0+ on real devices. This will reject the promise when getDeviceToken is not supported, be careful with exception handling. | Promise | yes | IOS/visionOS | no | +| getFirstInstallTime | Gets the time at which the app was first installed, in milliseconds. | Promise | yes | IOS/Android/Windows/visionOS | yes | +| getFingerprint | A string that uniquely identifies this build. | Promise | yes | Windows | no | +| getFontScale | Gets the device font scale. The font scale is the ratio of the current system font to the "normal" font size, so if normal text is 10pt and the system font is currently 15pt, the font scale would be 1.5 This can be used to determine if accessability settings has been changed for the device; you may want to re-layout certain views if the font scale is significantly larger ( > 2.0 ) | Promise | yes | IOS/Android/Windows | yes | +| getFreeDiskStorage | Method that gets available storage size, in bytes, taking into account both root and data file systems calculation. | Promise | yes | IOS/Android/Windows/Web/visionOS | no | +| getFreeDiskStorageOld | Old implementation of method that gets available storage size, in bytes. | Promise | yes | IOS/Android/Windows/Web/visionOS | no | +| getHardware | The name of the hardware (from the kernel command line or /proc). | Promise | yes | Android | yes | +| getHost | Hostname | Promise | yes | Android/Windows | yes| +| getHostNames | Hostnames | Promise | yes | Windows | no | +| getIpAddress | Deprecated Gets the device current IP address. (of wifi only) Switch to react-native-netinfo/netinfo or react-native-network-info | Promise | yes | IOS/Android/Windows/visionOS | yes | +| getIncremental | The internal value used by the underlying source control to represent this build. | Promise | yes | Android | yes | +| getInstallerPackageName | The internal value used by the underlying source control to represent this build. | Promise | yes | IOS/Android/Windows/visoinOS | yes | +| getInstallReferrer | Gets the referrer string upon application installation. | Promise | yes | Android/Windows/Web | no | +| getInstanceId | Gets the application instance ID. | Promise | yes | Android | yes| +| getLastUpdateTime | Gets the time at which the app was last updated, in milliseconds. | Promise | yes | Android | yes | +| getMacAddress | Gets the network adapter MAC address. | Promise | yes | IOS/Android/visionOS | no | +| getManufacturer | Gets the device manufacturer. | Promise | yes | IOS/Android/visoinOS | yes | +| getMaxMemory | Returns the maximum amount of memory that the VM will attempt to use, in bytes. | Promise | yes | Android/Windows/Web | no | +| getModel | Gets the device model. | string | yes | IOS/Android | yes | +| getPowerState | Gets the power state of the device including the battery level, whether it is plugged in, and if the system is currently operating in low power mode. | Promise | yes | IOS/Android/Windows/Web/visionOS | yes | +| getProduct | The name of the overall product. | Promise | yes | Android | yes | +| getPreviewSdkInt | The developer preview revision of a prerelease SDK. | Promise | yes | Android | no | +| getReadableVersion | Gets the application human readable version (same as getVersion() + '.' + getBuildNumber()) | string | yes | IOS/Android/Windows/visionOS | yes | +| getSerialNumber | Gets the device serial number. Will be 'unknown' in almost all cases unless you have a privileged app and you know what you're doing. | Promise | yes | Android/Windows | no | +| getSecurityPatch | The user-visible security patch level. | Promise | yes | Android | yes | +| getSystemAvailableFeatures | Returns a list of available system features on Android. | Promise | yes | Android | no | +| getSystemName | Gets the device OS name. | string | yes | IOS/Android/Windows/visoinOS | yes | +| getSystemVersion | Gets the device OS version. | string | yes | IOS/Android/Windows/visoinOS | yes | +| getTags | Comma-separated tags describing the build. | Promise | yes | Android | no | +| getType | The type of build. | Promise | yes | Android | yes | +| getTotalDiskCapacity | Method that gets full disk storage size, in bytes, taking into account both root and data file systems calculation. | Promise | yes | Android | no | +| getTotalDiskCapacityOld | Old implementation of method that gets full disk storage size, in bytes. | Promise | yes | Android | no | +| getTotalMemory | Gets the device total memory, in bytes. | Promise | yes | IOS/Android/Web/visionOS | no | +| getUniqueId | Gets the device unique ID. On Android it is currently identical to in this module. | Promise | yes | IOS/Android/Windows/visionOS | no | +| getUsedMemory | Gets the app memory usage, in bytes. | Promise | yes | IOS/Android/Windows/Web/visionOs | yes | +| getUserAgent | Gets the device User Agent. | Promise | yes | IOS/Android/Web/visionOs | no | +| getUserAgentSync | Gets the device User Agent. | string | yes | Android/Web | no | +| getVersion | Gets the application version. Take into account that a version string is device/OS formatted and can contain any additional data (such as build number etc.). If you want to be sure about version format, you can use a regular expression to get the desired portion of the returned version string. | string | yes | IOS/Android/Windows/visionOS | yes | +| getBrightness | Gets the current brightness level of the device's main screen. Currently iOS only. Returns a number between 0.0 and 1.0, inclusive. | Promise | yes | IOS | no | +| hasGms | Tells if the device supports Google Mobile Services. | Promise | yes | Android | yes | +| hasHms | Tells if the device supports Huawei Mobile Services. | Promise | yes | Android | yes | +| hasNotch | Tells if the device has a notch. | boolean | yes | IOS/Android/Windows/visionOS | no | +| hasDynamicIsland | Tells if the device has a dynamic island. | boolean | yes | IOS/Android/Windows/visionOS | no | +| hasSystemFeature | Tells if the device has a specific system feature. | Promise | yes | Android | no | +| isAirplaneMode | Tells if the device is in Airplane Mode. | Promise | yes | Android/ Web | yes | +| isBatteryCharging | Tells if the battery is currently charging. | Promise | yes | IOS/Android/Windows/Web/visionOS | yes | +| isEmulator | Tells if the application is running in an emulator. | Promise | yes | IOS/Android/Windows/visionOS | no | +| isKeyboardConnected | Tells if the device has a keyboard connected. | Promise | yes | Windows | yes | +| isLandscape | Tells if the device is currently in landscape mode. | Promise | yes | IOS/Android/Windows/visionOs | yes | +| isLocationEnabled | Allow access to user's location information | Promise | yes | IOS/Android/Web/visionOS | yes | +| isMouseConnected | Tells if the device has a mouse connected. | Promise | yes | Windows | yes | +| isHeadphonesConnected | Tells if the device has a Headphones connected. | Promise | yes | IOS/Android/visionOS | yes | +| isWiredHeadphonesConnected | Tells if the device has a WiredHeadphones connected. | Promise | yes | IOS/Android/visionOS | yes | +| isBluetoothHeadphonesConnected | Tells if the device has a BluetoothHeadphones connected. | Promise | yes | IOS/Android/visionOS | yes | +| isPinOrFingerprintSet | Tells if a PIN number or a fingerprint was set for the device. | Promise | yes | IOS/Android/Windows/visoinOs | yes | +| isTablet | Tells if the device is a tablet. | boolean | yes | IOS/Android/Windows/visoinOs | yes | +| isLowRamDevice | Tells if the device has low RAM. | boolean | yes | Android | yes | +| isDisplayZoomed | Tells if the user changed Display Zoom to Zoomed | boolean | yes | IOS | no | +| isTabletMode | Tells if the device is in tablet mode. | Promise | yes | Windows | no | +| supported32BitAbis | device support 32 Abis | Promise | yes | Windows | yes | +| supported64BitAbis | device support 64 Abis | Promise | yes | Windows | yes | +| supportedAbis | device support Abis | Promise | yes | IOS/Android/Windows/visoinOS | yes| +| syncUniqueId | This method is intended for iOS,This synchronizes uniqueId with IDFV or sets new a random string,On iOS it uses the DeviceUID uid identifier. On other platforms it just call getUniqueId() in this module. | Promise | yes | IOS/visionOS | no | +| getSupportedMediaTypeList | This method gets the list of supported media codecs. | Promise | yes | IOS/Android | yes | + + +## 遗留问题 + +- [ ] getDeviceId()接口harmony暂不支持[issue#8](https://github.com/react-native-oh-library/react-native-device-info/issues/8) +- [ ] getDeviceToken()接口harmony暂不支持[issue#9](https://github.com/react-native-oh-library/react-native-device-info/issues/9) +- [ ] getFingerprint()接口harmony暂不支持 [issue#10](https://github.com/react-native-oh-library/react-native-device-info/issues/10) +- [ ] getFreeDiskStorage()接口harmony暂不支持 [issue#11](https://github.com/react-native-oh-library/react-native-device-info/issues/11) +- [ ] getFreeDiskStorageOld()接口harmony暂不支持 [issue#12](https://github.com/react-native-oh-library/react-native-device-info/issues/12) +- [ ] getInstallReferrer()接口harmony暂不支持 [issue#13](https://github.com/react-native-oh-library/react-native-device-info/issues/13) +- [ ] getMacAddress()接口harmony暂不支持 [issue#14](https://github.com/react-native-oh-library/react-native-device-info/issues/14) +- [ ] getMaxMemory()接口harmony暂不支持 [issue#15](https://github.com/react-native-oh-library/react-native-device-info/issues/15) +- [ ] getSerialNumber()接口harmony暂不支持 [issue#16](https://github.com/react-native-oh-library/react-native-device-info/issues/16) +- [ ] getTags()接口harmony暂不支持 [issue#17](https://github.com/react-native-oh-library/react-native-device-info/issues/17) +- [ ] getTotalDiskCapacity()接口harmony暂不支持 [issue#18](https://github.com/react-native-oh-library/react-native-device-info/issues/18) +- [ ] getTotalDiskCapacityOld()接口harmony暂不支持 [issue#19](https://github.com/react-native-oh-library/react-native-device-info/issues/19) +- [ ] getTotalMemory()接口harmony暂不支持 [issue#20](https://github.com/react-native-oh-library/react-native-device-info/issues/20) +- [ ] getUniqueId()接口harmony暂不支持 [issue#21](https://github.com/react-native-oh-library/react-native-device-info/issues/21) +- [ ] syncUniqueId()接口harmony暂不支持 [issue#22](https://github.com/react-native-oh-library/react-native-device-info/issues/22) +- [ ] getUserAgent()接口harmony暂不支持 [issue#23](https://github.com/react-native-oh-library/react-native-device-info/issues/23) +- [ ] getUserAgentSync()接口harmony暂不支持 [issue#24](https://github.com/react-native-oh-library/react-native-device-info/issues/24) +- [ ] hasNotch()接口harmony暂不支持 [issue#25](https://github.com/react-native-oh-library/react-native-device-info/issues/25) +- [ ] hasDynamicIsland()接口harmony暂不支持 [issue#26](https://github.com/react-native-oh-library/react-native-device-info/issues/26) +- [ ] hasSystemFeature()接口harmony暂不支持 [issue#27](https://github.com/react-native-oh-library/react-native-device-info/issues/27) +- [ ] isEmulator()接口harmony暂不支持 [issue#28](https://github.com/react-native-oh-library/react-native-device-info/issues/28) +- [ ] isDisplayZoomed()接口harmony暂不支持 [issue#29](https://github.com/react-native-oh-library/react-native-device-info/issues/29) +- [ ] getBrightness()接口harmony暂不支持 [issue#30](https://github.com/react-native-oh-library/react-native-device-info/issues/30) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-device-info/react-native-device-info/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-dismiss-keyboard.md b/en/react-native-dismiss-keyboard.md new file mode 100644 index 00000000..a0b9c4ec --- /dev/null +++ b/en/react-native-dismiss-keyboard.md @@ -0,0 +1,161 @@ + +> 模板版本：v0.2.0 + +

+

react-native-dismiss-keyboard

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/DanielMSchmidt/react-native-dismiss-keyboard) + + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + + +#### **npm** + +```bash +npm install react-native-dismiss-keyboard@1.0.0 +``` + +#### **yarn** + +```bash +yarn add react-native-dismiss-keyboard@1.0.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +```js +import React, { Component } from 'react'; +import { + AppRegistry, + StyleSheet, + TextInput, + View, + Text, + Keyboard +} from 'react-native'; + +export default class ReactNativeDismissKeyboardExample extends Component { + + keyboardDidShowListener = null; + keyboardDidHideListener = null; + state = { KeyboardShown: false }; + + constructor(props) { + super(props); + this.keyboardDidShowListener = null; + this.keyboardDidHideListener = null; + this.state = { KeyboardShown: false }; + } + + //键盘弹出事件响应 + keyboardDidShowHandler(event) { + this.setState({ KeyboardShown: true }); + console.log(event.endCoordinates.height); + } + + //键盘隐藏事件响应 + keyboardDidHideHandler(event) { + this.setState({ KeyboardShown: false }); + } + + //强制隐藏键盘 + dissmissKeyboard() { + Keyboard.dismiss(); + console.log("输入框当前焦点状态：" + this.refs.bottomInput.isFocused()); + } + + render() { + return ( + + + + + 收起键盘 + + + + ) + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + paddingTop: 15, + backgroundColor: '#ffffff' + }, + flexDirection: { + flexDirection: 'row' + }, + inputHeight: { + height: 35, + alignItems: 'center' + }, + textInputStyle: { + flex: 1, + height: 35, + fontSize: 18, + borderWidth: 1, + borderColor: '#4CAF50', + borderRadius: 8, + marginRight: 8 + }, + buttonStyle: { + fontSize: 20, + color: 'white', + width: 100, + textAlign: 'center', + backgroundColor: '#4CA300' + }, +}); +``` +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 电脑ROM。 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18、IDE：DevEco Studio 5.0.3.200; ROM：2.0.0.18; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Prop | Description | Type | Required | Platform | HarmonyOS Support | +| ----- | ----- | -------- | -------- | -------- | -------- | +| `addListener` | Register a JavaScript function that listens to handle native keyboard notification events. | function | no | All | yes | +| `dismiss` | Retract the pop-up keyboard and make the current text box lose focus. | function | no | All | yes | +| `scheduleLayoutAnimation` |Used to synchronize changes in the size or position of a TextInput (or other keyboard attachment view) with keyboard movements.| function | no | All | yes | +| `isVisible` | Whether the keyboard is currently displayed.| function | no | All | yes | +| `metrics` | If a soft keyboard is displayed, return the size of the soft keyboard.| function | no | All | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 +本项目基于 [The MIT License (MIT)](https://github.com/DanielMSchmidt/react-native-dismiss-keyboard/blob/master/LICENSE) ，请自由地享受和参与开源。 + \ No newline at end of file diff --git a/en/react-native-doc-viewer.md b/en/react-native-doc-viewer.md new file mode 100644 index 00000000..c758ab37 --- /dev/null +++ b/en/react-native-doc-viewer.md @@ -0,0 +1,437 @@ + +> 模板版本：v0.2.2 + +

+

react-native-doc-viewer

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-doc-viewer) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-doc-viewer Releases](https://github.com/react-native-oh-library/react-native-doc-viewer/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-doc-viewer@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-doc-viewer@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { Component } from 'react'; +import { + AppRegistry, + StyleSheet, + Text, + View, + Platform, + Button, + Alert, + ActivityIndicator, + NativeAppEventEmitter, + DeviceEventEmitter, + NativeModules, + NativeEventEmitter, + TouchableHighlight +} from 'react-native'; +import OpenFile from 'react-native-doc-viewer'; +var RNFS = require('react-native-fs'); +var SavePath = Platform.OS === 'ios' ? RNFS.MainBundlePath : RNFS.DocumentDirectoryPath; +export default class DocumentViewerExample extends Component { + constructor(props) { + super(props); + this.state = { + animating: false, + progress: "", + donebuttonclicked: false, + } + this.eventEmitter = new NativeEventEmitter(NativeModules.RNReactNativeDocViewer); + this.eventEmitter.addListener('DoneButtonEvent', (data) => { + /* + *Done Button Clicked + * return true + */ + console.log(data.close); + this.setState({donebuttonclicked: data.close}); + }) + this.didPressToObjcButton = this.didPressToObjcButton.bind(this); + } + + componentDidMount(){ + // download progress + this.eventEmitter.addListener( + 'RNDownloaderProgress', + (Event) => { + console.log("Progress - Download "+Event.progress + " %") + this.setState({progress: Event.progress + " %"}); + } + + ); + } + + componentWillUnmount (){ + this.eventEmitter.removeListener(); + } + /* + * Handle WWW File Method + * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url the File Extension is missing. + */ + handlePress = () => { + this.setState({animating: true}); + if(Platform.OS === 'ios'){ + OpenFile.openDoc([{ + url:"https://calibre-ebook.com/downloads/demos/demo.docx", + fileNameOptional:"test filename" + }], (error, url) => { + if (error) { + this.setState({animating: false}); + } else { + this.setState({animating: false}); + console.log(url) + } + }) + }else{ + this.setState({animating: true}); + OpenFile.openDoc([{ + url:"https://www.huf-haus.com/fileadmin/Bilder/Header/ART_3/Header_HUF_Haus_ART_3___1_.jpg", // Local "file://" + filepath + fileName:"sample", + cache:false, + fileType:"jpg" + }], (error, url) => { + if (error) { + this.setState({animating: false}); + console.error(error); + } else { + this.setState({animating: false}); + console.log(url) + } + }) + } + + } + + + /* + * Handle Local File Method + * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url the File Extension is missing. + */ + handlePressLocal = () => { + this.setState({animating: true}); + if(Platform.OS === 'ios'){ + OpenFile.openDoc([{url:SavePath+"/react-native-logo.jpg", + fileNameOptional:"test filename" + }], (error, url) => { + if (error) { + this.setState({animating: false}); + } else { + this.setState({animating: false}); + console.log(url) + } + }) + }else{ + OpenFile.openDoc([{url:SavePath+"/demo.jpg", + fileName:"sample", + cache:false, + fileType:"jpg" + }], (error, url) => { + if (error) { + this.setState({animating: false}); + } else { + this.setState({animating: false}); + console.log(url) + } + }) + + } + } + + handlePressLocalXLS = () => { + this.setState({animating: true}); + if(Platform.OS === 'ios'){ + OpenFile.openDoc([{url:SavePath+"/SampleXLSFile_19kb.xls", + fileNameOptional:"Sample XLS 94-2003" + }], (error, url) => { + if (error) { + this.setState({animating: false}); + } else { + this.setState({animating: false}); + console.log(url) + } + }) + }else{ + OpenFile.openDoc([{url:SavePath+"/demo.jpg", + fileName:"sample", + cache:false, + fileType:"jpg" + }], (error, url) => { + if (error) { + this.setState({animating: false}); + } else { + this.setState({animating: false}); + console.log(url) + } + }) + + } + } + + + /* + * Binary in URL + * Binary String in Url + * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions + */ + handlePressBinaryinUrl = () => { + this.setState({animating: true}); + if(Platform.OS === 'ios'){ + OpenFile.openDocBinaryinUrl([{ + url:"https://storage.googleapis.com/need-sure/example", + fileName:"sample", + fileType:"xml" + }], (error, url) => { + if (error) { + console.error(error); + this.setState({animating: false}); + } else { + console.log(url) + this.setState({animating: false}); + } + }) + }else{ + OpenFile.openDocBinaryinUrl([{ + url:"https://storage.googleapis.com/need-sure/example", + fileName:"sample", + fileType:"xml", + cache:true + }], (error, url) => { + if (error) { + console.error(error); + this.setState({animating: false}); + } else { + console.log(url) + this.setState({animating: false}); + } + }) + } + } + + /* + * Base64String + * put only the base64 String without data:application/octet-stream;base64 + * fileType Default == "" you can use it, to set the File Extension (pdf,doc,xls,ppt etc) when in the Url you dont have an File Extensions + */ + handlePressb64 = () => { + if(Platform.OS === 'ios'){ + OpenFile.openDocb64([{ + base64:"{BASE64String}" + fileName:"sample", + fileType:"png" + }], (error, url) => { + if (error) { + console.error(error); + } else { + console.log(url) + } + }) + }else{ + OpenFile.openDocb64([{ + base64:"{BASE64String}" + fileName:"sample", + fileType:"png", + cache:true + }], (error, url) => { + if (error) { + console.error(error); + } else { + console.log(url) + } + }) + } + + /* + * Video File + */ + handlePressVideo = () => { + if(Platform.OS === 'ios'){ + OpenFile.playMovie(video, (error, url) => { + if (error) { + console.error(error); + } else { + console.log(url) + } + }) + }else{ + Alert.alert("Android coming soon"); + } + } + + + + + + + FileAccess.readFile() + + + 读取的文件内容：{fileContent} + + + FileAccess.unlink() + + + + + FileAccess.mkdir() + + + 新目录路径：{mkdirParam} + + + FileAccess.mv() + + + + + FileAccess.stat() + + + 文件信息：{statInfo} + + + + FileAccess.exists() + + + 文件是否存在：{isExists === '' ? '' : isExists ? '存在' : '不存在'} + + + FileAccess.cp() + + + + + FileAccess.isDir() + + + 是否是目录：{dirOrNot === '' ? '' : dirOrNot ? '是' : '不是'} + + + + FileAccess.ls() + + + 目录中的文件：{lsList} + + + + FileAccess.df() + + + 可用空间：{freeSize ? (freeSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB + 总空间：{totalSize ? (totalSize / (1024 * 1024 * 1024)).toFixed(2) : ''}GB + + + + FileAccess.hash() + + + 哈希值：{hashValue} + + + FileAccess.unzip() + + + + + FileAccess.statDir() + + + 以下为目录下的文件信息： + {statDirInfo.map((item, index) => ({JSON.stringify(item)}))} + + + + FileAccess.readFileChunk() + + + 读取的部分文件内容：{readFileChunkInfo} + + + FileAccess.appendFile() + + + + + FileAccess.concatFiles() + + + 写入的字节数：{concatBeyts} + + + ); +} + +const styles = StyleSheet.create({ + container: { flex: 1 }, + key: { flex: 1.5, padding: 2 }, + row: { flexDirection: 'row', paddingVertical: 2 }, + value: { flex: 4, padding: 2 }, + baseArea: { + width: "100%", + height: 60, + borderRadius: 4, + borderColor: "#000000", + marginTop: 6, + backgroundColor: "#FFFFFF", + flexDirection: "row", + alignItems: "center", + paddingLeft: 8, + paddingRight: 8, + }, +}); + +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +``` +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-file-access": "file:../../node_modules/@react-native-oh-tpl/react-native-file-access/harmony/file_access.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 RNFileAccessPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { RNFileAccessPackage } from '@react-native-oh-tpl/react-native-file-access/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNFileAccessPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-file-access Releases](https://github.com/react-native-oh-library/react-native-file-access/releases) + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +#### File System Access API + +| Name | Description | Type | Platform | Required | HarmonyOS Support | +| -------------- | ---------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | +| appendFile | Append content to a file. | Function | No | iOS/Android | Yes | +| concatFiles | Append a file to another file. Returns number of bytes written. | Function | No | iOS/Android | Yes | +| cp | Copy a file. | Function | No | iOS/Android | Yes | +| cpAsset | Copy a bundled asset file. | Function | No | iOS/Android | Yes | +| cpExternal | Copy a file to an externally controlled location. | Function | No | iOS/Android | Yes | +| df | Check device available space. | Function | No | iOS/Android | Yes | +| exists | Check if a path exists. | Function | No | iOS/Android | Yes | +| fetch | Save a network request to a file. | Function | No | iOS/Android | Yes | +| getAppGroupDir | Get the directory for your app group (iOS & MacOS only). | Function | No | iOS | No | +| hash | Hash the file content. | Function | No | iOS/Android | Yes | +| isDir | Check if a path is a directory. | Function | No | iOS/Android | Yes | +| ls | List files in a directory. | Function | No | iOS/Android | Yes | +| mkdir | Make a new directory. | Function | No | iOS/Android | Yes | +| mv | Move a file. | Function | No | iOS/Android | Yes | +| readFile | Read the content of a file. | Function | No | iOS/Android | Yes | +| readFileChunk | Read a chunk of the content of a file, starting from byte at offset, reading for length bytes. | Function | No | iOS/Android | Yes | +| stat | Read file metadata. | Function | No | iOS/Android | Yes | +| statDir | Read metadata of all files in a directory. | Function | No | iOS/Android | Yes | +| unlink | Delete a file. | Function | No | iOS/Android | Yes | +| unzip | Extract a zip archive. | Function | No | iOS/Android | Yes | +| writeFile | Write content to a file. | Function | No | iOS/Android | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/alpha0010/react-native-file-access/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-file-selector.md b/en/react-native-file-selector.md new file mode 100644 index 00000000..79748e50 --- /dev/null +++ b/en/react-native-file-selector.md @@ -0,0 +1,210 @@ + +> 模板版本：v0.2.2 + +

+

react-native-file-selector

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-file-selector) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-file-selector@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-file-selector@file:# +``` + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```jsx +import FileSelector from 'react-native-file-selector'; +import React from 'react'; +function App(): React.JSX.Element { + + return ( + {console.log("file selected: " + path);}} + onCancel={() => {console.log("cancelled");}} + />) +}; +export default App; +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "file:./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony" : "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-file-selector": "file:../../node_modules/@react-native-oh-tpl/react-native-file-selector/harmony/file_selector.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + + +### 3.在 ArkTs 侧引入 RNFileSelectorPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... +import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts'; ++import {RNFileSelectorPackage} from '@react-native-oh-tpl/react-native-file-selector/ts'; + + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ ++ new RNFileSelectorPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-file-selector Releases](https://github.com/react-native-oh-library/react-native-file-selector/releases) + +## 属性 + + FileSelector + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | ----------- | ---- | -------- | -------- | ------------------ | +| filter | Filter to sort the files | string | no | All | yes | +| path | Path of directory | string | no | All | yes | +| onDone | Function called when file is selected | func | no | All | yes | +| onCancel | Function called when file selector is closed without selecting any file | func | no | All | yes | +| title | Title on the toolbar | string | no | Android iOS | no | +| closeMenu | Color of tint | string | no | Android iOS | no | +| hiddenFiles | If true it shows hidden files as well | bool | no | Android | no | +| filterDirectories | Filter should be applied on directories or not | bool | no | Android | no | + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| Show | present a fileselector | function | no | All | yes | + + Show + +```js +Show(filter?: string, path?: string, onDone?: func, onCancel?: func, title?: string, closeMenu?: string, hiddenFiles?: bool, filterDirectories?: bool); +``` + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | ----------- | ---- | -------- | -------- | ------------------ | +| filter | Filter to sort the files | string | no | All | yes | +| path | Path of directory | string | no | All | yes | +| onDone | Function called when file is selected | func | no | All | yes | +| onCancel | Function called when file selector is closed without selecting any file | func | no | All | yes | +| title | Title on the toolbar | string | no | Android iOS | no | +| closeMenu | Color of tint | string | no | Android iOS | no | +| hiddenFiles | If true it shows hidden files as well | bool | no | Android | no | +| filterDirectories | Filter should be applied on directories or not | bool | no | Android | no | + +## 遗留问题 + + +- [ ] FileSelector title：harmony暂不支持: [issue#4](https://github.com/react-native-oh-library/react-native-file-selector/issues/4) +- [ ] FileSelector closeMenu：harmony暂不支持: [issue#5](https://github.com/react-native-oh-library/react-native-file-selector/issues/5) +- [ ] FileSelector hiddenFiles：harmony暂不支持: [issue#6](https://github.com/react-native-oh-library/react-native-file-selector/issues/6) +- [ ] FileSelector filterDirectories：harmony暂不支持: [issue#7](https://github.com/react-native-oh-library/react-native-file-selector/issues/7) + +- [ ] Show title：harmony暂不支持: [issue#4](https://github.com/react-native-oh-library/react-native-file-selector/issues/4) +- [ ] Show closeMenu：harmony暂不支持: [issue#5](https://github.com/react-native-oh-library/react-native-file-selector/issues/5) +- [ ] Show hiddenFiles：harmony暂不支持: [issue#6](https://github.com/react-native-oh-library/react-native-file-selector/issues/6) +- [ ] Show filterDirectories：harmony暂不支持: [issue#7](https://github.com/react-native-oh-library/react-native-file-selector/issues/7) + +## 其他 + +## 开源协议 + +本项目基于 [Apache License 2.0](https://github.com/prscX/react-native-file-selector/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-file-viewer.md b/en/react-native-file-viewer.md new file mode 100644 index 00000000..130d2429 --- /dev/null +++ b/en/react-native-file-viewer.md @@ -0,0 +1,260 @@ + + +> 模板版本：v0.2.2 + +

+

react-native-file-viewer +

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-file-viewer) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-file-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-file-viewer@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-file-viewer@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import { StyleSheet, ScrollView, Text, TouchableOpacity } from "react-native"; +import DocumentPicker from "react-native-document-picker"; +import FileViewer from "react-native-file-viewer"; + +export function FlieViewerExample() { + const FileViewerTest = async (option?: any) => { + try { + // 使用react-native-document-picker来选择本地文件进行打开 + const res: any = await DocumentPicker.pick({ + type: [DocumentPicker.types.allFiles] + }); + // uri 为本地文件绝对路径 + await FileViewer?.open(res[0].uri, option); + } catch (e) { + // error + } + }; + + const onDismissCb = () => { + // do sth ... + }; + + return ( + + FileViewerTest()} style={styles.btn}> + Toogle Status Bar + + FileViewerTest("show_displayName string")} style={styles.btn}> + Toogle Status Bar (displayName str) + + FileViewerTest({ displayName: "show_displayName option" })} style={styles.btn}> + Toogle Status Bar (displayName opt) + + FileViewerTest({ showOpenWithDialog: true, onDismiss: onDismissCb })} style={styles.btn}> + Toogle Status Bar (onDismiss) + + FileViewerTest({ showOpenWithDialog: true })} style={styles.btn}> + Toogle Status Bar (showOpenWithDialog) + + FileViewerTest({ showAppsSuggestions: true })} style={styles.btn}> + Toogle Status Bar (showAppsSuggestions) + + + ); +} + +const styles = StyleSheet.create({ + TextInput: { + height: 40, + borderColor: "#ccc", + borderWidth: 1, + borderRadius: 4, + width: "90%" + }, + btn: { + borderRadius: 10, + display: "flex", + justifyContent: "center", + alignItems: "center", + padding: 10, + margin: 10, + backgroundColor: "blue" + }, + btnText: { + fontWeight: "bold", + color: "#fff", + fontSize: 20 + }, + selectBtn: { + padding: 8, + margin: 3, + fontSize: 18, + borderWidth: 1, + borderRadius: 8, + borderColor: "#753c13" + }, + selectBtnActive: { + padding: 8, + margin: 3, + backgroundColor: "#e2803b", + fontSize: 18, + borderRadius: 8, + borderWidth: 1 + } +}); +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-file-viewer": "file:../../node_modules/@react-native-oh-tpl/react-native-file-viewer/harmony/file_viewer.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 RNFileViewerTurboModule Package + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { RNFileViewerPackage } from '@react-native-oh-tpl/react-native-file-viewer/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNFileViewerPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-file-viewer Releases](https://github.com/react-native-oh-library/react-native-file-viewer/releases) + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +### `open(filepath: string, options?: Object): Promise` + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --- | --- | --- | --- | --- | --- | +| **filepath** | The absolute path where the file is stored. The file needs to have a valid extension to be successfully detected. Use [react-native-fs constants](https://github.com/itinance/react-native-fs#constants) to determine the absolute path correctly. | string | yes | All | yes | +| **options** (optional) | Some options to customize the behaviour. See below. | Object | no | All | yes | + +#### Options + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --- | --- | --- | --- | --- | --- | +| **displayName** (optional) | Customize the QuickLook title. | string | no | iOS | yes | +| **onDismiss** (optional) | Callback invoked when the viewer is being dismissed. | function | no | All | partially | +| **showOpenWithDialog** (optional) | If there is more than one app that can open the file, show an _Open With_ dialogue box. | boolean | no | Android | yes | +| **showAppsSuggestions** (optional) | If there is not an installed app that can open the file, open the Play Store with suggested apps. | boolean | no | Android | partially | + +## 遗留问题 + +- [x] HarmonyOS端暂不支持关闭预览窗口的回调函数调用: [issue#1](https://github.com/react-native-oh-library/react-native-file-viewer/issues/4) +- [x] HarmonyOS端无法直接跳转到应用市场的推荐应用页，目前只能跳转到应用市场首页: [issue#2](https://github.com/react-native-oh-library/react-native-file-viewer/issues/5) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/vinzscam/react-native-file-viewer/blob/master/LICENSE) ，请自由地享受和参与开源。 + + diff --git a/en/react-native-fileupload.md b/en/react-native-fileupload.md new file mode 100644 index 00000000..eae58a48 --- /dev/null +++ b/en/react-native-fileupload.md @@ -0,0 +1,231 @@ + +> 模板版本：v0.2.2 + +

+

react-native-fileupload

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-fileupload) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-fileupload Releases](https://github.com/react-native-oh-library/react-native-fileupload/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-fileupload@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-fileupload@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +此库需要在`entry/src/main/module.json5`下加入： + +```json +"requestPermissions": [ + { + "name": "ohos.permission.INTERNET", + } +] +``` + +```tsx +import React, {Component} from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import FileUpload from 'react-native-fileupload'; +import Toast from '@remobile/react-native-toast'; + +export default class FileUploadDemo extends Component { + + componentDidMount () { + var obj = { + uploadUrl: 'http://1.2.27.230:9990/upload',// The real server Url + method: 'POST', // default 'POST',support 'POST' and 'PUT' + headers: { + + 'Content-Type': 'multipart/form-data', + }, + fields: { + name: 'hello',value: 'world', + }, + files: [ + { + name: 'file',// optional + filename: 'assets_placeholder2000x2000.jpg', + filepath: '/xxx/assets_placeholder2000x2000.jpg',// The real server filepath + filetype: 'jpg',// optional + }, + { + filename: 'one.w4a', + filepath: '/xxx/one.w4a', // The real server filepath + filetype: 'audio/x-m4a',// optional + }, + ] + }; + FileUpload.upload(obj, function(err,result) { + console.log("upload",err,result); + if(err || result) { + Toast.showShortCenter(err + result) + } + }) + } + render() { + return ( + + + Welcome to React Native! + + + ); + } +} + +let styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, +}); +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-fileupload": "file:../../node_modules/@react-native-oh-tpl/react-native-fileupload/harmony/fileupload.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 FileUpLoadPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import {FileUpLoadPackage} from '@react-native-oh-tpl/react-native-fileupload/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new FileUpLoadPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-fileupload Releases](https://github.com/react-native-oh-library/react-native-fileupload/releases) + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| upload | File upload | void | yes | iOS/Android | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/PhilippKrone/react-native-fileupload/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-fingerprint-scanner.md b/en/react-native-fingerprint-scanner.md new file mode 100644 index 00000000..9e8b5d04 --- /dev/null +++ b/en/react-native-fingerprint-scanner.md @@ -0,0 +1,237 @@ + +> 模板版本：v0.2.2 + +

+

react-native-fingerprint-scanner

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-fingerprint-scanner) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-fingerprint-scanner Releases](https://github.com/react-native-oh-library/react-native-fingerprint-scanner/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-fingerprint-scanner@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-fingerprint-scanner@file:# +``` + + + +快速使用： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import { View, Button } from "react-native"; +import FingerprintScanner from 'react-native-fingerprint-scanner'; + +export default function App() { + const handleClick = () => { + FingerprintScanner + .isSensorAvailable() + .then((Biometrics) => { + }).catch((err) => { + }); + } + const handleScanner = () => { + FingerprintScanner.authenticate({title: '1111'}) + .then(() => { + }).catch((err) => { + }); + } + const handleAttempt = () => { + let eror = FingerprintScanner.onAttempt() + } + const handleRelease = () => { + FingerprintScanner.release() + } + return ( + + + {refLoadData&&( + + 刷新了{reshUiData}次 + + 测试onLoad + {onLoadDatea} + {console.log('执行了onLoad'); setOnLoad('执行了onLoad')}} + style={styles.fitImageWithSize} source={require('./assets/expo.png')} /> + + + 测试base64图片 + + + + 测试属性originalWidth，originalHeight（在不加宽度高度的情况下） + + + + 不加originalWidth，originalHeight和不加宽度高度的情况下 + + + + 不加originalWidth，originalHeight但是加宽度高度的情况下 + + + + 不加originalWidth，originalHeight但是加宽度高度的情况下的网络图片 + + + + 加originalWidth，originalHeight但是不加宽度高度的情况下的网络图片 + + + + 同时加originalWidth，originalHeight和宽度高度的情况下 + + + + + indicator(加载器 为true) indicatorColor(加载器颜色) indicatorSize(值：large small number) + 值为：large + + + + indicator(加载器 为true) indicatorColor(加载器颜色) indicatorSize(值：large small number) + small + + + + indicator(加载器 为true) indicatorColor(加载器颜色) indicatorSize(值：large small number) + number:值越大指示器越大 + + + + indicator(加载器 为false) + number:值越大指示器越大 + + + + + 验证网络图片 + + + + 获取本地图片宽高 + + 宽度：{imgSizeNum.width},高度：{imgSizeNum.height} + + + + 验证网络图片宽高 + 宽度：{imgHttpSize.width},高度：{imgHttpSize.height} + + + + 验证图片圆角 + + + + 测试resizeMode(cover contain stretch repeat center)，值为cover + + + + 测试resizeMode(cover contain stretch repeat center)，值为contain + + + + 测试resizeMode(cover contain stretch repeat center)，值为stretch + + + + 测试resizeMode(cover contain stretch repeat center)，值为repeat + + + + 测试resizeMode(cover contain stretch repeat center)，值为center + + + + + 测试onError + {onErrorDatea} + {console.log('执行了onError'); setOnError('执行了onError')}} + style={styles.fitImageWithSize} source={{uri:'https://ok.gitHub.io123.png'}} /> + + + 测试onLoadStart + {onLoadStartDatea} + {console.log('执行了onLoadStart');setOnLoadStart('执行了onLoadStart')}} + style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')} /> + + + 测试onLayOut + {onLayOutData} + {console.log('执行了onLayout');setOnLayout('执行了onLayout')}} + style={{...styles.fitImageWithSize,borderRadius:20}} source={require('./assets/expo.png')} /> + + + 测试blurRadius(模糊滤镜，值越大越模糊) + + + + )} + {!refLoadData&&( + + + 加载中。。。。。。 + + + )} + + + ) +} +export default FitImageDemo; +``` + +## 约束与限制 + +### 兼容性 + +在以下版本验证通过 + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.21; + +## 属性 + +[!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | Remark | +| ------------------ |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------------- | -------- | ----------------------------- | ----------------- | ------------------------------------------------------------ | +| `style` | 图片宽(width)高(height)，边框等样式 | object | yes | Android IOS | YES | 在不加orginalWidth与orginalHeight属性时，style里面必须设置宽width，高height才能把图片加载出来 | +| `source` | 图片文件源： 本地图片 source={require('./assets/expo.png')}；
网络图片 source={{uri:"xxx"}} | string | yes | Android IOS | YES | | +| `width` | 图片style中属性 | number | yes | Android IOS | YES | | +| `height` | 图片style中属性 | number | yes | Android IOS | YES | | +| `borderRadius` | 图片样式（圆角） | number | No | Android IOS HarmonyOS都不支持 | NO | 此属性在HarmonyOS，Android ，IOS均不生效;[issues](https://github.com/huiseoul/react-native-fit-image/issues/111) | +| `indicator` | 加载器值为true/false (默认true) | boolean | No | Android IOS | YES | | +| `indicatorColor` | 加载器颜色 | string | No | Android IOS | YES | | +| `indicatorSize` | 加载器大小 值：`large` `small` number(例: indicatorSize={20} ) | string/number | No | Android IOS | YES | | +| resizeMode | 图片布局 值(cover contain stretch repeat center) `cover`: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。**译注**：这样图片完全覆盖甚至超出容器，容器中不留任何空白。 `contain`: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有 padding 内衬的话，则相应减去）。**译注**：这样图片完全被包裹在容器中，容器中可能留有空白。 `stretch`: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。 `repeat`: 重复平铺图片直到填满容器。图片会维持原始尺寸，但是当尺寸超过容器时会在保持宽高比的前提下缩放到能被容器包裹。 `center`: 居中不拉伸。 | string | No | Android IOS | YES | | +| blurRadius | 图片模糊滤镜（值越大越模糊） | number | No | Android IOS | YES | | +| onLoad | 图片加载成功回调 | Function | No | Android IOS | YES | | +| resolveAssetSource | 获取本地图片宽高 用法：const img1 = require('./assets/expo.png') let res = Image.resolveAssetSource(img1) | Function | No | Android IOS | YES | | +| getSize | 获取网络图片尺寸：Image.getSize(uri,(width,height)=>{},(fail)=>{}) | Function | No | Android IOS | YES | | +| onError | 获取图片资源出错 | Function | No | Android IOS HarmonyOS都不支持 | NO | [issues](https://github.com/huiseoul/react-native-fit-image/issues/76)；在原库中作者已经说明Some props are not working | +| onLoadStart | 资源刚加载时候 | Function | NO | Android IOS HarmonyOS都不支持 | NO | [issues](https://github.com/huiseoul/react-native-fit-image/issues/76)；在原库中作者已经说明Some props are not working | +| onLayout | 资源改变尺寸或者加载时 | Function | NO | Android IOS HarmonyOS都不支持 | NO | [issues](https://github.com/huiseoul/react-native-fit-image/issues/76)；在原库中作者已经说明Some props are not working | +| orginalWidth | 图片原始宽度 | number | NO | Android IOS | YES | | +| orginalHeight | 图片原始高度 | number | NO | Android IOS | YES | | + +## 遗留问题 + +- [ ] 在react-native-fit-image三方库中`onError`.`onLoadStart`.`onLayout`回调方法，在原库文档（react-native-fit-image）作者已说明并没有适配（Some props are not working），有待开发：[issues](https://github.com/huiseoul/react-native-fit-image/issues/76) +- [ ] `borderRadius`图片圆角属性，在 HarmonyOS ，ios，安卓均不支持，官方文档互动有提到borderRadius不生效：[issues](https://github.com/huiseoul/react-native-fit-image/issues/111) + +## 其他 + +## 开源协议 + +本项目基于 [THE BEER-WARE LICENSE](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fhuiseoul%2Freact-native-fit-image%2Fblob%2Fmaster%2FLICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-flash-message.md b/en/react-native-flash-message.md new file mode 100644 index 00000000..b1e6f798 --- /dev/null +++ b/en/react-native-flash-message.md @@ -0,0 +1,162 @@ + +> 模板版本：v0.2.2 + +

+

react-native-flash-message

+

+

+ + Supported platforms + + + License + +

+ +> [!Tip] [Github 地址](https://github.com/lucasferreira/react-native-flash-message) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-flash-message@0.4.2 +``` + +#### **yarn** + +```bash +yarn add react-native-flash-message@0.4.2 +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +// FlashMessage组件是为全局使用而构建的，因此您必须在主应用程序屏幕中实例化此组件一次，并始终将其作为最后插入的组件 +import React from 'react'; +import {SafeAreaView, View,} from 'react-native'; +import FlashMessage from "react-native-flash-message"; +function App() { + return ( + + + + + + ); +} +export default App; + +``` + +```js +import {StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native'; +import {showMessage, hideMessage} from 'react-native-flash-message'; + +export function FlashMessageTest() { + return ( + + { + showMessage({ + message: 'show message', + type: 'info', + onPress: () => { + hideMessage(); + }, + autoHide: false, + renderAfterContent: e => { + return ( + + renderAfterContent + + ); + }, + }); + }}> + renderAfterContent + + + ); +} + +const styles = StyleSheet.create({ + container: { + justifyContent: 'center', + alignItems: 'center', + padding: 10, + margin: 25, + borderRadius: 5, + borderWidth: 3, + }, + button: { + padding: 10, + margin: 5, + backgroundColor: 'red', + borderRadius: 5, + }, +}); + + +``` +## 兼容性 + +本文档内容基于以下版本验证通过： + +1.RNOH: 0.72.27; SDK：HarmonyOS-Next-DB1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM：3.0.0.25; + +## 方法 + +> [!Tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!Tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情见 [react-native-flash-message](https://github.com/lucasferreira/react-native-flash-message/blob/v0.4.0/README.md) + +| Name | Description | Required | Platform | HarmonyOS Support | +| ---------------------- | ----------- | -------- | ----------------- | ----------------- | +| hideOnPress | Controls if the flash message can be closed on press | NO | iOS/Android | YES | +| onPress | onPress callback for flash message press | NO | iOS/Android | YES | +| onLongPress | onLongPress callback for flash message press | NO | iOS/Android | YES | +| animated | Controls if the flash message will be shown with animation or not | NO | iOS/Android | YES | +| animationDuration | Animations duration/speed | NO | iOS/Android | YES | +| autoHide | Controls if the flash message can hide itself after some duration time | NO | iOS/Android | YES | +| duration | How many milliseconds the flash message will be shown if the autoHide it's true | NO | iOS/Android | YES | +| hideStatusBar | Controls if the flash message will auto hide the native status bar. Note: Works OK in iOS, not all Android versions support this. | NO | iOS/Android | YES | +| statusBarHeight | Use this prop to set a custom status bar height that will be add in flash message padding top calc | NO | iOS/Android | YES | +| floating | The floating prop unstick the message from the edges and applying some border radius to component | NO | iOS/Android | YES | +| position | The position prop set the position of a flash message. Expected options: "top" (default), "bottom", "center" or a custom object with { top, left, right, bottom } position | NO | iOS/Android | YES | +| icon | The icon prop could be a render function that return a new JSX Element to be placed in icon position OR a definition of the graphical icon of a flash message. Expected options: "none" (default), "auto" (guided by type), "success", "info", "warning", "danger", a custom icon (render function) or a custom object with icon type/name and position (left or right) attributes, e.g.: { icon: "success", position: "right" } | NO | iOS/Android | YES | +| style | Apply a custom style object in flash message container | NO | iOS/Android | YES | +| textStyle | Apply a custom style object in flash message descript/text text label | NO | iOS/Android | YES | +| titleStyle | Apply a custom style object in flash message title text label | NO | iOS/Android | YES | +| titleProps | Set a custom props object in flash message title text label | NO | iOS/Android | YES | +| textProps | Set a custom props object in flash message all text components | NO | iOS/Android | YES | +| iconProps | Set a custom props object to use inside the renderFlashMessageIcon method as third argument | NO | iOS/Android | YES | +| renderBeforeContent | Render custom JSX before title in flash message. | NO | iOS/Android | YES | +| renderCustomContent | Render custom JSX below title in flash message. | NO | iOS/Android | YES | +| renderAfterContent | Render custom JSX after the title (or description) of a flash message. | NO | iOS/Android | YES | +| renderFlashMessageIcon | Set a custom render function for inside message icons | NO | iOS/Android | YES | +| transitionConfig | Set the transition config function used in shown/hide anim interpolations | NO | iOS/Android | YES | +| canRegisterAsDefault | Use to handle if the instance can be registed as default/global instance | NO | iOS/Android | YES | +| MessageComponent | Set the default flash message render component used to show all the messages | NO | iOS/Android | YES | + + +## 遗留问题 +- [ ] iOS 和 鸿蒙侧效果有差异，隐藏手机状态栏是通过RN框架的StatusBar组件中的StatusBar.setHidden()方法实现,具体效果有差异，暂未解决。原因：鸿蒙系统手机顶部系统非安全区域块范围底部与前置摄像头挖空区域范围底部高度不一致，在显示和隐藏状态栏的过程中，系统非安全区域范围高度会有（0,136（不同手机不同）两种变化），导致内容组件所在窗口大小顶部位置会在两种状态下分别与前置摄像头挖空区域底部或系统非安全区域底部对齐，造成抖动，状态栏的显隐状态和SystemAvoidView这种类型的非安全区域大小不是强关联的。与IOS不一致原因：IOS的顶部没有非安全区域，未做避让。 + + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/lucasferreira/react-native-flash-message/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-flexi-radio-button.md b/en/react-native-flexi-radio-button.md new file mode 100644 index 00000000..ae616d43 --- /dev/null +++ b/en/react-native-flexi-radio-button.md @@ -0,0 +1,179 @@ + +> 模板版本：v0.2.0 + +

+

react-native-flexi-radio-button

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/thegamenicorus/react-native-flexi-radio-button) + +## 安装与使用 + + +#### **npm** + +```bash +npm i react-native-flexi-radio-button@0.2.2 +``` + +#### **yarn** + +```bash +yarn add react-native-flexi-radio-button@0.2.2 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +### Basic Example +[see full basic example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/BasicExample/app.js) + +|![basic_example_ios](https://cloud.githubusercontent.com/assets/21040043/18545904/67b5476e-7b65-11e6-8fc4-8160b39a4ab0.gif)|![basic_example_android](https://cloud.githubusercontent.com/assets/21040043/18545908/69b22f5a-7b65-11e6-87d7-c82c0d3057dd.gif)| +|---------------|----------| +```jsx + +import {RadioGroup, RadioButton} from 'react-native-flexi-radio-button' + +onSelect(index, value){ + this.setState({ + text: `Selected index: ${index} , value: ${value}` + }) +} + +render(){ + return( + + + this.onSelect(index, value)} + > + + This is item #1 + + + + This is item #2 + + + + This is item #3 + + + + {this.state.text} + + + ) +} +``` +### Custom Example +[see full custom example](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/examples/CustomExample/app.js) + +|![custom_ios](https://cloud.githubusercontent.com/assets/21040043/18546467/53bf8230-7b68-11e6-98f6-98899cce82b3.gif)|![cusom_android](https://cloud.githubusercontent.com/assets/21040043/18546744/cb912fce-7b69-11e6-9331-49e2337dcb04.gif)| +|---------------|----------| + + +modify in render() + +```jsx + this.onSelect(index, value)} +> + + + + + + Start from item index #1 + + + + Red Dot + + Green Dot + + + + Blue Dot + + +``` + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +react-native-harmony: 0.72.23; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio: 5.0.3.27; ROM: 3.0.0.19; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +##### Radio Group: +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| size | 单选按钮的大小 | number | no | Android/IOS | yes | +| thickness | 单选按钮边框的宽度 | number | no | Android/IOS | yes | +| color | 单选按钮的颜色 | string | no | Android/IOS | yes | +| activeColor | 选择时单选按钮的颜色 | string | no | Android/IOS | yes | +| highlightColor | 选择后单选按钮的背景 | string | no | Android/IOS | yes | +| selectedIndex | 单选组的默认选择索引，可以更改为新值或空值以进行明确选择 | number | no | Android/IOS | yes | +| style | 如果提供，则要应用的自定义样式 | object | no | Android/IOS | yes | +| onSelect | 选择单选按钮时要调用的函数 | function(index, value) | no | Android/IOS | yes | + +##### Radio Button: + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| value | value 将在回调时作为第二个参数传递onSelect | any | no | Android/IOS | yes | +| style | 要应用于“RadioButton”组件的样式 | object | no | Android/IOS | yes | +| color | 按钮颜色 | string | no | Android/IOS | yes | +| disabled | 如果为 true，则禁用此组件的所有交互 | bool | no | Android/IOS | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/thegamenicorus/react-native-flexi-radio-button/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-flip-card.md b/en/react-native-flip-card.md new file mode 100644 index 00000000..ca693e07 --- /dev/null +++ b/en/react-native-flip-card.md @@ -0,0 +1,248 @@ + + +> 模板版本：v0.2.2 + +

+

react-native-flip-card

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/moschan/react-native-flip-card) + +## 安装与使用 + + + +#### **npm** + +```bash +npm i react-native-flip-card@3.5.7 +``` + +#### **yarn** + +```bash +yarn add react-native-flip-card@3.5.7 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState } from "react"; +import FlipCard from "react-native-flip-card"; +import { + Text, + View, + StyleSheet, + ScrollView, + TouchableOpacity, +} from "react-native"; + +export const FlipCardExample = () => { + const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#F5FCFF", + }, + welcome: { + fontSize: 20, + textAlign: "center", + margin: 10, + marginTop: 20, + }, + instructions: { + textAlign: "center", + color: "#333333", + marginBottom: 5, + }, + card: { + width: 200, + marginTop: 20, + }, + face: { + flex: 1, + backgroundColor: "#2ecc71", + justifyContent: "center", + alignItems: "center", + }, + back: { + flex: 1, + backgroundColor: "#f1c40f", + justifyContent: "center", + alignItems: "center", + }, + button: { + width: 100, + height: 30, + marginTop: 30, + paddingTop: 6, + paddingBottom: 6, + borderRadius: 3, + borderWidth: 1, + backgroundColor: "#007AFF", + borderColor: "transparent", + }, + buttonText: { + color: "#fff", + textAlign: "center", + }, + img: { + flex: 1, + height: 64, + }, + }); + const [flip, setFlip] = useState(false); + var CARDS = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + const MyFlipCard = ({ val }) => { + return ( + + + + Card {val} + + + The back side + + + + ); + }; + const createCard = (val, i) => ; + + return ( + + + Flip Card Example + + Minimal + + + The Face + + + The Back + + + + Customized + { + console.log("isFlipStart", isFlipStart); + }} + useNativeDriver={true} + > + + The Face + + + The Back + + + { + console.log("isFlipEnd", isFlipEnd); + }} + > + + The Face + + + T + h + e + + B + a + c + k + + + + + { + setFlip({ flip: !flip }); + }} + > + Flip + + + {CARDS.map(createCard)} + + + ); +}; +``` + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.26; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.300SP2; ROM:3.0.0.24; + +## 属性 + +### FlipCard + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 +> +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +该库为 UI 组件库，通过配置属性标签，实现对应的功能。 + +| Name | Type | Description | Default | Required | Platform | HarmonyOS Support | +| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | ----------------- | +| flip | boolean | If you change default display side, you can set true to this param. If you change side, you can pass bool variable dynamically. | false | no | iOS/Android | yes | +| clickable | boolean | If you want to disable click a card, you can set false to this paramicon. | true | no | iOS/Android | yes | +| friction | number | The friction of card animation | 6 | no | iOS/Android | yes | +| perspective | number | The amount of perspective applied to the flip transformation | 1000 | no | iOS/Android | yes | +| flipHorizontal | boolean | If you set true, a card flip to horizontal. | false | no | iOS/Android | yes | +| flipVertical | boolean | If you set false, a card not flip to vertical. If you set true both flipHoriszontal and flipVertical , a card flip to diagonal. | true | no | iOS/Android | yes | +| onFlipStart | function | When a card starts a flip animation, call onFlipEnd function with param. | NA | no | iOS/Android | yes | +| onFlipEnd | function | When a card finishes a flip animation, call onFlipEnd function with param. | NA | no | iOS/Android | yes | +| alignHeight | boolean | If you pass true to alignHeight param, the card keep height of bigger side. | false | no | iOS/Android | yes | +| alignWidth | boolean | If you pass true to alignWidth param, the card keep width of bigger side. | false | no | iOS/Android | yes | +| useNativeDriver | boolean | If you pass true to useNativeDriver param, the card animation will utilize the native driver. | true | no | iOS/Android | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/moschan/react-native-flip-card/blob/master/LICENSE) ，请自由地享受和参与开源。 + + diff --git a/en/react-native-fs.md b/en/react-native-fs.md new file mode 100644 index 00000000..a36ab700 --- /dev/null +++ b/en/react-native-fs.md @@ -0,0 +1,311 @@ +模板版本：v0.2.2 + +

+

react-native-fs

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-fs) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-fs Releases](https://github.com/react-native-oh-library/react-native-fs/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### npm + +```bash +npm install @react-native-oh-tpl/react-native-fs@file:# +``` + +#### yarn + +```bash +yarn add @react-native-oh-tpl/react-native-fs@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```tsx +import React, { useState } from "react"; +import { + SafeAreaView, + StyleSheet, + ScrollView, + View, + Text, + StatusBar, + TextInput, + Button, +} from "react-native"; +import FS from "react-native-fs"; +import { Colors } from "react-native/Libraries/NewAppScreen"; +function App(): React.JSX.Element { + const [mkdirParam, setMkdirParam] = useState(""); + const mkdirExample = () => { + FS.mkdir(FS.DocumentDirectoryPath + "/" + mkdirParam).then( + (result) => { + console.log("file mkdirParam： " + mkdirParam); + console.log("file Successfully created directory."); + }, + (err) => { + console.error("file mkdir: " + err.message); + } + ); + }; + + return ( + <> + + + + + {"React Native File Harmony Demo App"} + + + + {"mkdir"} + + setMkdirParam(mkdirParam)} + placeholderTextColor="#9a73ef" + autoCapitalize="none" + /> + + + ) + })} + + + ) +} +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "file:./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-haptic-feedback": "file:../../node_modules/@react-native-oh-tpl/react-native-haptic-feedback/harmony/haptic_feedback.har" + + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 RNHapticFeedbackPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... + ++ import { RNHapticFeedbackPackage } from '@react-native-oh-tpl/react-native-haptic-feedback/ts' + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNHapticFeedbackPackage(ctx) + ] +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-haptic-feedback Releases](https://github.com/react-native-oh-library/react-native-haptic-feedback/releases) + +### 权限要求 +在 entry/src/main/module.json5补上配置 +```js +"requestPermissions": [ { "name": "ohos.permission.VIBRATE" }, ] +``` + +## 静态方法 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该方法；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +### Available Methods + +`trigger(method, options)` +Use this method to trigger haptic feedback + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | ----------------- | +| `method` | Specifies the type of haptic feedback. See the list of available methods below. | string | yes | iOS/Android | yes | +| `options.enableVibrateFallback` | iOS only. If haptic feedback is unavailable (iOS < 10 OR Device < iPhone6s), vibrate with default method (heavy 1s) (default: false). | boolean | no | iOS | no | +| `options.ignoreAndroidSystemSettings` | Ignoreing phone mute mode setting and triggering haptic feedback. (default: false). | boolean | no | Android | yes | + +### method Overview + +Here's an overview of the available methods and their compatibility +| Name | Description | Type |Required|Platform|HarmonyOS Support| +| ---- | :-----: | :----: |:---: |:----: |:------: | +| `impactLight` | impactLight feedback | string |no|iOS/Android|yes| +| `impactMedium` | impactMedium feedback | string |no|iOS/Android|yes| +| `impactHeavy` | impactHeavy feedback | string |no|iOS/Android|yes| +| `rigid` | rigid feedback | string |no|iOS/Android|yes| +| `soft` | soft feedback | string |no|iOS/Android|yes| +| `notificationSuccess` | notificationSuccess feedback | string |no|iOS/Android|yes| +| `notificationWarning` | notificationWarning feedback | string |no|iOS/Android|yes| +| `notificationError` | notificationError feedback | string |no|iOS/Android|yes| +| `selection` | selection feedback | string |no|iOS|yes| +| `clockTick` | clockTick feedback | string |no|Android|yes| +| `contextClick` | contextClick feedback | string |no|Android|yes| +| `keyboardPress` | keyboardPress feedback | string |no|Android|yes| +| `keyboardRelease` | keyboardRelease feedback | string |no|Android|yes| +| `keyboardTap` | keyboardTap feedback | string |no|Android|yes| +| `longPress` | longPress feedback | string |no|Android|yes| +| `textHandleMove` | textHandleMove feedback | string |no|Android|yes| +| `virtualKey` | virtualKey feedback | string |no|Android|yes| +| `virtualKeyRelease` | virtualKeyRelease feedback | string |no|Android|yes| +| `effectClick` | effectClick feedback | string |no|Android|yes| +| `effectDoubleClick` | effectDoubleClick feedback | string |no|Android|yes| +| `effectHeavyClick` | effectHeavyClick feedback | string |no|Android|yes| +| `effectTick` | effectTick feedback | string |no|Android|yes| + +## 遗留问题 + +- [ ] 自定义振动文件配置问题: [issue#6](https://github.com/react-native-oh-library/react-native-haptic-feedback/issues/6) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/mkuczera/react-native-haptic-feedback/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-harmony-sample-package.md b/en/react-native-harmony-sample-package.md new file mode 100644 index 00000000..cfd5a2b2 --- /dev/null +++ b/en/react-native-harmony-sample-package.md @@ -0,0 +1,382 @@ +> 模板版本：v0.2.2 + +

+

react-native-harmony-sample-package

+

+ +

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-harmony-sample-package) + +## 1. 安装与使用 + +### 1.1. 目录结构 + +本项目是 react-native-harmony 的示例工程，包含 Fabric、TurboModules 以及 Codegen 配置的不同示例，主要目录结构如下： + +```yaml +├── codegen-sample-package # 适配 codegen 的示例组件 +├── without-codegen-sample-package # 没用 codegen 的示例组件 +├── tester # 用了上述组件的完整 RN 工程示例 +│ ├── rnoh_package # react-native-harmony 相关依赖包 +│ ├── harmony # rn harmony原生部分 +│ │ └── react_native_openharmony +│ │ └── react_native_openharmony.har # rnoh sdk包，需手动下载后放于该路径下 +│ ├── index.js +│ ├── app.json +│ ├── package.json +│ ├── metro.config.js +│ └── tsconfig.json +├── package.json +└── License +``` + +### 1.2. 运行步骤 + +> tester 文件夹是一个可运行在 HarmonyOS 上的完整 RN 工程，另外还需下载一个 RNOH SDK，由于 SDK 体积较大，并未直接存于版本记录，请手动下载 [rnoh0.27.har](https://github.com/react-native-oh-library/react-native-harmony-sample-package/releases/tag/rnoh0.27.har) 并放于 `tester/harmony/react_native_openharmony` 目录下。 + +1. 克隆[该工程](https://github.com/react-native-oh-library/react-native-harmony-sample-package)到本地 +2. 安装依赖：在 tester 目录下执行`npm install / yarn` +3. 生成 bundle 资源文件：在 tester 目录下执行`npm run dev` +4. 使用 DevEco Studio 打开 tester 目录下的 harmony 文件夹 +5. 连接设备并在 IDE 中执行 Run + +## 2. 约束与限制 + +本文档内容基于以下版本验证通过： + +- RNOH: 0.72.27; +- SDK: HarmonyOS NEXT Developer Beta1 SDK +- IDE: DevEco Studio 5.0.3.402; +- ROM: 3.0.0.25(sp39); + +## 3. 组件开发说明 + +### 3.1. codegen-sample-package + +#### 3.1.1. Fabric 组件 + +开发 Fabric 组件时，原生部分可选择用 ArkTS 或 CAPI 两种类型，下面分别说明两种类型在开发时的步骤。 + +##### 3.1.1.1. ArkTS 类型 + +下面实现一个 ArkTS 类型的 Fabric 组件，这是组件最终的目录结构(只列出关键文件)： + +```sh +codegen-sample-package +├── License +├── harmony +│ ├── codegen_sample_package # native 源码 +│ │ ├── index.ets # 入口 用于导出 +│ │ ├── ts.ts # 用于导出 +│ │ ├── oh-package.json5 +│ │ └── src +│ │ └── main +│ │ ├── ets +│ │ │ ├── CodegenSamplePackage.ts # 导出 native 模块 +│ │ │ └── CodegenSampleView.ets # 具体 native 实现 +│ │ └── resources +│ └── codegen_sample_package.har # native 源码har包 +├── index.ts # 入口文件 +├── package.json +└── src + └── Fabric + ├── IndexArkTS.tsx # Fabric入口 + └── specs + └── v1 + └── CodegenArkTSNativeComponent.ts # JavaScript 接口声明 +``` + +以下是组件的开发步骤 + +1. **RN 侧**: 初始化 RN 工程目录 +2. **RN 侧**: 添加 JavaScript 接口声明文件 [`src/Fabric/specs/v1/CodegenArkTSNativeComponent.ts`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/src/Fabric/specs/v1/CodegenArkTSNativeComponent.ts) + 对于声明类型的代码文件必须满足以下两点要求： + + - 文件必须使用 `NativeComponent` 命名 + - 代码中必须要输出 `HostComponent` 对象。 + +3. **RN 侧**: 根据业务编写 Fabric 入口文件 [`IndexArkTS.tsx`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/src/Fabric/IndexArkTS.tsx) +4. **RN 侧**: 添加 codegen 配置 + codegen 配置项位于 package.json 文件中的 harmony 字段下: + + ```json + { + "name": "@react-native-oh-tpl/codegen-sample-package", + "harmony": { + "alias": "codegen-sample-package", // 组件别名 + "codegenConfig": [ + { + "version": 1, // version 取值范围： 1 | 2, 其中 1 表示 ArkTS 形式 + "specPaths": ["./src/Fabric/specs/v1"] // 需要codegen的路径 + } + ] + } + } + ``` + + - `version` 表示 codegen 的版本，取值为 1 | 2, 1 表示 ArkTS 形式，2 表示 CAPI 形式 + - `specPaths` 填写需要 codegen 的路径，也就是 JavaScript 接口声明文件 + +5. **native 侧**: 工程根目录添加 `harmony` 文件夹 + > 该目录暂时先留空，下面先通过 DevEco Studio 编写好 native 代码后再拷贝进来 +6. **native 侧**: 使用 DevEco Studio 初始化组件模板：`New => Module => Static Library`，输入模块名 `codegen_sample_package` 可得到如下结构工程: + ![image](../img/har_template_dir.png) +7. **native 侧**: 在 ets 文件夹中，添加 [`CodegenSampleView.ets`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/harmony/codegen_sample_package/src/main/ets/CodegenSampleView.ets) 文件，该文件是具体的 native 实现，包含生命周期方法和组件的界面渲染方法 +8. **native 侧**: 在 ets 文件夹中，添加 [`CodegenSamplePackage.ts`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/harmony/codegen_sample_package/src/main/ets/CodegenSamplePackage.ts) 文件，该文件通过 `createDescriptorWrapperFactoryByDescriptorType` 定义了 native 侧导出的组件名 +9. **native 侧**: 编写入口文件 [`index.ets`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/harmony/codegen_sample_package/index.ets) 和 [`ts.ts`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/harmony/codegen_sample_package/ts.ts) +10. **native 侧**: `oh-package.json5` 文件中添加 @rnoh/react-native-openharmony 依赖 + ```json + // oh-package.json5 + { + "dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony" + } + } + ``` +11. **native 侧**: 将 native 源码打成 har 包。 + 1. 选中左侧中本组件目录 + 2. 点击 `Build -> Make Module xxx` 将 native 源码打成 har 包 + ![build_har](../img/build_har.png) + 3. 在 `codegen_sample_package/build/default/outputs/default` 路径下找到`codegen_sample_package.har` +12. **native 侧**: 将 har 包以及源码复制到 RN 工程根目录下的 harmony 文件夹中 +13. **RN 侧**: 执行 `npm pack` 命令打出 tgz 包 + +##### 3.1.1.2. CAPI 类型 + +下面实现一个 CAPI 类型的 Fabric 组件，这是组件最终的目录结构(只列出关键文件)： + +```sh +codegen-sample-package +├── License +├── harmony +│ ├── codegen_sample_package # native 源码 +│ │ ├── oh-package.json5 +│ │ └── src +│ │ └── main +│ │ ├── cpp +│ │ │ ├── CMakeLists.txt +│ │ │ ├── CodegenSamplePackage.cpp +│ │ │ ├── CodegenSamplePackage.h +│ │ │ └── CodegenSampleViewComponentInstance.h +│ │ └── resources +│ └── codegen_sample_package.har # native 源码har包 +├── index.ts # 入口文件 +├── package.json +└── src + └── Fabric + ├── IndexCAPI.tsx # Fabric入口 + └── specs + └── v2 + └── CodegenCApiNativeComponent.ts # JavaScript 接口声明 +``` + +CAPI 类型的 Fabric 组件整体开发流程和 ArkTS 一致，以下是组件的开发步骤： + +1. **RN 侧**: 初始化 RN 工程目录 +2. **RN 侧**: 添加 JavaScript 接口声明文件 [`src/Fabric/specs/v2/CodegenCApiNativeComponent.ts`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/src/Fabric/specs/v2/CodegenCApiNativeComponent.ts) +3. **RN 侧**: 根据业务编写 CAPI 入口文件 [`IndexCAPI.tsx`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/src/Fabric/IndexCAPI.tsx) +4. **RN 侧**: 添加 codegen 配置 + + ```json + { + "name": "@react-native-oh-tpl/codegen-sample-package", + "harmony": { + "alias": "codegen-sample-package", + "codegenConfig": [ + { + "version": 2, + "specPaths": ["./src/Fabric/specs/v2"] + } + ] + } + } + ``` + +5. **native 侧**: 工程根目录添加 `harmony` 文件夹 +6. **native 侧**: 使用 DevEco Studio 初始化组件模板（同上） +7. **native 侧**: 在 `src/main`中添加 `cpp` 文件夹中 + 1. 添加 [`CMakeLists.txt`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/harmony/codegen_sample_package/src/main/cpp/CMakeLists.txt) 文件 + 2. 添加 [`CodegenSamplePackage.cpp`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/harmony/codegen_sample_package/src/main/cpp/CodegenSamplePackage.cpp) 文件 + 3. 添加 [`CodegenSamplePackage.h`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/harmony/codegen_sample_package/src/main/cpp/CodegenSamplePackage.h) 文件 + 4. 添加 [`CodegenSampleViewComponentInstance.h`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/codegen-sample-package/harmony/codegen_sample_package/src/main/cpp/CodegenSampleViewComponentInstance.h) 文件 +8. **native 侧**: `oh-package.json5` 文件中添加 @rnoh/react-native-openharmony 依赖（同上） +9. **native 侧**: 将 native 源码打成 har 包（同上） +10. **native 侧**: 将 har 包以及源码复制到 RN 工程根目录下的 harmony 文件夹中（同上） +11. **RN 侧**: 执行 `npm pack` 命令打出 tgz 包（同上） + +### 3.2. no-codegen-sample-package + +由于目前 codegen 命令需要在 RN 侧执行，在一些流水线或 RN 和原生分离的场景下，不便于执行 codegen 命令。于是对于这类场景衍生了一种 no-codegen 的解决方案。主要是在组件开发阶段就将 codegen 产物生成好，提前放置于包内，无需在运行时执行 codegen。 + +因此 no-codegen 的开发前提是先开发好 codegen 形式的组件(参考 3.1 章节)，然后把产物移到组件包内。 + +#### 3.2.1. Fabric 组件 + +##### 3.2.1.1. ArkTS 类型 + +> 前提：已经参考[codegen-sample-package](#31-codegen-sample-package)完成 codegen 形式的 ArkTS 组件 + +实现一个 no-codegen ArkTS 类型的 Fabric 组件，RN 侧目录结构无改动，下面列出 native 侧的目录结构(只列出关键文件)： + +```sh +harmony +└── codegen_sample_package # native 源码 + ├── index.ets + ├── ts.ts + ├── oh-package.json5 + └── src + └── main + ├── cpp # codegen 生成的 C++ 文件 + │ ├── CMakeLists.txt + │ ├── CodegenArkTSSamplePackage.cpp + │ ├── CodegenArkTSSamplePackage.h + │ ├── CodegenSampleViewArkTSJSIBinder.h + │ └── CodegenSampleViewArkTSComponentDescriptor.h + ├── ets + │ ├── namespace # codegen 生成于sdk内的产物 + │ │ ├── index.ts + │ │ └── sampleView.ts + │ ├── CodegenSamplePackage.ts # 导出 native 模块 + │ └── CodegenSampleView.ets # 具体 native 实现 + └── resources +``` + +以下是将 codegen 组件转为 no-codegen 的步骤： + +1. 找一个 RN 工程，引入已开发完成的 codegen-sample-package 三方库 + + ```json + { + "name": "react-native-harmony-tester", + "scripts": { + "start": "npm run codegen && hdc rport tcp:8081 tcp:8081 && react-native start", + "codegen": "react-native codegen-harmony --rnoh-module-path ./harmony/entry/oh_modules/@rnoh/react-native-openharmony" + }, + "dependencies": { + "@react-native-oh-tpl/codegen-sample-package": "file:../codegen-sample-package/react-native-oh-tpl-codegen-sample-package-0.0.1.tgz" + } + } + ``` + +2. **RN 侧**: 在 script 中，添加 [codegen](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md) 命令 `react-native codegen-harmony --rnoh-module-path ./harmony/entry/oh_modules/@rnoh/react-native-openharmony` +3. **RN 侧**: 执行 codegen 命令，查看生成的产物文件 + ![codegen-fabric-arkts](../img/codegen-fabric-arkts.png) +4. **native 侧**: 移入 codegen 命令生成的 c++ 文件 + + 1. 在 `src/main` 中添加 `cpp` 文件夹，放入 codegen 命令生成该组件的 c++ 文件： `xxxComponentDescriptor.h` 与 `xxxJSIBinder.h` + 2. 在 `src/main/cpp` 中添加 [`xxxPackage.h`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/no-codegen-sample-package/harmony/no_codegen_sample_package/src/main/cpp/forArkTS/NoCodegenArkTSSamplePackage.h) 文件，文件内容参考 codegen 命令生成的 `RNOHGeneratedPackage.h` 文件 + 3. 在 `src/main/cpp` 中添加 [`xxxPackage.cpp`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/no-codegen-sample-package/harmony/no_codegen_sample_package/src/main/cpp/forArkTS/NoCodegenArkTSSamplePackage.cpp) 文件 + 4. 在 `src/main/cpp` 中添加 [`CMakeLists.txt`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/no-codegen-sample-package/harmony/no_codegen_sample_package/src/main/cpp/forArkTS/CMakeLists.txt) 文件 + + > codegen 命令生成的 `RNOHGeneratedPackage.h` 文件是所有 codegen 组件的公共文件，请勿直接放入 cpp 文件夹中。建议在 codegen => no-codegen 时，只保留当前组件以减少 `RNOHGeneratedPackage.h` 中其他组件的的干扰 + +5. **native 侧**: 移入 codegen 命令生成的 ts 文件 + 1. 在 `src/main/ets` 中添加 `namespace` 文件夹，放入 codegen 命令生成该组件的 ts 文件，如示例图中的 [`CodegenSampleViewArkTS.ts`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/no-codegen-sample-package/harmony/no_codegen_sample_package/src/main/ets/namespace/sampleView.ts) + 2. 在 `src/main/cpp` 中添加导出文件 [`index.ts`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/no-codegen-sample-package/harmony/no_codegen_sample_package/src/main/ets/namespace/index.ts) +6. **native 侧**: 修改文件路径的引用，将之前从 `@rnoh/react-native-openharmony/generated` 引用的路径改为从 `namespace` 中引入 +7. **RN 侧**: 将原有 package.json 中 codegen 配置删除 + ```diff + { + "name": "@react-native-oh-tpl/codegen-sample-package", + "harmony": { + "alias": "codegen-sample-package", + - "codegenConfig": [ + - { + - "version": 1, + - "specPaths": ["./src/Fabric/specs/v1"] + - } + - ] + } + } + ``` + +以上就是将 ArkTS 类型的 Fabric 组件转为 no-codegen 所需的修改步骤。 + +##### 3.1.1.2. CAPI 类型 + +> 前提：已经参考[codegen-sample-package](#31-codegen-sample-package)完成 codegen 形式的 CAPI 组件 + +实现一个 no-codegen CAPI 类型的 Fabric 组件，RN 侧目录结构无改动，下面列出 native 侧的目录结构(只列出关键文件)： + +```sh +harmony +└── codegen_sample_package # native 源码 + ├── oh-package.json5 + └── src + └── main + ├── cpp # codegen 生成的 C++ 文件 + │ ├── react/renderer/components/xxx + │ │ ├── ComponentDescriptors.h + │ │ ├── EventEmitters.cpp + │ │ ├── EventEmitters.h + │ │ ├── Props.cpp + │ │ ├── Props.h + │ │ ├── ShadowNodes.cpp + │ │ ├── ShadowNodes.h + │ │ ├── States.cpp + │ │ └── States.h + │ ├── BaseCodegenSampleViewCAPIComponentInstance.h + │ ├── BaseReactNativeOhTplCodegenSamplePackagePackage.h + │ ├── CMakeLists.txt + │ ├── CodegenCAPISamplePackage.cpp + │ ├── CodegenCAPISamplePackage.h + │ ├── CodegenSampleViewCAPIJSIBinder.h + │ └── CodegenSampleViewComponentInstance.h + └── resources +``` + +以下是将 codegen 组件转为 no-codegen 的步骤： + +1. 找一个 RN 工程，引入已开发完成的 codegen-sample-package 三方库 + + ```json + { + "name": "react-native-harmony-tester", + "scripts": { + "start": "npm run codegen && hdc rport tcp:8081 tcp:8081 && react-native start", + "codegen": "react-native codegen-harmony --rnoh-module-path ./harmony/entry/oh_modules/@rnoh/react-native-openharmony" + }, + "dependencies": { + "@react-native-oh-tpl/codegen-sample-package": "file:../codegen-sample-package/react-native-oh-tpl-codegen-sample-package-0.0.1.tgz" + } + } + ``` + +2. **RN 侧**: 在 script 中，添加 [codegen](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md) 命令 `react-native codegen-harmony --rnoh-module-path ./harmony/entry/oh_modules/@rnoh/react-native-openharmony` +3. **RN 侧**: 执行 codegen 命令，查看生成的产物文件 + ![codegen-fabric-capi](../img/codegen-fabric-capi.png) +4. **native 侧**: 移入 codegen 命令生成的 c++ 文件 + + 1. 打开 `src/main/cpp`，移入 codegen 命令生成该组件的 react 下的 c++ 文件夹： `react/renderer/components/xxx` + 2. 修改 `src/main/cpp/react` 中的文件引用路径，如 `#include ` => `#include "ShadowNodes.h"` + 3. 打开 `src/main/cpp`，移入 codegen 命令生成该组件的 RNOH 下的 c++ 文件： `BaseXXXComponentInstance.h`、`xxxJSIBinder.h`、`BasexxxPackage.h` + > `src/main/cpp` 已有的文件：`CMakeLists.txt`、`xxxPackage.cpp`、`xxxPackage.h`、`XXXComponentInstance.h` + 4. 修改 `src/main/cpp` 已有的文件的路径引用，如 `#include "RNOH/generated/BasexxxPackage.h"` => `#include "BasexxxPackage.h"` + 5. 修改 [`CMakeLists.txt`](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/no-codegen-sample-package/harmony/no_codegen_sample_package/src/main/cpp/forCAPI/CMakeLists.txt) +5. **RN 侧**: 将原有 package.json 中 codegen 配置删除 + ```diff + { + "name": "@react-native-oh-tpl/codegen-sample-package", + "harmony": { + "alias": "codegen-sample-package", + - "codegenConfig": [ + - { + - "version": 2, + - "specPaths": ["./src/Fabric/specs/v2"] + - } + - ] + } + } + ``` + +## 4. 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-harmony-sample-package/blob/sig/License) ，请自由地享受和参与开源。 diff --git a/en/react-native-hole-view.md b/en/react-native-hole-view.md new file mode 100644 index 00000000..d40de83e --- /dev/null +++ b/en/react-native-hole-view.md @@ -0,0 +1,294 @@ +> 模板版本：v0.2.2 + +

+

react-native-hole-view

+

+

+ + Supported platforms + + + License + +

+ + + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-hole-view) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-hole-view Releases](https://github.com/react-native-oh-library/react-native-hole-view/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +>[!TIP] # 处替换为 tgz 包的路径 + + + +#### npm + +```bash +npm install @react-native-oh-tpl/react-native-hole-view@file:# +``` + +#### yarn + +```bash +yarn add @react-native-oh-tpl/react-native-hole-view@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +``` jsx +import React, {useCallback, useEffect, useState} from 'react'; +import { + ScrollView, + View, + Text, TouchableOpacity, +} from 'react-native'; + +import {RNHole, RNHoleView, ERNHoleViewTimingFunction, IRNHoleViewAnimation} from "react-native-hole-view/src"; + +import Video from 'react-native-video'; + +const firstHole: RNHole = {x: 150, y: 390, width: 120, height: 120, borderRadius: 60}; +const secondHole: RNHole = {x: 150, y: 40, width: 120, height: 120, borderRadius: 60}; + +const animationSettings: IRNHoleViewAnimation = {timingFunction: ERNHoleViewTimingFunction.EASE_IN_OUT, duration: 200}; + +const App = () => { + const [holes, setHoles] = useState([]); + const [animated, setAnimated] = useState(false); + const [animation, setAnimation] = useState(undefined); + + const onPress = useCallback(() => { + if (animated) { + setHoles([firstHole]); + } else { + setHoles([secondHole]) + } + + setAnimation({...animationSettings}); + setAnimated(!animated); + }, [animated, animation]) + + useEffect(() => { + onPress(); + }, []); + + return ( + + {"Wow! I'm a text inside a hole!"} + { + }} style={{backgroundColor: 'pink', padding: 10, borderRadius: 5}}> + {"Wow! I'm a button inside a hole!"} + + + + { + "Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole! Wow! I'm a ScrollView inside a hole!" + } + + + { + setAnimation(undefined); + }} + > + + + + {"Animate!"} + + + + ); +}; + +export default App; + +``` + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json` 添加 overrides字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 (推荐) + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-hole-view": "file:../../node_modules/@react-native-oh-tpl/react-native-hole-view/harmony/rnoh_holeview.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.配置 CMakeLists 和引入 HoleViewPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-hole-view/src/main/cpp" ./rnohkeys) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_holeview) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "HoleViewPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-hole-view Releases](https://github.com/react-native-oh-library/react-native-hole-view/releases) + + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|---------------------|-------------------------------|-----------------------------------------------------------------|----------|-------------|-------------------| +| Holes | Hole Array | Hole[] | no | iOS/Android | yes | +| animation | Hole update animation effect | { duration: number, timingFunction: ERNHoleViewTimingFunction } | no | iOS/Android | yes | +| onAnimationFinished | Animation completion callback | () => void | no | iOS/Android | yes | + + +## 遗留问题 + +- [ ] C API OH_ArkUI_PointerEvent_SetStopPropagation方法阻止事件冒泡，无法控制scrollView。导致scrollView在洞外也能滑动问题: [issue#1](https://github.com/react-native-oh-library/react-native-hole-view/issues/2) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://mitlicense.org/)，请自由地享受和参与开源。 diff --git a/en/react-native-htmlview.md b/en/react-native-htmlview.md new file mode 100644 index 00000000..3f85facb --- /dev/null +++ b/en/react-native-htmlview.md @@ -0,0 +1,121 @@ + +> 模板版本：v0.2.1 + +

+

react-native-htmlview

+

+

+ + Supported platforms + + + License + + +

+ + +> [!TIP] [Github 地址](https://github.com/jsdf/react-native-htmlview) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-htmlview@0.17.0 +``` + +#### **yarn** + +```bash +yarn add react-native-htmlview@0.17.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React from 'react'; +import {StyleSheet, View, Linking} from 'react-native'; +import HTMLView from 'react-native-htmlview'; + +const HtmlViewExample = () => { + const htmlContent = ` +

Hello, World!

+

This is a link

+

Here is an image: Example Image

+ `; + + return ( + + Linking.openURL(url)} // Optional: Handle link presses + /> + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + padding: 16, + }, + // Define custom styles for HTML elements + a: { + fontWeight: 'bold', + color: 'blue', + fontSize: 20, + borderColor:'#000000', + borderWidth:2 + }, + img: { + width: 200, + height: 100, + }, +}); + +export default HtmlViewExample; +``` + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.20-CAPI; SDK: HarmonyOS NEXT Developer Preview2; IDE: DevEco Studio 4.1.3.700; ROM: 3.0.0.19; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +> [!tip] 该库为UI组件库，可以在该库的标签下，使原本无法在RN框架生效的Html写法，可以实现对应的功能。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | ------ | -------- | -------- | ----------------- | +| value | a string of HTML content to render | string | yes | All | yes | +| onLinkPress | a function which will be called with a url when a link is pressed. Passing this prop will override how links are handled | string | no | All | yes | +| onLinkLongPress | a function which will be called with a url when a link is long pressed. The default is | string | no | All | yes | +| stylesheet | a stylesheet object keyed by tag name, which will override the styles applied to those respective tags. | string | no | All | yes | +| renderNode | a custom function to render HTML nodes however you see fit. | string | no | All | yes | +| bullet | text which is rendered before every inside a `li``ul` | string | no | All | yes | +| paragraphBreak | text which appears after every element`p` | string | no | All | yes | +| lineBreak | text which appears after text elements which create a new line | string | no | All | yes | +| addLineBreaks | when explicitly , effectively sets | string | no | All | yes | + +## 开源协议 + +本项目基于 [The ISC License (ISC)](https://github.com/jsdf/react-native-htmlview/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-http-bridge.md b/en/react-native-http-bridge.md new file mode 100644 index 00000000..173369d1 --- /dev/null +++ b/en/react-native-http-bridge.md @@ -0,0 +1,300 @@ +> 模板版本：v0.2.2 + +

+

react-native-http-bridge

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-http-bridge) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-http-bridge Releases](https://github.com/react-native-oh-library/react-native-http-bridge/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-http-bridge@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-http-bridge@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```tsx +import React, { useState ,useEffect } from "react"; +import { ScrollView, Text, Button, View, StyleSheet } from 'react-native'; + +var httpBridge = require('react-native-http-bridge'); + +const HttpBridgeDemo = () => { + const [getRequestResult, setGetRequestResult] = useState(''); + const [postRequestResult, setPostRequestResult] = useState(''); + const GetMothedExample = () => { + fetch('http://127.0.0.1:8888/student/getStuInfo?value=GET', { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + } + }) + } + + const PostMothedExample = () => { + fetch('http://127.0.0.1:8888/student/postStuInfo', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + firstParam: 'yourValue', + secondParam: 'yourOtherValue', + }) + }) + } + useEffect(() => { + httpBridge.start(8888, 'http_service', (request: any) => { + switch (request.type) { + case 'GET': + setGetRequestResult('requestId: ' + request.requestId + '\ntype: ' + + request.type + '\nurl: ' + request.url + '\npostData: ' + request.postData); + break; + case 'POST': + setPostRequestResult('requestId: ' + request.requestId + '\ntype: ' + + request.type + '\nurl: ' + request.url + '\npostData: ' + request.postData); + break; + } + if (request.type === "GET" && request.url.split("/")[1] === "user") { + httpBridge.respond(request.requestId, 200, "application/json", "{\"message\": \"OK\"}"); + } else { + httpBridge.respond(request.requestId, 400, "application/json", "{\"message\": \"Bad Request\"}"); + } + }); + return () => { + httpBridge.stop(); + } + }, []); + + return ( + + + httpBridgeExample Port : 8888 + + Method：GET + + {colors.rawResult} + + + + + + + + + + + + + ) +} + +interface BoxProps { + value: string + name: string +} + +const Box = ({ value, name }: BoxProps) => { + return ( + + {name} + + ) +} + +const styles = StyleSheet.create({ + image: { + width: '100%', + height: 250, + }, + colorName: { + backgroundColor: 'white', + padding: 4, + fontSize: 18, + }, + box: { + flex: 1, + backgroundColor: 'red', + justifyContent: 'center', + alignItems: 'center', + }, + row: { + flex: 1, + flexDirection: 'row', + width: '100%', + }, + resultContainer: { + flex: 1, + padding: 20, + width: '100%' + }, + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + loading: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + result: { + textAlign: 'center', + color: '#333333', + }, +}) +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-image-colors": "file:../../node_modules/@react-native-oh-tpl/react-native-image-colors/harmony/image_colors.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 RNImageColorsPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { RNImageColorsPackage } from "@react-native-oh-tpl/react-native-image-colors/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNImageColorsPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-colors Releases](https://github.com/react-native-oh-library/react-native-image-colors/releases) + +## API + +### ImageColors.getColors(uri: string, config?: Config): Promise + + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------- | ------------------------------------- | -------- | -------- | -------- | ----------------- | +| getColors | Fetch prominent colors from an image. | Function | yes | all | yes | + + +### Uri + +A string which can be: + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------- | ------------------------------------- | -------- | -------- | -------- | ----------------- | +| uri | 1. URL: [`https://i.imgur.com/O3XSdU7.jpg`](https://i.imgur.com/O3XSdU7.jpg);
2. Local file: const catImg = require('./images/cat.jpg');
3. Base64: const catImgBase64 = 'data:image/jpeg;base64,/9j/4Ri...' | string | yes | all | yes | + + > The mime type prefix for base64 is required (e.g. data:image/png;base64). + +### Config + +The config object is optional. + +| Name | Description | Type | Required | Default | Supported | HarmonyOS Support | +| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- | ------------------- | ----------------- | ----------------- | +| `fallback` | If a color property couldn't be retrieved, it will default to this hex color string | `string` | no | `"#000000"` | all | yes | +| `cache` | Enables in-memory caching of the result - skip downloading the same image next time. | `boolean` | no | `false` | all | yes | +| `key` | Unique key to use for the cache entry. The image URI is used as the unique key by default. You should explicitly pass a key if you enable caching and you're using a base64 string as the URI. | `string` | no | `undefined` | all | yes | +| `headers` | HTTP headers to be sent along with the GET request to download the image | `Record` | no | `undefined` | iOS, Android | yes | +| `pixelSpacing` | How many pixels to skip when iterating over image pixels. Higher means better performance (**note**: value cannot be lower than 1). | `number` | no | `5` | Android | no | +| `quality` | Highest implies no downscaling and very good colors. | `'lowest'`
`'low'`
`'high'`
`'highest'` | no | `'low'` | iOS, Web | no | + +### ImageColorsResult + +Every result object contains a respective `platform` key to help narrow down the type. + +HarmonyImageColors + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | --------------------------------------------------- | ----------- | -------- | --------- | ----------------- | +| `mainColor` | The main colors of the image. | `string` | no | harmonyOS | yes | +| `largestProportionColor` | The color with the highest proportion in the image. | `string` | no | harmonyOS | yes | +| `highestSaturationColor` | The color with the highest saturation in the image. | `string` | no | harmonyOS | yes | +| `averageColor` | The average color of the image. | `string` | no | harmonyOS | yes | +| `platform` | The platform is HarmonyOS. | `string` | no | all | yes | + +### ImageColors.cache + +| Name | Description | Type | Required | Params | Platform | HarmonyOS Support | +| --------- | ------------------------------------- | -------- | -------- | -------- | -------- | ----------------- | +| getItem | Read cache result. | Function | no | key: string | all | yes | +| setItem | Set a cached result. | Function | no | key: string, value: ImageColorsResult | all | yes | +| removeItem | Delete a cached result. | Function | no | key: string | all | yes | +| clear | Clearing the cache. | Function | no | | all | yes | + + +### Notes +- Since the implementation of each platform is different you can get **different color results for each**. +- This module is a wrapper around the [Palette](https://developer.android.com/reference/androidx/palette/graphics/Palette) class on Android, [UIImageColors](https://github.com/jathu/UIImageColors) on iOS and [node-vibrant](https://github.com/Vibrant-Colors/node-vibrant) for the web and [@ohos.effectKit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-effectkit-V5) on harmonyOS. + + +## 遗留问题 + +- [x] harmonyOS获取颜色值暂时只能得到固定的一种颜色，暂不支持通过传入`pixelSpacing`或`quality`参数来计算获取不同精确度的颜色值。[issue链接](https://github.com/react-native-oh-library/react-native-image-colors/issues/16) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/osamaqarem/react-native-image-colors/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-image-crop-picker(nocodegen).md b/en/react-native-image-crop-picker(nocodegen).md new file mode 100644 index 00000000..0ebc4177 --- /dev/null +++ b/en/react-native-image-crop-picker(nocodegen).md @@ -0,0 +1,297 @@ +> 模板版本：v0.2.2 + +

+

react-native-image-crop-picker（nocodegen）

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-crop-picker) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-crop-picker Releases ](https://github.com/react-native-oh-library/react-native-image-crop-picker/releases)，并下载带有 `nc` 标识的 tgz 包，如 `0.40.3-nc.0.0.9`。 + +进入到工程目录并输入以下命令： + +> [!TIP] #处替换为 tgz 包的路径 + +#### **npm** + +``` +npm install @react-native-oh-tpl/react-native-image-crop-picker@file:# +``` + +#### **yarn** + +``` +yarn add @react-native-oh-tpl/react-native-image-crop-picker@file:# +``` + +使用场景同[react-native-image-crop-picker](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-crop-picker.md#yarn) + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony + +``` +在工程根目录的 oh-package.json5 添加 overrides字段 +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 1.配置 Entry + +**(1)在 entry/src/main/ets/entryability 下创建 ImageEditAbility.ets** + +```ts +import UIAbility from '@ohos.app.ability.UIAbility' +import window from '@ohos.window' + +const TAG = 'ImageEditAbility'; + +export default class ImageEditAbility extends UIAbility { + + onWindowStageCreate(windowStage: window.WindowStage) { + this.setWindowOrientation(windowStage, window.Orientation.PORTRAIT) + windowStage.loadContent('pages/ImageEdit', (err, data) => { + if (err.code) { + console.info(TAG,'Failed to load the content. Cause: %{public}s', + JSON.stringify(err) ?? '') + return; + } + console.info(TAG,'Succeeded in loading the content') + }); + try { + windowStage.getMainWindowSync().setWindowLayoutFullScreen(true, (err)=>{ + if (err.code) { + console.error('Failed to enable the full-screen mode. Cause: ' + JSON.stringify(err)); + return; + } + console.info('Succeeded in enabling the full-screen mode.'); + }) + } catch (exception) { + console.error('Failed to set the system bar to be invisible. Cause: ' + JSON.stringify(exception)); + } + } + + setWindowOrientation(stage: window.WindowStage, orientation: window.Orientation): void { + console.info(TAG,"into setWindowOrientation :") + if (!stage || !orientation) { + return; + } + stage.getMainWindow().then(windowInstance => { + windowInstance.setPreferredOrientation(orientation); + }) + } + + onBackground() { + this.context.terminateSelf(); + } +} +``` + +**(2)在 entry/src/main/module.json5 注册 ImageEditAbility 并添加 requestPermissions** + +```json +"abilities":[{ + "name": "ImageEditAbility", + "srcEntry": "./ets/entryability/ImageEditAbility.ets", + "description": "$string:EntryAbility_desc", + "icon": "$media:icon", + "startWindowIcon": "$media:startIcon", + "startWindowBackground": "$color:start_window_background", + "removeMissionAfterTerminate": true, + +} +... +] + +``` + +**(3)在 entry/src/main/ets/pages 下创建 ImageEdit.ets** + +```ts +import { ImageEditInfo } from '@react-native-oh-tpl/react-native-image-crop-picker'; + +@Entry +@Component +struct ImageEdit { + + build() { + Row(){ + Column(){ + ImageEditInfo(); + } + .width('100%') + } + .height('100%') + } +} +``` + +**(4)在 entry/src/main/resources/base/profile/main_pages.json 添加配置** + +```json +{ + "src": [ + "pages/Index", + "pages/ImageEdit" + ] +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入。 +2. 直接链接源码。 + +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +``` +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-image-crop-picker": "file:../../node_modules/@react-native-oh-tpl/react-native-image-crop-picker/harmony/image_crop_picker.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +``` +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/link-source-code.md) + +### 3.配置 CMakeLists 和引入 ImageCropPickerPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-image-crop-picker/src/main/cpp" ./image-crop-picker) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") ++ file(GLOB IMAGE_CROP_PICKER_CPP_FILES "${OH_MODULES}/@react-native-oh-tpl/react-native-image-crop-picker/src/main/cpp/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} ++ ${IMAGE_CROP_PICKER_CPP_FILES } + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_image_crop_picker) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "ImageCropPickerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} + +``` + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { ImageCropPickerPackage } from "@react-native-oh-tpl/react-native-image-crop-picker/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new ImageCropPickerPackage (ctx), + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +``` +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-crop-picker Releases ](https://github.com/react-native-oh-library/react-native-image-crop-picker/releases) + +## API + +同[react-native-image-crop-picker](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-crop-picker.md#api) + +## 属性 + +同[react-native-image-crop-picker](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-crop-picker.md#%E5%B1%9E%E6%80%A7) + +## 遗留问题 + +同[react-native-image-crop-picker](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-image-crop-picker.md#%E9%81%97%E7%95%99%E9%97%AE%E9%A2%98) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/ivpusic/react-native-image-crop-picker/blob/master/LICENSE) ，请自由地享受和参与开源。 + diff --git a/en/react-native-image-crop-picker.md b/en/react-native-image-crop-picker.md new file mode 100644 index 00000000..70b5f58f --- /dev/null +++ b/en/react-native-image-crop-picker.md @@ -0,0 +1,1066 @@ + +> 模板版本：v0.2.2 + +

+

react-native-image-crop-picker

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-crop-picker) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-image-crop-picker Releases ](https://github.com/react-native-oh-library/react-native-image-crop-picker/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] #处替换为tgz包的路径 + +#### **npm** + +``` +npm install @react-native-oh-tpl/react-native-image-crop-picker@file:# +``` + +#### **yarn** + +``` +yarn add @react-native-oh-tpl/react-native-image-crop-picker@file:# +``` + +下面的代码展示了这个库的基本使用场景： + +> [!TIP] 使用时 import 的库名不变。 + +``` +import ImagePicker from 'react-native-image-crop-picker'; +import { openPicker } from 'react-native-image-crop-picker'; +import React from 'react'; +import { Text, StyleSheet, TextInput, View, Button, ScrollView, Switch } from 'react-native'; + +const ImageCropPickDemo = () => { + const TAG: string = 'ImageCropPickerTurboModule'; + const [maxFiles, setMaxFiles] = React.useState(''); + const [imageQuality, setImageQuality] = React.useState(''); + const [imagePath, setImagePath] = React.useState(''); + const [clearImagePath, setClearImagePath] = React.useState(''); + const [cropperTitle, setCropperTitle] = React.useState(''); + const [chooseText, setChooseText] = React.useState(''); + const [chooseColor, setChooseColor] = React.useState(''); + const [cancelText, setCancelText] = React.useState(''); + const [cancelColor, setCancelColor] = React.useState(''); + const [cropperRotate, setCropperRotate] = React.useState(false); + const [showCropGuidelines, setShowCropGuidelines] = React.useState(true); + const [showCropFrame, setShowCropFrame] = React.useState(true); + const [multiple, setMultiple] = React.useState(false); + const [includeExif, setIncludeExif] = React.useState(false); + const [avoidEmptySpace, setAvoidEmptySpace] = React.useState(false); + const [writeTempFile, setTempFile] = React.useState(true); + const [includeBase64, setBase64] = React.useState(false); + const [freeStyleCropEnabled, setFreeStyleCropEnabled] = React.useState(false); + const [forceJpg, setForceJpg] = React.useState(false); + const [showsSelectedCount, setShowsSelectedCount] = React.useState(true); + const [selectedButton, setSelectedButton] = React.useState('any'); + const [useFrontCamera, setUseFrontCamera] = React.useState(false); + const [croppingCamera, setCroppingCamera] = React.useState(false); + const [writeTempFileCamera, setTempFileCamera] = React.useState(true); + const [includeBase64Camera, setBase64Camera] = React.useState(false); + const [includeExifCamera, setIncludeExifCamera] = React.useState(false); + const [avoidEmptySpaceCamera, setAvoidEmptySpaceCamera] = React.useState(false); + const [freeStyleCropEnabledCamera, setFreeStyleCropEnabledCamera] = React.useState(false); + const [forceJpgCamera, setForceJpgCamera] = React.useState(false); + const [mediaTypeCamera, setMediaTypeCamera] = React.useState('any'); + const [imageQualityCamera, setImageQualityCamera] = React.useState(''); + const [cropperTitleCamera, setCropperTitleCamera] = React.useState(''); + const [chooseTextCamera, setChooseTextCamera] = React.useState(''); + const [chooseColorCamera, setChooseColorCamera] = React.useState(''); + const [cancelTextCamera, setCancelTextCamera] = React.useState(''); + const [cancelColorCamera, setCancelColorCamera] = React.useState(''); + const [cropperRotateCamera, setCropperRotateCamera] = React.useState(false); + const [showCropGuidelinesCamera, setShowCropGuidelinesCamera] = React.useState(true); + const [showCropFrameCamera, setShowCropFrameCamera] = React.useState(true); + const [writeTempFileCropper, setTempFileCropper] = React.useState(true); + const [forceJpgCropper, setForceJpgCropper] = React.useState(false); + const [includeBase64Cropper, setBase64Cropper] = React.useState(false); + const [includeExifCropper, setIncludeExifCropper] = React.useState(false); + const [avoidEmptySpaceCropper, setAvoidEmptySpaceCropper] = React.useState(false); + const [freeStyleCropEnabledCropper, setFreeStyleCropEnabledCropper] = React.useState(false); + const [imageQualityCropper, setimageQualityCropper] = React.useState(''); + + const handleButtonPress = (buttonName) => { + setSelectedButton(buttonName); + }; + + const handleMediaType = (buttonName) => { + setMediaTypeCamera(buttonName); + }; + + return ( + + 相机、图库、裁剪功能： + + + + + multiple: + + + + ); +}; +const styles = StyleSheet.create({ + container: { + flexDirection: "row", + justifyContent: "space-around", + }, +}); + +export default ReactImageZoon; +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-zoom-viewer Releases](https://github.com/react-native-oh-library/react-native-image-viewer/releases) + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Platform | HarmonyOS Support | Remark | +| ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | ----------- | ----------------- | ---------------------------------------- | +| imageUrls | Image Source | array | Android iOS | YES | | +| enableImageZoom | Enable image zoom | boolean | Android iOS | NO | | +| onShowModal | The callback for show modal | function
(content?: JSX.Element) => void | NO | NO | 此属性在HarmonyOS，Android ，iOS均不生效 | +| onCancel | The callback for cancel modal | function
() => void | Android iOS | YES | | +| flipThreshold | Swipe threshold of the next page | number | Android iOS | YES | | +| maxOverflow | The X position maximum, that current page can slide to the next page | number | Android iOS | YES | | +| index | Init index of images | number | Android iOS | YES | | +| failImageSource | placeholder for fail | string, object
{url: string} | Android iOS | YES | | +| loadingRender | placeholder for loading | function
() => React.ReactElement | Android iOS | YES | | +| onSaveToCamera | The callback for save to camera | function
(index?: number => void | Android iOS | YES | | +| onChange | When the image changed | function
(index?: number => void | Android iOS | YES | | +| onMove | ()=> {} | ( position: [onMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void | Android iOS | YES | | +| saveToLocalByLongPress | Enable save to camera when long press | boolean | Android iOS | YES | | +| onClick | Onclick | function
(onCancel?: function) => void | Android iOS | YES | | +| onDoubleClick | OnDoubleClick | function
(onCancel?: function) => void | Android iOS | YES | | +| onSave | The picture is saved to the local method, if you write this method will not call the system default method for Android does not support saveToCameraRoll remote picture, you can call this callback in Android call native interface | function
(url: string) => void | Android iOS | YES | | +| renderHeader | Custom header | function
(currentIndex?: number) => React.ReactElement | Android iOS | YES | | +| renderFooter | Custom footer | function
(currentIndex?: number) => React.ReactElement | Android iOS | YES | | +| renderIndicator | Custom indicator | function
`(currentIndex?: number, allSize?) => React.ReactElement`: number | Android iOS | YES | | +| renderImage | Custom image component | function
(props: any) => React.ReactElement | Android iOS | YES | | +| renderArrowLeft | Custom left arrow | function
() => React.ReactElement | Android iOS | YES | | +| renderArrowRight | Custom right arrow | function
() => React.ReactElement | Android iOS | YES | | +| onSwipeDown | Callback for swipe down | function
() => void | Android iOS | YES | | +| footerContainerStyle | custom style props for container that will be holding your footer that you pass | object
{someStyle: someValue} | Android iOS | YES | | +| backgroundColor | Component background color | string
white | Android iOS | YES | | +| enableSwipeDown | Enable swipe down to close image viewer. When swipe down, will trigger onCancel. | boolean | Android iOS | YES | | +| swipeDownThreshold | Threshold for firing swipe down function | number | Android iOS | YES | | +| doubleClickInterval | Double click interval. | number | Android iOS | YES | | +| pageAnimateTime | Set the animation time for page flipping. | number | Android iOS | YES | | +| enablePreload | Preload the next image | boolean | Android iOS | YES | | +| useNativeDriver | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver) | boolean | Android iOS | YES | | +| menus | Custom menus, with 2 methods:`cancel` to hide menus and `saveToLocal` to save image to camera | function
({cancel,saveToLocal}) => React.ReactElement | Android iOS | YES | | +| menuContext | Custom menu context. | object
{someKey: someValue} | Android iOS | YES | | + +## 遗留问题 + +- [ ] 本库 CameraRoll.saveToCameraRoll 还未完全 HarmonyOS 化，暂不支持调起相册 （未解决）[issues#1](https://github.com/react-native-oh-library/react-native-image-viewer/issues/1) +- [ ] 本库依赖 react-native-image-zoom ,enableImageZoom属性还未完全 HarmonyOS 化（未解决）[issues#2](https://github.com/react-native-oh-library/react-native-image-viewer/issues/1) +- [ ] 本库依赖 react-native-image-zoom ,长按触发框架图片拖拽，应用崩溃（未解决）[issues#3](https://github.com/react-native-oh-library/react-native-image-viewer/issues/1) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/ascoders/react-native-image-viewer/blob/master/LICENSE) ，请自由地享受和参与开源。 + + + diff --git a/en/react-native-inappbrowser.md b/en/react-native-inappbrowser.md new file mode 100644 index 00000000..c816a7ab --- /dev/null +++ b/en/react-native-inappbrowser.md @@ -0,0 +1,527 @@ +> 模板版本：v0.2.2 + +

+

react-native-inappbrowser-reborn

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-inappbrowser) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-inappbrowser-reborn Releases](https://github.com/react-native-oh-library/react-native-inappbrowser/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] #处替换为tgz包的路径 + +#### **npm** + +``` +npm install @react-native-oh-tpl/react-native-inappbrowser-reborn@file:# +``` + +#### **yarn** + +``` +yarn add @react-native-oh-tpl/react-native-inappbrowser-reborn@file:# +``` + +下面的代码展示了这个库的基本使用场景： + +> [!TIP] 使用时 import 的库名不变。 + +``` +import React, {useState } from 'react'; +import { StyleSheet, Text, Button ,ScrollView,View,StatusBarStyle,} from 'react-native'; +import {InAppBrowser} from 'react-native-inappbrowser-reborn' +import {tryDeepLinking,openLink} from './utils' + +export default function BrowserDemo() { + const [text, setText] = useState(''); + const [url, setUrl] = useState('https://reactnative.dev'); + + const onOpenLink = async() => { + let resut = await openLink(url,{}); + setText(JSON.stringify(resut)) + } + + const onTryDeepLinking = async() => { + let result = await tryDeepLinking(); + setText(JSON.stringify(result)) + return result; + } + + const onIsAvailable = async () => { + let isAvailable = await InAppBrowser.isAvailable(); + return isAvailable + } + + const close =() => { + openLink(url, {}); + setTimeout(function(){ + console.info('-----------------') + InAppBrowser.close(); + },10000) + } + + const closeAuth =() => { + tryDeepLinking(); + setTimeout(function(){ + console.info('-----------------') + InAppBrowser.closeAuth(); + },10000) + } + + const warmup = () => { + InAppBrowser.warmup(); + } + + const mayLaunchUrl = () => { + InAppBrowser.mayLaunchUrl(url,[]); + } + + return ( + + + BrowserDemo + + + + {text} + + + + + + onOpenLink + + + + + onTryDeepLinking + + + + + onIsAvailable + + + + + close + + + + + tryDeepLinking + + + + + closeAuth + + + + + warmup + + + + + mayLaunchUrl + + + + + + ); +} + +const styles = StyleSheet.create({ + container: { + width: '100%', + height: '100%', + flexDirection: 'column', + alignItems: 'center', + backgroundColor: '#F1F3F5', + }, + baseText: { + fontWeight: 'bold', + textAlign:'center', + fontSize:16 + }, + + titleArea:{ + width:'90%', + height:'8%', + alignItems:'center', + flexDirection:'row', + }, + + title: { + width:'90%', + color:'#000000', + textAlign:'left', + fontSize: 30, + }, + + scrollView: { + width:'90%', + marginHorizontal: 20, + }, + + inputArea: { + width:'90%', + height:'10%', + borderWidth:2, + borderColor:'#000000', + marginTop:8, + justifyContent:'center', + alignItems:'center', + }, + baseArea: { + width:'100%', + height:60, + borderRadius:4, + borderColor:'#000000', + marginTop:8, + backgroundColor:'#FFFFFF', + flexDirection: 'row', + alignItems:'center', + paddingLeft:8, + paddingRight:8 + } + +}); + +import {Alert,Platform,} from 'react-native'; +import {InAppBrowser} from 'react-native-inappbrowser-reborn' + +export interface options { + dismissButtonStyle?: 'done' | 'close' | 'cancel', + preferredBarTintColor?:string, + preferredControlTintColor?:string +} + +export const openLink = async ( +url: string, +statusBarStyle: options, +animated = true, +) => { + let result = await InAppBrowser.open( + url, + { + dismissButtonStyle:statusBarStyle.dismissButtonStyle, + preferredBarTintColor:statusBarStyle.preferredBarTintColor, + preferredControlTintColor:statusBarStyle.preferredControlTintColor + } + ); + Alert.alert('Response', JSON.stringify(result)); + return result; +} + +export const getDeepLink = (path = '') => { + const scheme = 'my-demo'; + const prefix = + Platform.OS === 'android' ? `${scheme}://demo/` : `${scheme}://`; + return prefix + path; +}; + +export const tryDeepLinking = async () => { + const loginUrl = 'https://proyecto26.github.io/react-native-inappbrowser/'; + const redirectUrl = getDeepLink(); + const url = `${loginUrl}?redirect_url=${encodeURIComponent(redirectUrl)}`; + try { + if (await InAppBrowser.isAvailable()) { + const result = await InAppBrowser.openAuth(url, redirectUrl, { + // iOS Properties + ephemeralWebSession: false, + }); + //await sleep(800); + return result + } else { + return 'InAppBrowser is not supported :/' + } + } catch (error) { + console.error(error); + } + return 'Something’s wrong with the app' +}; +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony + +``` +在工程根目录的 oh-package.json 添加 overrides字段 +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 配置Entry + +**1.在 entry/src/main/ets/entryability 下创建 BrowserManagerAbility.ets** + +``` +import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit'; +import { hilog } from '@kit.PerformanceAnalysisKit'; +import { window } from '@kit.ArkUI'; + +export default class BrowserManagerAbility extends UIAbility { + + onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { + hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); + } + + onDestroy(): void { + hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); + } + + onWindowStageCreate(windowStage: window.WindowStage): void { + // Main window is created, set main page for this ability + hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); + + windowStage.loadContent('pages/BrowserManagerPage', (err) => { + if (err.code) { + hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); + return; + } + hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); + }); + } + + onWindowStageDestroy(): void { + // Main window is destroyed, release UI related resources + hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); + } + + onForeground(): void { + // Ability has brought to foreground + hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); + } + + onBackground(): void { + // Ability has back to background + hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); + } +} + +``` + +**2.在 entry/src/main/module.json5注册BrowserManagerAbility** + +``` +"ablilities":[{ + "name": "BrowserManagerAbility", + "srcEntrance": "./ets/entryability/BrowserManagerAbility.ets", + "description": "$string:EntryAbility_desc", + "icon": "$media:icon", + "startWindowIcon": "$media:startIcon", + "startWindowBackground": "$color:start_window_background", + "visible": true, + } +... +] +``` + +**3.在 entry/src/main/ets/pages 下创建 BrowserManagerPage.ets** + +``` +import { BrowserPage } from '@react-native-oh-tpl/react-native-inappbrowser-reborn/Index' + +@Entry +@Component +struct ChromeTabsManagerPage { + build() { + Row(){ + Column(){ + BrowserPage(); + } + .width('100%') + } + .height('100%') + } + +} +``` + +**4.在 entry/src/main/resources/base/profile/main_pages.json 添加配置** + +``` +{ + "src": [ + "pages/Index", + "pages/BrowserManagerPage" + ] +} +``` + +**5.如果需要预热应用内浏览器客户端，使其启动速度显著加快，可以将以下内容添加到BrowserManagerAbility** + +``` +import { RNInAppBrowserModule } from '@react-native-oh-tpl/react-native-inappbrowser-reborn/ts'; + +export default class BrowserManagerAbility extends UIAbility { + + onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { + hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); + RNInAppBrowserModule.start(); + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入。 +2. 直接链接源码。 + +方法一：通过 har 包引入 (推荐) + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +``` +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-inappbrowser-reborn": "file:../../node_modules/@react-native-oh-tpl/react-native-inappbrowser-reborn/harmony/inappbrowser.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +``` +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 RNInAppBrowserPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { RNInAppBrowserPackage } from '@react-native-oh-tpl/react-native-inappbrowser-reborn/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNInAppBrowserPackage(ctx), + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +``` +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-inappbrowser-reborn Releases](https://github.com/react-native-oh-library/react-native-inappbrowser/releases) + +## API + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| open | Opens the url with Safari in a modal on iOS using SFSafariViewController, and Chrome in a new custom tab on Android. On iOS, the modal Safari will not share cookies with the system Safari. | function | no | iOS/Android | yes | +| close | Dismisses the system's presented web browser. | function | no | iOS/Android | yes | +| openAuth |Opens the url with Safari in a modal on iOS using SFAuthenticationSession/ASWebAuthenticationSession, and Chrome in a new custom tab on Android. On iOS, the user will be asked whether to allow the app to authenticate using the given url (OAuth flow with deep linking redirection). | function | no | iOS/Android | yes | +| closeAuth | Dismisses the current authentication session. | function | no | iOS/Android | yes | +| isAvailable | Detect if the device supports this plugin. | function | no | iOS/Android | yes | +| onStart | Initialize a bound background service so the application can communicate its intention to the browser. After the service is connected, the client can be used to Warms up the browser to make navigation faster and indicates that a given URL may be loaded in the future. - Android Only. | function | no | Android | yes | +| warmup | Warm up the browser process - Android Only. | function | no | Android | yes | +| mayLaunchUrl | Tells the browser of a likely future navigation to a URL. The most likely URL has to be specified first. Optionally, a list of other likely URLs can be provided. They are treated as less likely than the first one, and have to be sorted in decreasing priority order. These additional URLs may be ignored. All previous calls to this method will be deprioritized - Android Only. | function | no | Android | yes | + +## 属性 +**iOS Options** +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| dismissButtonStyle | The style of the dismiss button. [done/close/cancel] | String | NO | iOS | yes | +| preferredBarTintColor | The color to tint the background of the navigation bar and the toolbar. [white/#FFFFFF] | String | NO | iOS | yes | +| preferredControlTintColor | The color to tint the control buttons on the navigation bar and the toolbar. [gray/#808080] | String | NO | iOS | yes | +| readerMode | A value that specifies whether Safari should enter Reader mode, if it is available. [true/false] | Boolean | NO | iOS | NO | +| animated | Animate the presentation. [true/false] | Boolean | NO | iOS | NO | +| modalPresentationStyle | The presentation style for modally presented view controllers. [automatic/none/fullScreen/pageSheet/formSheet/currentContext/custom/overFullScreen/overCurrentContext/popover] | String | NO | iOS | NO | +| modalTransitionStyle | The transition style to use when presenting the view controller. [coverVertical/flipHorizontal/crossDissolve/partialCurl] | String | NO | IOS | NO | +| modalEnabled | Present the SafariViewController modally or as push instead. [true/false] | Boolean | NO | iOS | NO | +| enableBarCollapsing | Determines whether the browser's tool bars will collapse or not. [true/false] | Boolean | NO | iOS | NO | +| ephemeralWebSession | Prevent re-use cookies of previous session (openAuth only) [true/false] | Boolean | NO | iOS | NO | +| formSheetPreferredContentSize | Custom size for iPad formSheet modals [{width: 400, height: 500}] | Boolean | NO | iOS | NO | + +**Android Options** +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| showTitle | Sets whether the title should be shown in the custom tab. [true/false] | Boolean | NO | Android | NO | +| toolbarColor | Sets the toolbar color. [gray/#808080] | String | NO | Android | NO | +| secondaryToolbarColor | Sets the color of the secondary toolbar. [white/#FFFFFF] | String | NO | Android | NO | +| navigationBarColor | Sets the navigation bar color. [gray/#808080] | String | NO | Android | NO | +| navigationBarDividerColor | Sets the navigation bar divider color. [white/#FFFFFF] | String | NO | Android | NO | +| enableUrlBarHiding | Enables the url bar to hide as the user scrolls down on the page. [true/false] | String | NO | Android | NO | +| enableDefaultShare | Adds a default share item to the menu. [true/false] | String | NO | Android | NO | +| animations | Sets the start and exit animations. [{ startEnter, startExit, endEnter, endExit }] | Object | NO | Android | NO | +| headers | The data are key/value pairs, they will be sent in the HTTP request headers for the provided url. [{ 'Authorization': 'Bearer ...' }] | Object | NO | Android | NO | +| forceCloseOnRedirection | Open Custom Tab in a new task to avoid issues redirecting back to app scheme. [true/false] | Boolean | NO | Android | NO | +| hasBackButton | Sets a back arrow instead of the default X icon to close the custom tab. [true/false] | Boolean | NO | Android | NO | +| browserPackage | Package name of a browser to be used to handle Custom Tabs. | Boolean | NO | Android | NO | +| showInRecents | Determining whether browsed website should be shown as separate entry in Android recents/multitasking view. [true/false] | Boolean | NO | Android | NO | +| includeReferrer | Determining whether to include your package name as referrer for the website to track. [true/false] | Boolean | NO | Android | NO | + + +## 遗留问题 + +- [ ] 打开浏览器时，不能指定浏览器设置阅读模式 [#1](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/1) +- [ ] 打开浏览器，无法使文稿动起来 [#2](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/2) +- [ ] 无法设置浏览器的视图控制器的风格 [#3](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/3) +- [ ] 无法设置浏览器的过度风格 [#4](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/4) +- [ ] 无法设置浏览器的推送方式 [#5](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/5) +- [ ] 浏览器无法设置工具栏进行折叠 [#6](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/6) +- [ ] 浏览器设置是否重复使用前一次会话的cookie [#7](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/7) +- [ ] 浏览器设置模态框的自定义尺寸 [#8](https://github.com/react-native-oh-library/react-native-inappbrowser/issues/8) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/proyecto26/react-native-inappbrowser/blob/develop/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-incall-manager.md b/en/react-native-incall-manager.md new file mode 100644 index 00000000..c8c83503 --- /dev/null +++ b/en/react-native-incall-manager.md @@ -0,0 +1,745 @@ +模板版本：v0.2.2 + +

+

+ react-native-incall-manager +

+

+ +

+ + Supported platforms + + + License + +

+ + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-incall-manager) + + +## 安装与使用 + + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-incall-manager Releases](https://github.com/react-native-oh-library/react-native-incall-manager/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-incall-manager@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-incall-manager@file:# +``` + + + +**关于音频文件放置** +> [!WARNING] 由于HarmonyOS暂不支持普通应用获取系统铃声，需要手动导入音频文件. +将音频文件至HarmonyOS 工程 `harmony`，entry/src/main/resources/rawfile文件夹下，音频文件命名如下： +incallmanager_busytone.mp3 +incallmanager_ringback.mp3 +incallmanager_ringtone.mp3 + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + + +```js + +import { useState, useEffect } from 'react'; +import * as React from 'react'; +import { + DeviceEventEmitter, + NativeModules, + NativeEventEmitter, + Platform, + SafeAreaView, + View, + Text, + ScrollView, + TouchableOpacity, + TurboModuleRegistry, +} from 'react-native'; +import InCallManager from 'react-native-incall-manager'; +const InCallManagerEmitter = new NativeEventEmitter(TurboModuleRegistry.getEnforcing('InCallManagerTurboModule') ? TurboModuleRegistry.getEnforcing('InCallManagerTurboModule') : NativeModules.InCallManager); + + +enum InCallStartType { + START = 'start', + RINGBACK = 'ringback', + BUSYTONE = 'busytone', + RINGTONE = 'ringtone', +} + +export default function InCallManagerExample() { + const [changeType, setChangeType] = useState<'audio' | 'video' | undefined>( + 'audio', + ); + const [audioUriJS, setAudioUri] = useState(''); + const [wiredHeadsetPluggedInObj, setWiredHeadsetPluggedInObj] = + useState(); + const [audioRoute, setAudioRoute] = useState(''); + const [proximityEvent, setProximityEvent] = useState(); + const [wiredHeadsetEvent, setWiredHeadsetEvent] = useState(); + const [noisyAudioEvent, setNoisyAudioEvent] = useState(); + const [mediaButtonEvent, setMediaButtonEvent] = useState(); + const [onAudioFocusChange, setAudioFocusChangeEvent] = useState(); + + const proximityHandleFuc = (data: any) => { + // data: {'isNear': boolean} + console.log('Proximity', data); + setProximityEvent(data); + }; + + useEffect(() => { + const proximityHandle = InCallManagerEmitter.addListener( + 'Proximity', + proximityHandleFuc, + ); + + const wiredHeadsetHandle = InCallManagerEmitter.addListener( + 'WiredHeadset', + wiredHeadsetHandleFuc, + ); + + return () => { + proximityHandle.remove(); + wiredHeadsetHandle.remove(); + }; + }, []); + + useEffect(() => { + if (Platform.OS === 'android' || Platform.OS === 'harmony') { + const noisyAudioHandle = InCallManagerEmitter.addListener( + 'NoisyAudio', + noisyAudioHandleFuc, + ); + + const mediaButtonHandle = InCallManagerEmitter.addListener( + 'MediaButton', + mediaButtonHandleFuc, + ); + + const onAudioFocusChangeHandle = InCallManagerEmitter.addListener( + 'onAudioFocusChange', + onAudioFocusChangeHandleFuc, + ); + + return () => { + noisyAudioHandle.remove(); + mediaButtonHandle.remove(); + onAudioFocusChangeHandle.remove(); + }; + } + }, []); + + function wiredHeadsetHandleFuc(data: any) { + // data: {'isPlugged': boolean, 'hasMic': boolean, 'deviceName': string } + console.log('WiredHeadset', data); + setWiredHeadsetEvent(data); + } + + function noisyAudioHandleFuc(data: any) { + // data: {} + console.log('NoisyAudio', data); + setNoisyAudioEvent(data); + } + + function mediaButtonHandleFuc(data: any) { + // data: {'eventText': string, 'eventCode': number } + console.log('MediaButton', data); + setMediaButtonEvent(data); + } + + function onAudioFocusChangeHandleFuc(data: any) { + // data: {'eventText': string, 'eventCode': number } + console.log('onAudioFocusChange', data); + setAudioFocusChangeEvent(data); + } + + const startAudio = ( + typeStr: string, + ringType = '_DEFAULT_', + mediaType: 'audio' | 'video' | undefined = 'audio', + ) => { + + if (typeStr === InCallStartType.START) { + InCallManager.start({ media: mediaType }); // audio/video, default: audio + } + if (typeStr === InCallStartType.RINGBACK) { + InCallManager.start({ media: mediaType, ringback: ringType }); // or _DEFAULT_ or _DTMF_ or _BUNDLE_ + } + if (typeStr === InCallStartType.RINGTONE) { + InCallManager.startRingtone(ringType, [0,500,1000,500], 'playback', 1000); + } + }; + + const stopAudio = (typeStr: string, ringType = '_DEFAULT_') => { + // --- On Call Hangup: + if (typeStr === InCallStartType.START) { + InCallManager.stop(); + } + if (typeStr === InCallStartType.RINGBACK) { + InCallManager.stopRingback(); + } + if (typeStr === InCallStartType.BUSYTONE) { + // busytone is basically for OUTGOING call. and is part of stop() + // If the call failed or callee are busing, + // you may want to stop the call and play busytone + InCallManager.stop({ busytone: ringType }); // or _BUNDLE_ or _DEFAULT_ or _DTMF_ + } + if (typeStr === InCallStartType.RINGTONE) { + InCallManager.stopRingtone(); + } + // ... it will also remove event listeners ... + }; + + const turnScreenOn = () => { + InCallManager.turnScreenOn(); + }; + + const turnScreenOff = () => { + InCallManager.turnScreenOff(); + }; + + const setKeepScreenOn = (enable: boolean) => { + InCallManager.setKeepScreenOn(enable); + }; + + const getAudioUriJS = async (audioType: string, fileType: string) => { + let url = await InCallManager.getAudioUri(audioType, fileType); + setAudioUri(url ? url : ''); + }; + + const getIsWiredHeadsetPluggedIn = async ( + audioType: string, + fileType: string, + ) => { + let isWiredHeadsetPluggedInObj = + await InCallManager.getIsWiredHeadsetPluggedIn(); + setWiredHeadsetPluggedInObj( + isWiredHeadsetPluggedInObj ? isWiredHeadsetPluggedInObj : '', + ); + }; + + const setFlashOn = async (enable: boolean, brightness: number) => { + InCallManager.setFlashOn(enable, brightness); + }; + + const startProximitySensor = () => { + InCallManager.startProximitySensor(); + }; + + const stopProximitySensor = () => { + InCallManager.stopProximitySensor(); + }; + + + return ( + + + + EVENT: + + + + proximityEvent:{JSON.stringify(proximityEvent)} + + + + wiredHeadsetEvent:{JSON.stringify(wiredHeadsetEvent)} + + + + noisyAudioEvent(iOS不支持):{JSON.stringify(noisyAudioEvent)} + + + + mediaButtonEvent(iOS不支持):{JSON.stringify(mediaButtonEvent)} + + + + onAudioFocusChange(iOS不支持):{JSON.stringify(onAudioFocusChange)} + + + { + stopAudio(InCallStartType.START); + setChangeType(changeType == 'audio' ? 'video' : 'audio'); + }}> + + 切换为{changeType == 'audio' ? 'video' : 'audio'} + + + + + + { + startAudio(InCallStartType.START, '_DEFAULT_', changeType); + }}> + start{changeType} + + + { + stopAudio(InCallStartType.START); + }}> + stop{changeType} + + + { + startAudio(InCallStartType.RINGTONE, '_BUNDLE_', changeType); + }}> + + start{changeType}RINGTONE:_BUNDLE_ + + + + { + startAudio(InCallStartType.RINGTONE, '_DEFAULT_', changeType); + }}> + + start{changeType}RINGTONE:_DEFAULT_ + + + + { + stopAudio(InCallStartType.RINGTONE); + }}> + stop{changeType}RINGTONE + + + { + startAudio(InCallStartType.RINGBACK, '_BUNDLE_', changeType); + }}> + + start{changeType}RINGBACK:_BUNDLE_ + + + + { + startAudio(InCallStartType.RINGBACK, '_DEFAULT_', changeType); + }}> + + start{changeType}RINGBACK:_DEFAULT_ + + + + { + startAudio(InCallStartType.RINGBACK, '_DTMF_', changeType); + }}> + start{changeType}RINGBACK:_DTMF_ + + + { + stopAudio(InCallStartType.RINGBACK); + }}> + stop{changeType}RINGBACK + + + { + stopAudio(InCallStartType.BUSYTONE, '_BUNDLE_'); + }}> + stop{changeType}BUSYTONE:_BUNDLE_ + + + { + stopAudio(InCallStartType.BUSYTONE, '_DEFAULT_'); + }}> + + stop{changeType}BUSYTONE:_DEFAULT_ + + + + { + stopAudio(InCallStartType.BUSYTONE, '_DTMF_'); + }}> + stop{changeType}BUSYTONE:_DTMF_ + + + { + turnScreenOn(); + }}> + turnScreenOn(iOS不支持) + + + { + turnScreenOff(); + }}> + turnScreenOff(iOS不支持) + + + { + setKeepScreenOn(true); + }}> + setKeepScreenOn=true + + + { + setKeepScreenOn(false); + }}> + setKeepScreenOn=false + + + { + await getAudioUriJS(InCallStartType.RINGTONE, ''); + }}> + + getAudioUriJS={InCallStartType.RINGTONE} + + + + { + await getAudioUriJS(InCallStartType.BUSYTONE, ''); + }}> + + getAudioUriJS={InCallStartType.BUSYTONE} + + + + { + await getAudioUriJS(InCallStartType.RINGBACK, ''); + }}> + + getAudioUriJS={InCallStartType.RINGBACK} + + + + { }}> + audioUriJS={audioUriJS} + + + { + await getIsWiredHeadsetPluggedIn('', ''); + }}> + getIsWiredHeadsetPluggedIn + + + { }}> + + getIsWiredHeadsetPluggedIn= + {JSON.stringify(wiredHeadsetPluggedInObj)} + + + + { + setFlashOn(true, 100); + }}> + setFlashOn=true(Android不支持) + + + { + setFlashOn(false, 50); + }}> + setFlashOn=false(Android不支持) + + + { + startProximitySensor(); + }}> + startProximitySensor + + + { + stopProximitySensor(); + }}> + stopProximitySensor + + + + + ); +} + + +``` +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + + "@react-native-oh-tpl/react-native-incall-manager": "file:../../node_modules/@react-native-oh-tpl/react-native-incall-manager/harmony/in_call_manager.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.配置 CMakeLists 和引入 RNInCallManagerPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-incall-manager/src/main/cpp" ./in_call_manager) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_in_call_manager) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "RNInCallManagerPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 4.在 ArkTs 侧引入 RNInCallManagerPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，或者`entry/src/main/ets/rn/RNPackagesFactory.ts`，添加： + +```diff ++ import { RNInCallManagerPackage } from '@react-native-oh-tpl/react-native-incall-manager/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNInCallManagerPackage(ctx), + ]; +} +``` + +### 5.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 +### 兼容性 + + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-incall-manager Releases](https://github.com/react-native-oh-library/react-native-incall-manager/releases) + + +### 应用权限申请 +> [!TIP] "ohos.permission.RUNNING_LOCK"，"ohos.permission.KEEP_BACKGROUND_RUNNING"权限等级为normal,授权方式为system_grant +> "ohos.permission.MICROPHONE"权限等级为normal，授权方式为user_grant，[使用 ACL 签名的配置指导](https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/signing-0000001587684945-V3#section157591551175916) + +#### 在 entry 目录下的module.json5中添加权限 +在 `YourProject/entry/src/main/module.json5`补上配置 + +```diff +{ + "module": { + "name": "entry", + "type": "entry", + + ··· + + "requestPermissions": [ ++ { "name": "ohos.permission.RUNNING_LOCK" }, ++ { ++ "name": "ohos.permission.MICROPHONE", ++ "reason": "$string:Access_micphone", ++ "usedScene": {"when": "inuse"} ++ }, ++ { "name": "ohos.permission.KEEP_BACKGROUND_RUNNING"， ++ "usedScene": { ++ "when": "always" ++ } ++ } + ] + } +} +``` +在 `YourProject/entry/src/main/resources/base/element/string.json`补上配置 + +#### 在 entry 目录下添加申请权限的原因 + +打开 `entry/src/main/resources/base/element/string.json`，添加： + +```diff +... +{ + "string": [ ++ { ++ "name": "Access_micphone", ++ "value": "access micphone" ++ } + ] +} +``` + + + +## 静态方法 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| vibrate | set vibrate true / false | boolean | no | all | yes | +| start | start incall manager.ringback accept non-empty string or it won't play default: \{media:'audio', auto: true, ringback: ''\} | (setup?: \{auto?: boolean;media?: "video" \| "audio";ringback?: string;\}) => void | no | all | yes | +| stop | stop incall manager,busytone accept non-empty string or it won't play,default: \{busytone: ''\} | (setup?: \{ busytone?: string \}) => void | no | all | partially | +| turnScreenOn | force turn screen on | () => void | no | Android | yes | +| turnScreenOff | turn screen off | () => void | no | Android | yes | +| setKeepScreenOn | set KeepScreenOn flag = true or false,default: false | (enable: boolean) => void | no | all | yes | +| setSpeakerphoneOn | toggle speaker ON/OFF once. but not force,default: false | (enable: boolean) => void | no | all | no | +| setForceSpeakerphoneOn | true -> force speaker on,false -> force speaker off,null -> use default behavior according to media type,default: null | (flag: boolean) => void | no | all | no | +| setMicrophoneMute | mute/unmute micophone,default: false,p.s. if you use webrtc, you can just use track.enabled = false to mute | (enable: boolean) => void | no | Android | no | +| getAudioUri | get audio Uri path. this would be useful when you want to pass Uri into another module. | (audioType: string, fileType: string) => Promise | no | all | yes | +| startRingtone | play ringtone.ringtone: 'DEFAULT' or 'BUNDLE',vibrate_pattern: same as RN, but does not support repeat,ios_category: ios only, if you want to use specific audio category,seconds: android only, specify how long do you want to play rather than play once nor repeat. in sec. | (ringtone: string,vibrate_pattern: number | number\[],ios_category: string,seconds: number) => void | no | all | partially | +| stopRingtone | stop play ringtone if previous started via | () => void | no | all | yes | +| startRingback | play ringback.,ringback: '_DEFAULT_' or '_DTMF_' | (ringback: string) => void; | no | all | partially | +| stopRingback | stop play ringback if previous started via start() | () => void | no | all | yes | +| stopProximitySensor | stop ProximitySensor | () => void | no | all | yes | +| startProximitySensor | start proximitySensor | () => void | no | all | yes | +| pokeScreen | poke screen | (timeout: number) => void | no | Android | no | +| chooseAudioRoute | choose audio route | (route: string) => Promise | no | Android | no | +| requestAudioFocus | request audio focus | () => Promise | no | Android | no | +| abandonAudioFocus | abandon audio focus | () => Promise | no | Android | no | +| setFlashOn | set flash light on/off | (enable: boolean, brightness: number) => void | no | iOS | yes | +| getIsWiredHeadsetPluggedIn | return wired headset plugged in state | () => Promise<\{ isWiredHeadsetPluggedIn: boolean \}> | no | all | yes | + +### Event(事件监听) + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| Proximity | proximity sensor detected changes. | (data: \{'isNear': boolean\}) => void | no | all | yes | +| WiredHeadset | fire when wired headset plug/unplug | (data: \{'isPlugged': boolean, 'hasMic': boolean, 'deviceName': string \}) => void | no | all | yes | +| NoisyAudio | a hint for applications that audio is about to become 'noisy' due to a change in audio outputs. | () => void | no | Android | yes | +| MediaButton | when external device controler pressed button | (data: \{'eventText': string, 'eventCode': number \}) => void | no | Android | yes | +| onAudioFocusChange | Called on the listener to notify it the audio focus for this listener has been changed. | (data: \{'eventText': string, 'eventCode': number }) => void | no | Android | yes | + + +## 遗留问题 + +- [ ] 打开关闭麦克风静音setMicrophoneMute，未实现 HarmonyOS化 问题: [issue#1](https://github.com/react-native-oh-library/react-native-incall-manager/issues/1) +- [ ] 播放获取系统铃声，未实现 HarmonyOS化 问题: [issue#2](https://github.com/react-native-oh-library/react-native-incall-manager/issues/2) +- [ ] 手动切换输出设备扬声器与听筒切换setSpeakerphoneOn、setForceSpeakerphoneOn，未实现 HarmonyOS化 问题: [issue#3](https://github.com/react-native-oh-library/react-native-incall-manager/issues/3) +- [ ] 手动切换音频输入输出设备chooseAudioRoute，未实现 HarmonyOS化 问题: [issue#4](https://github.com/react-native-oh-library/react-native-incall-manager/issues/4) + +## 其他 + +## 开源协议 + +本项目基于 [The ISC License (ISC)](https://github.com/react-native-webrtc/react-native-incall-manager/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-indicators.md b/en/react-native-indicators.md new file mode 100644 index 00000000..cd834c6b --- /dev/null +++ b/en/react-native-indicators.md @@ -0,0 +1,267 @@ +> 模板版本：v0.2.2 + +

+

react-native-indicators

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/n4kz/react-native-indicators) + +## 安装与使用 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install react-native-indicators@0.17.0 +``` + +#### **yarn** + +```bash +yarn add react-native-indicators@0.17.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { Component } from 'react'; +import { AppRegistry, StatusBar, View, Platform, Dimensions } from 'react-native'; +import { + BallIndicator, + BarIndicator, + DotIndicator, + MaterialIndicator, + PacmanIndicator, + PulseIndicator, + SkypeIndicator, + UIActivityIndicator, + WaveIndicator, +} from 'react-native-indicators'; +const { width, height } = Dimensions.get('window'); + + + export class IndicatorsTestExample extends Component { + render() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } + } + + +const styles = { + container: { + height: height-100, + backgroundColor: '#01579B', + padding: 20, + }, + + row: { + flex: 1, + flexDirection: 'row', + }, + + reverse: { + transform: [{ + rotate: '180deg', + }], + }, + + flex: { + flex: 1, + }, +}; +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25 (API Version 12 Canary4); IDE: DevEco Studio 5.0.3.400; ROM: 3.0.0.25; +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + + +### Common properties + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| animationEasing | Animation easing function | Function | NO | ALL | YES | +| animationDuration | Animation duration in ms | Number | NO | ALL | YES | +| animating | Animation toggle | Boolean | NO | ALL | YES | +| interaction | Animation is interaction | Boolean | NO | ALL | YES | +| hidesWhenStopped | Hide when not animating | Boolean | NO | ALL | YES | + +### BallIndicator + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| color | Component color | String | NO | ALL | YES | +| count | Component count | Number | NO | ALL | YES | +| size | Base component size | Number | NO | ALL | YES | + + +### BarIndicator + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| color | Component color | String | NO | ALL | YES | +| count | Component count | Number | NO | ALL | YES | +| size | Base component size | Number | NO | ALL | YES | + +### DotIndicator + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| color | Component color | String | NO | ALL | YES | +| count | Component count | Number | NO | ALL | YES | +| size | Base component size | Number | NO | ALL | YES | + +### MaterialIndicator + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| color | Component color | String | NO | ALL | YES | +| trackWidth | Indicator track width | Number | NO | ALL | YES | +| size | Base component size | Number | NO | ALL | YES | + +### PacmanIndicator + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| color | Component color | String | NO | ALL | YES | +| size | Base component size | Number | NO | ALL | YES | + +### PulseIndicator + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| color | Component color | String | NO | ALL | YES | +| size | Base component size | Number | NO | ALL | YES | + +### SkypeIndicator + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| color | Component color | String | NO | ALL | YES | +| count | Component count | Number | NO | ALL | YES | +| size | Base component size | Number | NO | ALL | YES | +| minScale | Minimum component scale | Number | NO | ALL | YES | +| maxScale | Maximum component scale | Number | NO | ALL | YES | + +### UIActivityIndicator + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| color | Component color | String | NO | ALL | YES | +| count | Component count | Number | NO | ALL | YES | +| size | Base component size | Number | NO | ALL | YES | + +### WaveIndicator + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| color | Component color | String | NO | ALL | YES | +| count | Component count | Number | NO | ALL | YES | +| size | Base component size | Number | NO | ALL | YES | +| waveFactor | Wave base number | Number | NO | ALL | YES | +| waveMode | Wave appearance | String | NO | ALL | YES | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The BSD License (BSD)](https://github.com/n4kz/react-native-indicators/blob/master/license.txt) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-input-scroll-view.md b/en/react-native-input-scroll-view.md new file mode 100644 index 00000000..d75f2767 --- /dev/null +++ b/en/react-native-input-scroll-view.md @@ -0,0 +1,120 @@ +> 模板版本：v0.2.2 + +

+

react-native-input-scroll-view

+

+

+ + Supported platforms + + + License + + +

+ + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-input-scroll-view) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-input-scroll-view Releases](https://github.com/react-native-oh-library/react-native-input-scroll-view/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-input-scroll-view@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-input-scroll-view@file:# +``` + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState } from 'react'; +import { StyleSheet, TextInput, View, TouchableOpacity, Text } from 'react-native'; +import InputScrollView from 'react-native-input-scroll-view'; + + +const keyboardOffsetInput = () => { + const [text, setText] = useState(''); + return ( + + + + + + + ); +} + + +const styles = StyleSheet.create({ + container: { + backgroundColor: '#EEE', + }, + placeholder: { + height: 400, + justifyContent: 'center', + alignItems: 'center', + }, + input: { + margin: 20, + paddingVertical: 10, + paddingHorizontal: 20, + borderColor: 'gray', + borderWidth: 1, + backgroundColor: '#FFF', + }, +}); + +export default keyboardOffsetInput; +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-input-scroll-view Releases](https://github.com/react-native-oh-library/react-native-input-scroll-view/releases) + +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | **Description** | Type | Required | **Default** | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------ | ------ | -------- | ----------- | ----------- | ----------------- | +| topOffset | `InputScrollView` 相对于窗口顶部的偏移量。当屏幕包含 `TopBar` 时，通常设置为 `TopBar` 的高度。如果未明确设置，程序会自动判断，但是可能会引起问题。 [issues#43](https://github.com/baijunjie/react-native-input-scroll-view/issues/43)。 | number | false | undefined | iOS/Android | yes | +| keyboardOffset | 当自动调整时，光标相对于键盘顶部的偏移量 | number | false | 40 | iOS/Android | yes | +| multilineInputStyle | 如果你的多行输入框有特定的样式，那么为了光标能够精准调整到键盘上方，应该将多行文本的样式也设置在这里，主要包含 `fontSize`、`fontFamily`、`lineHeight` 等会影响到光标位置的样式属性。**注意，不要包含 `width` 和 `height`**。 | Style | false | null | iOS/Android | yes | +| useAnimatedScrollView | 用 `Animated.ScrollView` 组件替换 `ScrollView` 组件。 | bool | false | false | iOS/Android | yes | +| supportHardwareKeyboard | `beta` 如果你的设备不使用软键盘，可以尝试使用此参数解决问题。 [issues#69](https://github.com/baijunjie/react-native-input-scroll-view/issues/69) | bool | false | false | iOS/Android | yes | +| keyboardAvoidingViewProps | `KeyboardAvoidingView` 组件的 Props。详细请查阅: https://facebook.github.io/react-native/docs/keyboardavoidingview | props | false | null | iOS/Android | yes | +| ...ScrollView.props | 继承 `ScrollView` 组件的所有属性。详细请查阅: https://facebook.github.io/react-native/docs/scrollview.html | props | false | | iOS/Android | yes | + +#### + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/baijunjie/react-native-input-scroll-view/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-intersection-observer.md b/en/react-native-intersection-observer.md new file mode 100644 index 00000000..55908461 --- /dev/null +++ b/en/react-native-intersection-observer.md @@ -0,0 +1,133 @@ + +> 模板版本：v0.2.2 + +

+

react-native-intersection-observer

+

+

+ + Supported platforms + + + License + + +

+ + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-intersection-observer/tree/sig) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-intersection-observer Releases](https://github.com/react-native-oh-library/react-native-intersection-observer/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-library/react-native-intersection-observer@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-library/react-native-intersection-observer@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```tsx +import React, { useRef } from "react"; +import { Text } from "react-native"; +import { + IOScrollView, + IOScrollViewController, + InView, +} from "react-native-intersection-observer"; + +function App() { + const scrollViewRef = useRef(null); + return ( + + { + scrollViewRef.current?.scrollToEnd(); + }} + > + Scroll to bottom + + console.log("Inview:", inView)}> + + Plain children are always rendered. Use onChange to monitor state. + + + + ); +} + +export default App; +``` + +## 约束与限制 + +#### 兼容性 + +在下述版本验证通过： + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：205.0.0.18; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情请查看[react-native-intersection-observer](https://github.com/zhbhun/react-native-intersection-observer/blob/master/README.md) + +#### **IOScrollView** **组件** + +Props: Inherits [ScrollView Props](https://reactnative.dev/docs/scrollview#props) + +| Name | Description | Type | Required | HarmonyOS Support | +| ---------- | ------------- | ------------------------------------------------------------ | -------- | ----------------- | +| rootMargin | `root margin` | { top: number; left: number; right: number; bottom: number } | false | yes | + +Methods: Inherits [ScrollView Methods](https://reactnative.dev/docs/scrollview#methods) + +#### **IOFlatList** **组件** + +Props: Inherits [FlatList Props](https://reactnative.dev/docs/flatlist#props) + +| Name | Description | Type | Required | HarmonyOS Support | +| ---------- | ------------- | ------------------------------------------------------------ | -------- | ----------------- | +| rootMargin | `root margin` | { top: number; left: number; right: number; bottom: number } | false | yes | + +Methods: Inherits [FlatList Methods](https://reactnative.dev/docs/flatlist#methods) + +#### **InView** **组件** + +| Name | Description | Type | Required | HarmonyOS Support | +| ----------- | ------------------------------------------------------------ | --------------------------- | -------- | ----------------- | +| as | `Render the wrapping element as this element. Defaults to `View`.` | `ComponentType` | false | yes | +| children | Children expects a plain child, to have the `` deal with the wrapping element. | ReactNode | true | yes | +| triggerOnce | Only trigger this method once. | boolean | false | yes | +| onChange | Call this function whenever the in view state changes. It will receive the `inView` boolean, alongside the current `IntersectionObserverEntry`. | `(inView: boolean) => void` | false | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [MIT License](https://github.com/zhbhun/react-native-intersection-observer/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-iphone-screen-helper.md b/en/react-native-iphone-screen-helper.md new file mode 100644 index 00000000..53588d39 --- /dev/null +++ b/en/react-native-iphone-screen-helper.md @@ -0,0 +1,102 @@ +模板版本：v0.2.2 + +

+

react-native-iphone-screen-helper

+

+ +

+ + Supported platforms + + + License + +

+ + + + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-iphone-screen-helper) + + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-iphone-screen-helper Releases](https://github.com/react-native-oh-library/react-native-iphone-screen-helper/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-iphone-screen-helper@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-iphone-screen-helper@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState, useEffect } from 'react'; +import { getStatusBarHeight } from 'react-native-iphone-screen-helper' +import { View } from 'react-native'; + +const ScreenHelperDemo: React.FC = (): JSX.Element => { + const [currentHeight, setCurrentHeight] = useState(0) + + useEffect(() => { + const barHeight = getStatusBarHeight() + setCurrentHeight(barHeight) + }, []) + + return ( + <> + + + ) +} + +export default ScreenHelperDemo; +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-iphone-screen-helper Releases](https://github.com/react-native-oh-library/react-native-iphone-screen-helper/releases) + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :---------- | ---- | -------- | ---- | ------------ | +| isIphoneX | **returns** - `true` if you're running on an iPhone X or a newer model with a notch or dynamic island. | boolean | No | All | Yes | +| isDynamicIsland | **returns** - `true` if you're running on an iPhone X or dynamic island. | boolean | No | All | Yes | +| ifIphoneX | This method is for creating stylesheets with the iPhone X and later models, including those with dynamic islands, in mind. | stylesheets | No | All | Yes | +| getStatusBarHeight | **returns** - the height of the status bar | number | No | All | Yes | +| getBottomSpace | **returns** - the height of the bottom to fit the safe area: `34` for iPhone X and newer models with a notch or dynamic island, and `0` for other devices. | number | No | All | Yes | + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/chlee1001/react-native-iphone-screen-helper/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-json-tree.md b/en/react-native-json-tree.md new file mode 100644 index 00000000..bac33fda --- /dev/null +++ b/en/react-native-json-tree.md @@ -0,0 +1,272 @@ +> 模板版本：v0.2.2 + +

+

react-native-json-tree

+

+

+ + Supported platforms + + + License + +

+ + +> [!TIP] [Github 地址](https://github.com/Dean177/react-native-json-tree) + +## 安装与使用 + +#### **npm** + +```bash +npm install react-native-json-tree@^1.3.0 +``` + +#### **yarn** + +```bash +yarn add react-native-json-tree@^1.3.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React from 'react'; +import { View, ScrollView, Text } from 'react-native'; +import JSONTree from 'react-native-json-tree'; + +export default () => { + + const data = { + name: 'John Doe', + age: 30, + address: { + city: 'New York', + country: 'USA', + }, + hobbies: ['reading', 'gaming', 'hiking'] + }; + + const data1 = { + name: "Charlie", + age: 22, + }; + + const data2 = { + name: "Bob", + age: 35, + info: { + height: 180, + weight: 120 + }, + address: { + street: "123 Elm St", + city: "Springfield", + }, + }; + + const theme = { + scheme: 'monokai', + author: 'wimer hazenberg (http://www.monokai.nl)', + base00: '#272822', + base01: '#383830', + base02: '#49483e', + base03: '#75715e', + base04: '#a59f85', + base05: '#f8f8f2', + base06: '#f5f4f1', + base07: '#f9f8f5', + base08: '#f92672', + base09: '#fd971f', + base0A: '#f4bf75', + base0B: '#a6e22e', + base0C: '#a1efe4', + base0D: '#66d9ef', + base0E: '#ae81ff', + base0F: '#cc6633' + }; + + const shouldExpandNode = (key: any) => { + const shouldExpandNodeKey = key.some((item: any) => { + return item === 'address'; + }) + return shouldExpandNodeKey; + }; + + const data3 = { + name: "Fiona", + age: 29, + }; + + const data4 = { + name: "Wx", + task: { + weekday: 'ro to work', + weekend: 'play' + }, + beliked: 'xiao mei', + age: 18, + }; + + const data5 = { + user: { + name: 'Alice', + age: 25, + address: { + street: '123 Main St', + city: 'Somewhere', + country: 'Wonderland' + } + } + }; + + const data6 = { + users: Array.from({ length: 100 }, (_, i) => ({ id: i, name: `User ${i}` })), + }; + + const data7 = { + date: new Date(), + number: 123456.789, + name: 'moon' + }; + + // 格式化日期 + const formatDate = (date: any) => { + if (!(date instanceof Date)) return ''; + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); + const day = String(date.getDate()).padStart(2, '0'); + return `${year}-${month}-${day}`; + }; + + // 根据数据类型格式化, 展示经过处理的数据 + const postprocessValue = (value: any) => { + if (value instanceof Date) { + return formatDate(value); + } + if (typeof value === 'number') { + return value.toFixed(2); + } + return value; + }; + + const data8 = { + name: "John Doe", + age: 30, + job: "Developer", + salary: 100000 + }; + + const isCustomNode = (value: any) => { + // 如果节点值是数字，则使用自定义渲染 + return typeof value === 'number'; + }; + + return ( + + + 要展示的 JSON 数据对象 + + + + 定制树状视图的主题样式 + + + + 控制节点是否展开的函数 + + + + 是否隐藏树的根节点 + + + + + 是否反转主题颜色 + + + + + 自定义节点的显示文本 + { return {itemType}&&{itemString} }} /> + + + 自定义节点标签的渲染函数 + {raw}} /> + + + 自定义节点值的渲染函数 + {raw}} /> + + + 对 JSON 对象的键进行排序 + { return a.localeCompare(b); }} /> + + + 用于在 JSON 树中标识和定制特定路径的数据节点 + + + + 用于控制在 JSON 树中显示的集合的元素最大数量 + + + + 用于在值渲染之前对其进行自定义处理 + + + + 指定哪些节点应使用自定义渲染的属性 + + + + ); +}; + +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.29; SDK：HarmonyOS NEXT Developer Beta6; IDE：DevEco Studio 5.0.3.706; ROM：NEXT.0.0.36; + +## 属性 + +详细请查看 [react-native-json-tree 的文档介绍](https://github.com/Dean177/react-native-json-tree) + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | ------------ | -------- | -------- | ----------------- | +| `data` | `JSON data object to be displayed`. | `Object` | Yes | All | Yes | +| `theme` | `Theme style of the tree view.` | `Object` | No | All | Yes | +| `shouldExpandNode` | `Function that controls whether a node is expanded`. | `() => bool` | No | All | Yes | +| `hideRoot` | `Whether to hide the root node of the tree`. | `bool` | No | All | Yes | +| `invertTheme` | `Indicates whether to reverse the theme color.` | `bool` | No | All | Yes | +| `getItemString` | `Customize the display of arrays, objects, and iterable nodes.` | `()=>void` | No | All | Yes | +| `labelRenderer` | `Rendering function for custom node labels`. | `()=>void` | No | All | Yes | +| `valueRenderer` | `Rendering function for custom node values`. | `()=>void` | No | All | Yes | +| `sortObjectKeys` | `Sort the keys of JSON objects`. | `()=>void` | No | All | Yes | +| `keyPath` | `A data node used to identify and customize a specific path in a JSON tree`. | `['']` | No | All | Yes | +| `collectionLimit` | `Use to control the maximum number of elements of a collection displayed in a JSON tree`. | `number` | No | All | Yes | +| `postprocessValue` | `For customizing values before they are rendered`. | `()=>void` | No | All | Yes | +| `isCustomNode` | `Specify which nodes should use custom rendered properties.` | `()=>bool` | No | All | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/Dean177/react-native-json-tree/blob/master/LICENSE.md) ，请自由地享受和参与开源。 diff --git a/en/react-native-keep-awake.md b/en/react-native-keep-awake.md new file mode 100644 index 00000000..8dbdd99d --- /dev/null +++ b/en/react-native-keep-awake.md @@ -0,0 +1,241 @@ + +> 模板版本：v0.2.0 + +

+

react-native-keep-awake

+

+

+ + Supported platforms + + + License + + +

+ + + + + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-keep-awake) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +>[!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-keep-awake@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-keep-awake@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState, useEffect } from 'react'; +import { + Text, + Button, +} from 'react-native'; + +import KeepAwake , { activateKeepAwake,deactivateKeepAwake,useKeepAwake} from 'react-native-keep-awake' + +export function KeepAwakeExample() { + useKeepAwake(); + + const handleClick = (buttonId: number) => { + switch (buttonId) { + case 1: + deactivateKeepAwake(); + break; + case 2: + activateKeepAwake(); + break; + case 3: + deactivateKeepAwake(); + break; + case 4: + KeepAwake.activate(); + break; + case 5: + KeepAwake.deactivate(); + break; + default: + break; + } + }; + + return ( + <> + Button 1:hook默认方法开启(常亮),----useKeepAwake(),点击按键1关闭常亮 + + + Button 2:functions方法开启----activateKeepAwake() + + + Button 3:function方法关闭----deactivateKeepAwake() + + + Button 4:老接口方法----KeepAwake.activate() + + + Button 5:老接口方法----KeepAwake.deactivate() + + + ); + +} + +``` + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 在工程根目录的 `oh-package.json5` 添加 overrides字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-keep-awake": "file:../../node_modules/@react-native-oh-tpl/react-native-keep-awake/harmony/keep_awake.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-keep-awake": "file:../../node_modules/@react-native-oh-tpl/react-native-keep-awake/harmony/keep_awake" + } +``` + +打开终端，执行： + +```bash +cd entry +ohpm install --no-link +``` + +### 3.在 ArkTs 侧引入 RNKeepAwakePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { RNKeepAwakePackage } from "@react-native-oh-tpl/react-native-keep-awake/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNKeepAwakePackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-keep-awake Releases](https://github.com/react-native-oh-library/react-native-keep-awake/releases) + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18、HarmonyOS NEXT Developer Preview0 B.0.60、HarmonyOS NEXT Developer Preview2 B.0.73; IDE：DevEco Studio 5.0.3.200; ROM：2.0.0.18; + +## 使用方法 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] 功能函数形式使用下，新老接口均可使用。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Required | Platform | HarmonyOS Support | +| ---------------------- |-------------------------| -------- | -------- | ----------------- | +| `` | 组件形式使用，开启当前屏幕常亮模式 | No | All | yes | +| KeepAwake.activate() | 功能函数形式使用，开启当前屏幕常亮模式(老接口) | No | All | yes | +| KeepAwake.deactivate() | 功能函数形式使用，开启当前屏幕常亮模式(老接口) | No | All | yes | +| useKeepAwake() | hooks形式使用 | No | All | yes | +| activateKeepAwake() | 功能函数形式使用，开启当前屏幕常亮模式(新接口) | No | All | yes | +| deactivateKeepAwake() | 功能函数形式使用，关闭当前屏幕常亮模式(新接口) | No | All | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/corbt/react-native-keep-awake/blob/master/LICENCE) ，请自由地享受和参与开源。 + + + \ No newline at end of file diff --git a/en/react-native-keyboard-accessory.md b/en/react-native-keyboard-accessory.md new file mode 100644 index 00000000..9402236d --- /dev/null +++ b/en/react-native-keyboard-accessory.md @@ -0,0 +1,209 @@ +> 模板版本：v0.2.2 + +

+

react-native-keyboard-accessory

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-keyboard-accessory) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-keyboard-accessory Releases](https://github.com/react-native-oh-library/react-native-keyboard-accessory/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径。 + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-keyboard-accessory@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-keyboard-accessory@file:# +``` + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { Component } from "react"; +import { StyleSheet, View, TextInput, Button, ScrollView } from "react-native"; +import { KeyboardAccessoryView } from "react-native-keyboard-accessory"; + +class ViewExample extends Component { + state = { + text: '', + }; + render() { + const { text } = this.state; + return ( + + + + + + {({ isKeyboardVisible }) => ( + + this.setState({ text })} + multiline={true} + /> + {isKeyboardVisible && ( + + + + + + + ); +} + +const styles = StyleSheet.create({ + safeContainer: { + flex: 1, + backgroundColor: '#FFFFFF', + }, + scroll: { + backgroundColor: 'transparent', + }, + + container: { + margin: 8, + marginTop: Platform.select({ harmony:8,ios: 8,android: 32 }), + flex: 1, + }, + + contentContainer: { + padding: 8, + }, + + buttonContainer: { + paddingTop: 8, + margin: 8, + } +}); + +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-material-textfield Releases](https://github.com/react-native-oh-library/react-native-material-textfield/releases) + +在下述版本验证通过： + +RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + +## 属性 + +### 此组件有以下属性: +>[!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +>[!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:-----------------------:| :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | +| **textColor** | Text input color | String | No | iOS/Android | Yes | +| **fontSize** | Text input font size | Number | YES | iOS/Android | Yes | +| **labelFontSize** | Text field label font size | Number | No | iOS/Android | Yes | +| **lineWidth** | Text field underline width | Number | No | iOS/Android | Yes | +| **activeLineWidth** | Text field active underline width | Number | No | iOS/Android | Yes | +| **disabledLineWidth** | Text field disabled underline width | Number | No | iOS/Android | Yes | +| **tintColor** | Text field accent color | String | No | iOS/Android | Yes | +| **baseColor** | Text field base color | String | No | iOS/Android | Yes | +| **label** | Text field label text | String | No | iOS/Android | Yes | +| **title** | Text field helper text | String | No | iOS/Android | Yes | +| **prefix** | Text field prefix text | String | No | iOS/Android | Yes | +| **suffix** | Text field suffix text | String | No | iOS/Android | Yes | +| **error** | Text field error text | String | No | iOS/Android | Yes | +| **errorColor** | Text field color for errored state | String | No | iOS/Android | Yes | +| **lineType** | Text field line type | String | No | iOS/Android | Yes | +| **disabledLineType** | Text field line type in disabled state | String | No | iOS/Android | Yes | +| **animationDuration** | Text field animation duration in ms | Number | No | iOS/Android | Yes | +| **characterRestriction** | Text field soft limit for character counter | Number | No | iOS/Android | Yes | +| **disabled** | Text field availability | Boolean | No | iOS/Android | Yes | +| **editable** | Text field text can be edited | Boolean | No | iOS/Android | Yes | +| **multiline** | Text filed multiline input | Boolean | No | iOS/Android | Yes | +| **contentInset** | TLayout configuration object | Object | No | iOS/Android | Yes | +| **labelOffset** | Label position adjustment | Object | No | iOS/Android | Yes | +| **inputContainerStyle** | Style for input container view | Object | No | iOS/Android | Yes | +| **containerStyle** | Style for container view | Object | No | iOS/Android | Yes | +| **labelTextStyle** | Style for label inner Text component | Object | No | iOS/Android | Yes | +| **titleTextStyle** | Style for title inner Text component | Object | No | iOS/Android | Yes | +| **affixTextStyle** | Style for affix inner Text component | Object | No | iOS/Android | Yes | +| **formatText** | Input mask callback | Function | No | iOS/Android | Yes | +| **renderLeftAccessory** | Render left input accessory view | Function | No | iOS/Android | Yes | +| **renderRightAccessory** | Render right input accessory view | Function | No | iOS/Android | Yes | +| **onChangeText** | Change text callback | Function | No | iOS/Android | Yes | +| **onFocus** | Focus callback | Function | No | iOS/Android | Yes | +| **onBlur** | Blur callback | Function | No | iOS/Android | Yes | + +## **API（TextField）** +>[!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +>[!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:-----------------------:| :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | +| **focus()** | Acquire focus | | No | iOS/Android | Yes | +| **blur()** | Release focus | | No | iOS/Android | Yes | +| **clear()** | Clear text field | | No | iOS/Android | Yes | +| **value()** | Get current value | String | No | iOS/Android | Yes | +| **isFocused()** | Get current focus state | Boolean | No | iOS/Android | Yes | +| **isErrored()** | Get current error state | Boolean | No | iOS/Android | Yes | +| **isRestricted()** | Get current restriction state | Boolean | No | iOS/Android | Yes | +| **isDefaultVisible()** | Get default value visibility | Boolean | No | iOS/Android | Yes | +| **isPlaceholderVisible()** | Get placeholder visibility | Boolean | No | iOS/Android | Yes | +| **setValue()** | Set current value | | No | iOS/Android | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [BSD License](https://github.com/n4kz/react-native-material-textfield/blob/master/license.txt) ，请自由地享受和参与开源。 + \ No newline at end of file diff --git a/en/react-native-material-ui.md b/en/react-native-material-ui.md new file mode 100644 index 00000000..f8659387 --- /dev/null +++ b/en/react-native-material-ui.md @@ -0,0 +1,610 @@ +> 模板版本：v0.2.2 + +

+

react-native-material-ui

+

+

+ + Supported platforms + + + License + +

+ + +> [!tip] [Github 地址](https://github.com/xotahal/react-native-material-ui) + +## 安装与使用 + +请到三方库的 Releases +发布地址查看配套的版本信息：[@react-native-oh-tpl/react-material-ui Releases](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Freact-native-material-ui%2Freleases) +，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +[!TIP] # 处替换为 tgz 包的路径 + + +#### **npm** + +```bash +npm install react-native-material-ui@file:# +``` + +#### **yarn** + +```bash +yarn add react-native-material-ui@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +### 外部字体使用 +> [!ATTENTION] 使用外部字体时，请确保entry/src/main/ets/assets/fonts和entry/src/main/resource/rawfile/assets/assets/fonts下同时拥有要使用的ttf文件，否则图标不能正常显示 +使用外部字体时，不管是用户自己制作的字体文件还是从网站下载的字体文件，都需要有 *.ttf 和 *.json 文件(文件目录不固定，能引用到就可以了) + +```js + +import { ActionButton} from 'react-native-material-ui'; +import { View, StyleSheet,ScrollView,Text } from 'react-native' +import { useState } from 'react'; + +const ActionButtonDemo = () => { + const [actionText,setActionText] = useState('') + return ( + <> + + + + + + + setActionText("onPress actionText")} + actions={[ + { icon: 'email', label: 'Email',name:'email'}, + { icon: 'phone', label: 'Phone',name:'Phone' }, + { icon: 'sms', label: 'Text',name:'Text' }, + { icon: 'chat', label: 'chat',name:'chat' }, + ]} + icon='email' + transition="speedDial" + /> + {actionText} + + + + + + + + + {actionText} + + + + + + + + ) +} + +const styles = StyleSheet.create({ + view: { + width: '100%', + height: 350, + }, + scrollView:{ + marginBottom:70 + } +}); + + +export default ActionButtonDemo +``` +### 在 ArkTs 侧引入和注册字体文件 + +步骤一： 复制字体文件到 `entry/src/main/ets/assets/fonts` 目录下(如使用了外部字体文件，需要将*.ttf文件复制过来) + +步骤二： 打开 `entry/src/main/ets/pages/Index.ets`，添加以下代码 + +``` + import font from '@ohos.font'; + //... + //特别注意：FontAwesome 系列中字体的 familyName 需要通过代码逻辑自行理解 + const fonts: font.FontOptions[] = [ + { + familyName: 'Material Icons', + familySrc: '/assets/fonts/MaterialIcons.ttf' + }, + { + familyName: 'Pacifico-Regular', + familySrc: '/assets/fonts/Pacifico-Regular.ttf' + }, + { + familyName: 'StintUltraCondensed-Regular', + familySrc: '/assets/fonts/StintUltraCondensed-Regular.ttf' + }, + { + familyName: 'Entypo', + familySrc: '/assets/fonts/Entypo.ttf' + }, + { + familyName: 'EvilIcons', + familySrc: '/assets/fonts/EvilIcons.ttf' + }, + { + familyName: 'Feather', + familySrc: '/assets/fonts/Feather.ttf' + }, + { + familyName: 'FontAwesome5_Brands', + familySrc: '/assets/fonts/FontAwesome5_Brands.ttf' + }, + { + familyName: 'FontAwesome5_Regular', + familySrc: '/assets/fonts/FontAwesome5_Regular.ttf' + }, + { + familyName: 'FontAwesome5_Solid', + familySrc: '/assets/fonts/FontAwesome5_Solid.ttf' + }, + { + familyName: 'Foundation', + familySrc: '/assets/fonts/Pacifico-Regular.ttf' + }, + { + familyName: 'Ionicons', + familySrc: '/assets/fonts/Ionicons.ttf' + }, + { + familyName: 'Foundation', + familySrc: '/assets/fonts/Pacifico-Regular.ttf' + }, + { + familyName: 'MaterialCommunityIcons', + familySrc: '/assets/fonts/MaterialCommunityIcons.ttf' + }, + { + familyName: 'Octicons', + familySrc: '/assets/fonts/Octicons.ttf' + }, + { + familyName: 'SimpleLineIcons', + familySrc: '/assets/fonts/SimpleLineIcons.ttf' + }, + { + familyName: 'Octicons', + familySrc: '/assets/fonts/Octicons.ttf' + }, + { + familyName: 'Zocial', + familySrc: '/assets/fonts/Zocial.ttf' + }, + +] + + @Entry + @Component + struct Index { + //... + aboutToAppear() { + //... + + //注册字体文件 + for (const customFont of fonts) { + font.registerFont(customFont) + } + } + //... + } +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-material-ui Releases](https://github.com/react-native-oh-library/react-native-material-ui/releases) + +## 组件 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +### ActionButton + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:-----------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------:|:--------:|:------------------------------------:|:-----------------:| +| actions | Array of names of icons (or elements) that will be shown after the main button is pressed 。 Remember, you should specify key for each element, if you use array of elements | string[] | no | iOS/Android | yes | +| onPress | Called when button is pressed. Text is passed as param | PropTypes.func | no | iOS/Android | yes | +| icon | If specified it'll be shown before text | PropTypes.element
PropTypes.string | no | iOS/Android | yes | +| transition | Leave it empty if you don't want any transition after press. Otherwise, it will be transformed . to another view - depends on transition value. | PropTypes.oneOf(['toolbar', 'speedDial']) | no | iOS/Android | yes | +| style | ou can override any style for this button | **ActionButton style props** | no | iOS/Android | yes | + +**ActionButton style props** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|-------------------|-------------------------|----------------------|----------|-------------|-------------------| +| container | container style | View.propTypes.style | no | iOS/Android | yes | +| icon | icon style | Text.propTypes.style | no | iOS/Android | yes | +| positionContainer | positionContainer style | View.propTypes.style | no | iOS/Android | yes | +| toolbarContainer | Toolbar styles | View.propTypes.style | no | iOS/Android | yes | + +### Avatar + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:----------|:---------------------------------------------------------------------------------:|:----------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| image | If passed in, this component will render image. | PropTypes.shape({ type: PropTypes.oneOf([Image]) }), | no | iOS/Android | yes | +| icon | If passed in, this component will render icon element inside avatar. | PropTypes.string | no | iOS/Android | yes | +| iconColor | If passed in, this component will render an icon with this color. | PropTypes.string | no | iOS/Android | yes | +| iconSize | If passed in, this component will render an icon with this size. | PropTypes.number | no | iOS/Android | yes | +| text | If passed in, this component will render text element inside avatar. | PropTypes.string | no | iOS/Android | yes | +| size | It's just sugar for: style: { width: size, height: size, borderRadius: size / 2 } | PropTypes.number | no | iOS/Android | yes | +| style | Inline style of avatar | container: View.propTypes.style
content: Text.propTypes.style | no | iOS/Android | yes | + +### Badge + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:---------|:------------------------------------------------------------------------------------------:|:---------------------------------------------:|:--------:|:-----------:|:-----------------:| +| children | The badge will be added relatively to this node | PropTypes.node | no | iOS/Android | yes | +| text | This is the content rendered within the badge | PropTypes.string | no | iOS/Android | yes | +| icon | When the icon is set, the content will be element | PropTypes.string,
{name:string,color,size} | no | iOS/Android | yes | +| size | Just sugar for style={{ container: { width: size, height: size, borderRadius: size / 2 }}} | PropTypes.number | no | iOS/Android | yes | +| stroke | Stroke on Badge | PropTypes.number | no | iOS/Android | yes | + +### Icon + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:------|:---------------------:|:---------:|:--------:|:-----------:|:-----------------:| +| name | Icon name | string | yes | iOS/Android | yes | +| style | The style of the icon | ViewStyle | no | iOS/Android | yes | +| size | The size of the icon | number | no | iOS/Android | yes | +| color | The color of the icon | string | no | iOS/Android | yes | + +### IconToggle + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:-----------|:--------------------------------------------------------:|:---------------------------:|:--------:|:-----------:|:-----------------:| +| color | The color of the icon | PropTypes.string | no | iOS/Android | yes | +| maxOpacity | Max opacity of ripple effect | PropTypes.number | no | iOS/Android | yes | +| percent | Size of underlayColor | PropTypes.number | no | iOS/Android | yes | +| disabled | If true, the interaction will be forbidden | PropTypes.bool | no | iOS/Android | yes | +| size | Size of icon (default is 24 - see spacing in palette) | PropTypes.number | no | iOS/Android | yes | +| name | Name of icon to show | PropTypes.string.isRequired | yes | iOS/Android | yes | +| children | It'll be used instead of icon (see props name) if exists | PropTypes.element | no | iOS/Android | yes | + +### BottomNavigation + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:---------|:-----------------------------------------------:|:-------------------------------:|:--------:|:-----------:|:-----------------:| +| active | The key of selected/active tab | PropTypes.string | no | iOS/Android | yes | +| children | BottomNavigation.Action nodes | PropTypes.node.isRequired | yes | iOS/Android | yes | +| hidden | Whether or not the BottomNavigation should show | PropTypes.bool | no | iOS/Android | yes | +| style | Inline style of bottom navigation | container: View.propTypes.style | no | iOS/Android | yes | + +### BottomNavigation.Action + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:--------|:--------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| icon | Will be rendered above the label as a content of the action. | PropTypes.string.isRequired | yes | iOS/Android | yes | +| label | Will be rendered under the icon as a content of the action | PropTypes.string | no | iOS/Android | yes | +| active | True if the action is active (for now it'll be highlight by primary color) | PropTypes.bool.isRequired | yes | iOS/Android | yes | +| onPress | Callback for on press event | PropTypes.func | no | iOS/Android | yes | +| style | Inline style of bottom navigation | container: View.propTypes.style
active: Text.propTypes.style
disabled: Text.propTypes.style | no | iOS/Android | yes | + +### Button + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:----------|:------------------------------------------------------:|:-------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| disabled | If true button will be disabled | PropTypes.bool | no | iOS/Android | yes | +| raised | If true button will be raised | PropTypes.bool | no | iOS/Android | yes | +| primary | If the button should have primary color | PropTypes.bool | no | iOS/Android | yes | +| accent | If the button should have accent color | PropTypes.number | no | iOS/Android | yes | +| onPress | Called when button is pressed. Text is passed as param | PropTypes.func | no | iOS/Android | yes | +| text | Text will be shown on button | PropTypes.string.isRequired | yes | iOS/Android | yes | +| upperCase | Button text will be in uppercase letters | PropTypes.bool | no | iOS/Android | yes | +| icon | If specified it'll be shown before text | PropTypes.string | no | iOS/Android | yes | +| style | You can override any style for this button | container: View.propTypes.style
text: Text.propTypes.style | no | iOS/Android | yes | + +### Card + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:--------|:----------------------------------------:|:----------------:|:--------:|:-----------:|:-----------------:| +| onPress | Called when card is pressed | PropTypes.func | no | iOS/Android | yes | +| style | You can override any style for this card | PropTypes.object | no | iOS/Android | yes | + +### Checkbox + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:--------------|:--------------------------------------------:|:--------------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| label | Text will be shown after Icon | PropTypes.string | yes | iOS/Android | yes | +| value | Value will be returned when onCheck is fired | PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired | yes | iOS/Android | yes | +| checked | True if it's check | PropTypes.bool | no | iOS/Android | yes | +| disabled | Is checkbox active | PropTypes.bool, | no | iOS/Android | yes | +| uncheckedIcon | Will be shown when checked is false | PropTypes.string | no | iOS/Android | yes | +| checkedIcon | Will be shown when checked is true | PropTypes.string | no | iOS/Android | yes | +| onCheck | Event that is called when state is changed | PropTypes.func, | yes | iOS/Android | yes | + +### Dialog:DialogDefaultActions + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:--------------|:-----------------------------------------:|:-------------------------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| actions | Button for displaying cards | PropTypes.arrayOf(PropTypes.string).isRequired | yes | iOS/Android | yes | +| options | this will disable the button | PropTypes.shape({ actionName: { disabled: PropTypes.bool } }) | no | iOS/Android | yes | +| onActionPress | Event triggered by pressing a card button | PropTypes.func.isRequired | yes | iOS/Android | yes | +| style | You can override any style for this Card | PropTypes.shape({ defaultActionsContainer: ViewPropTypes.style, }), | no | iOS/Android | yes | + +### Divider + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:------|:-------------------------------------------:|:---------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| inset | Divider Move Back | PropTypes.bool | no | iOS/Android | yes | +| style | You can override any style for this Divider | PropTypes.shape({container: View.propTypes.style }) | no | iOS/Android | yes | + +### Drawer + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:---------|:------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| children | Subnodes in the drawer | PropTypes.node.isRequired | yes | iOS/Android | yes | +| style | You can override any style for this Drawer | style: PropTypes.shape({ container: ScrollView.propTypes.style, contentContainer: View.propTypes.style}), | no | iOS/Android | yes | + +#### Drawer:header + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:----------------|:-------------------------------------------------:|:-------------------------------------------------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| image | image for Drawer.header | PropTypes.shape({ type: PropTypes.oneOf([Image]) }) | no | iOS/Android | yes | +| backgroundColor | Background image of the drawer header. | PropTypes.string | no | iOS/Android | yes | +| children | Subnodes in the drawer.header | PropTypes.node | no | iOS/Android | yes | +| style | You can override any style for this drawer.header | style: PropTypes.shape({contentContainer: View.propTypes.style,container: View.propTypes.style, }), | no | iOS/Android | yes | + +#### Drawer:HeaderAccount + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:---------|:-------------------------------------------------:|:------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| avatar | avatar for Drawer.HeaderAccount | PropTypes.element | no | iOS/Android | yes | +| accounts | accounts for Drawer.HeaderAccount | PropTypes.string | no | iOS/Android | yes | +| footer | footer in the Drawer.HeaderAccount | ListItem.propTypes | no | iOS/Android | yes | +| style | You can override any style for this drawer.header | PropTypes.shape({**Drawer:HeaderAccout style**}) | no | iOS/Android | yes | + +##### Drawer:HeaderAccout style + +| name | Type | Required | Platform | HarmonyOS Support | +|-------------------------|----------------------|----------|-------------|-------------------| +| container | View.propTypes.style | no | iOS/Android | yes | +| accountContainer | View.propTypes.style | no | iOS/Android | yes | +| topContainer | View.propTypes.style | no | iOS/Android | yes | +| avatarsContainer | View.propTypes.style | no | iOS/Android | yes | +| activeAvatarContainer | View.propTypes.style | no | iOS/Android | yes | +| inactiveAvatarContainer | View.propTypes.style | no | iOS/Android | yes | + +#### Drawer:Section + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:--------|:--------------------------------------------------:|:--------------------------------------------:|:--------:|:-----------:|:-----------------:| +| title | title of drawers:sections | PropTypes.string | yes | iOS/Android | yes | +| items | tems of drawers:isections | **Drawer:Section items** | yes | iOS/Android | yes | +| divider | dividerof drawers:sections | PropTypes.bool | no | iOS/Android | yes | +| style | You can override any style for this Drawer:Section | PropTypes.shape({**Drawer:Section style**}) | no | iOS/Android | yes | + +##### Drawer:Section items + +| name | Type | Required | Platform | HarmonyOS Support | +|-------------|-----------------------------------------------------------------------|----------|-------------|-------------------| +| icon | PropTypes.string | no | iOS/Android | yes | +| value | PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired | yes | iOS/Android | yes | +| label | PropTypes.string | no | iOS/Android | yes | +| onPress | PropTypes.func | no | iOS/Android | yes | +| onLongPress | PropTypes.func | no | iOS/Android | yes | +| active | PropTypes.bool | no | iOS/Android | yes | +| disabled | PropTypes.bool | no | iOS/Android | yes | + +##### Drawer:Section style + +| name | Type | Required | Platform | HarmonyOS Support | +|-----------|----------------------|----------|-------------|-------------------| +| container | View.propTypes.style | no | iOS/Android | yes | +| item | View.propTypes.style | no | iOS/Android | yes | +| subheader | View.propTypes.style | no | iOS/Android | yes | +| icon | View.propTypes.style | no | iOS/Android | yes | +| value | View.propTypes.style | no | iOS/Android | yes | +| label | View.propTypes.style | no | iOS/Android | yes | +| disabled | View.propTypes.style | no | iOS/Android | yes | + +### ListItem + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:--------------------|:------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| dense | generally | PropTypes.bool | no | iOS/Android | yes | +| divider | divider | PropTypes.bool | no | iOS/Android | yes | +| onPress | Called when ListItemis pressed | PropTypes.func | no | iOS/Android | yes | +| numberOfLines | line number | PropTypes.oneOf([1, 2, 3, 'dynamic']) | no | iOS/Android | yes | +| style | You can override any style for this Listltem | ListItem style | no | iOS/Android | yes | +| leftElement | left side | PropTypes.oneOfType([ PropTypes.element,PropTypes.string ] | no | iOS/Android | yes | +| onLeftElementPress | Event triggered when the left button is pressed | PropTypes.func | no | iOS/Android | yes | +| centerElement | center side | PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.shape({primaryText: PropTypes.string.isRequired,secondaryText: PropTypes.string,tertiaryText: PropTypes.string }) ]) | yes | iOS/Android | yes | +| rightElement | right side | PropTypes.element, PropTypes.string, PropTypes.shape({ menu: PropTypes.shape({ labels: PropTypes.array.isRequired}) }) | no | iOS/Android | yes | +| onRightElementPress | Event triggered when the right button is pressed | PropTypes.func | no | iOS/Android | yes | +| children | child node | PropTypes.node | no | iOS/Android | yes | + +##### ListItem style + +| name | Type | Required | Platform | HarmonyOS Support | +|------------------------|----------------------|----------|-------------|-------------------| +| container | View.propTypes.style | no | iOS/Android | yes | +| contentViewContainer | View.propTypes.style | no | iOS/Android | yes | +| leftElementContainer | View.propTypes.style | no | iOS/Android | yes | +| centerElementContainer | View.propTypes.style | no | iOS/Android | yes | +| textViewContainer | View.propTypes.style | no | iOS/Android | yes | +| primaryText | Text.propTypes.style | no | iOS/Android | yes | +| firstLine | View.propTypes.style | no | iOS/Android | yes | +| primaryTextContainer | Text.propTypes.style | no | iOS/Android | yes | +| secondaryText | Text.propTypes.style | no | iOS/Android | yes | +| tertiaryText | Text.propTypes.style | no | iOS/Android | yes | +| rightElementContainer | View.propTypes.style | no | iOS/Android | yes | +| leftElement | View.propTypes.style | no | iOS/Android | yes | +| rightElement | View.propTypes.style | no | iOS/Android | yes | + +### Subheader + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:------|:---------------------------------------------:|:-----------------------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| text | Displayed text | PropTypes.string.isRequired | yes | iOS/Android | yes | +| inset | Subheader Move Back | PropTypes.bool | no | iOS/Android | yes | +| lines | Subheader lines number | PropTypes.number | no | iOS/Android | yes | +| style | You can override any style for this Subheader | PropTypes.shape({container: View.propTypes.style ,text:Text.propTypes.style}) | no | iOS/Android | yes | + +### Snackbar + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:-----------------|:----------------------------------------------------------:|:-----------------------------------------------------------------:|:--------:|:-----------:|:-----------------:| +| message | The text message to display. | PropTypes.string.isRequired | yes | iOS/Android | yes | +| visible | Whether or not the snackbar is visible. | PropTypes.bool | no | iOS/Android | yes | +| timeout | The amount of time in milliseconds to show the snackbar | PropTypes.number | no | iOS/Android | yes | +| onRequestClose | Callback for when the timeout finishes. | PropTypes.func.isRequired | yes | iOS/Android | yes | +| bottomNavigation | Whether or not there is a bottom navigation on the screen. | PropTypes.bool | no | iOS/Android | yes | +| onActionPress | The function to execute when the action is clicked. | PropTypes.func | no | iOS/Android | yes | +| actionText | The function to execute when the action is clicked. | PropTypes.func | no | iOS/Android | yes | +| style | Inline style of snackbar | container: ViewPropTypes.style, message: ViewPropTypes.style, | no | iOS/Android | yes | +| button | button | ButtonProps | no | iOS/Android | yes | + +### Toolbar + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|:--------------------|:--------------------------------------------------------------------------------------------:|:--------------------:|:--------:|:----------------:|:-----------------:| +| isSearchActive | Indicates if search is active or not | PropTypes.bool | yes | iOS/Android | yes | +| searchable | When you want to activate search feature you have to pass this object with config of search. | **searchable props** | yes | iOS/Android | yes | +| size | This size is used for each icon on the toolbar | PropTypes.number | no | iOS/Android | yes | +| style | You can override any style for the component via this prop | **Toolbar style** | no | iOS/Android | yes | +| hidden | Wether or not the Toolbar should show | PropTypes.bool | no | iOS/Android | yes | +| onPress | Called when centerElement was pressed. | PropTypes.func | no | iOS/Android | yes | +| leftElement | Will be shown on the left side. | PropTypes.element | no | iOS/Android | yes | +| onLeftElementPress | Called when leftElement was pressed. | PropTypes.func | no | iOS/Android | yes | +| centerElement | Will be shown between leftElement and rightElement. Usually use for title. | PropTypes.element | no | iOS/Android | yes | +| rightElement | Will be shown on the right side | rightElement props | no | iOS/Android | yes | +| onRightElementPress | Called when rightElement was pressed | PropTypes.func | no | iOS/Android | yes | + +##### searchable props + +| name | Description | Type | Required | Platform | HarmonyOS Support | +|------------------------|--------------------------------------------------------------------|------------------|----------|-------------|-------------------| +| onChangeText | Called when search text was changed. | PropTypes.func | no | iOS/Android | yes | +| onSearchClosed | Called when search was closed. | PropTypes.func | no | iOS/Android | yes | +| onSearchCloseRequested | Called when action to close search was requested. | PropTypes.func | no | iOS/Android | yes | +| onSearchPressed | Called when search was opened | PropTypes.func | no | iOS/Android | yes | +| onSubmitEditing | Called when user press submit button on hw keyboard | PropTypes.func | no | iOS/Android | yes | +| placeholder | Will shown as placeholder for search input. | PropTypes.string | no | iOS/Android | yes | +| autoFocus | Indicates when input should be focused after the search is opened. | PropTypes.bool | no | iOS/Android | yes | +| autoCapitalize | Enable auto-capitalize for search input | PropTypes.string | no | iOS/Android | yes | +| autoCorrect | Enable auto-correct for search input | PropTypes.bool | no | iOS/Android | yes | +| icon | Override default search icon | PropTypes.string | no | iOS/Android | yes | + +##### rightElement props + +| name | Description | Required | Platform | HarmonyOS Support | +|--------------------------------------|----------------------------------------------------------------|----------|-------------|-------------------| +| PropTypes.element | One action (name of icon). Alias for. | no | iOS/Android | yes | +| PropTypes.string | One action (name of icon). Alias for ['icon1']. | no | iOS/Android | yes | +| PropTypes.arrayOf(PropTypes.string), | For many actions: ['icon1', 'icon2', ...] | no | iOS/Android | yes | +| PropTypes.shape | For actions and menu. The menu will be shown as last one icon. | no | iOS/Android | yes | + +##### Toolbar style + +| name | Type | Required | Platform | HarmonyOS Support | +|------------------------|-------------------------------|----------|-------------|-------------------| +| container | Animated.View.propTypes.style | no | iOS/Android | yes | +| leftElementContainer | View.propTypes.style | no | iOS/Android | yes | +| leftElement | Text.propTypes.style, | no | iOS/Android | yes | +| centerElementContainer | View.propTypes.style | no | iOS/Android | yes | +| titleText | Text.propTypes.style, | no | iOS/Android | yes | +| rightElementContainer | View.propTypes.style | no | iOS/Android | yes | +| rightElement | Text.propTypes.style | no | iOS/Android | yes | + +## 主题 + +**如果您想使用默认主题，可以跳过此步骤** + +如果您想更改应用程序的主色，只需将自己的设置传递给 ThemeContext.Provider 对象即可。这些设置将与默认主题合并。 + +```jsx +import React, { Component } from 'react'; +import { Navigator, NativeModules } from 'react-native'; + +import { COLOR, ThemeContext, getTheme } from 'react-native-material-ui'; + +// you can set your style right here, it'll be propagated to application +const uiTheme = { + palette: { + primaryColor: COLOR.green500, + }, + toolbar: { + container: { + height: 50, + }, + }, +}; + +class Main extends Component { + render() { + return ( + + + + ); + } +} + +``` + +## 遗留问题 + +## 其他 + +- [ ] RadioButton组件功能在Android和iOS不生效， HarmonyOS与Android,iOS表现一致。[原库 issue](https://github.com/xotahal/react-native-material-ui/issues/25) + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/xotahal/react-native-material-ui/blob/master/LICENSE) +，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-md5.md b/en/react-native-md5.md new file mode 100644 index 00000000..8422ce27 --- /dev/null +++ b/en/react-native-md5.md @@ -0,0 +1,128 @@ + +> 模板版本：v0.2.0 + +

+

react-native-md5

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/kmend/react-native-md5) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-md5@1.0.0 --save +``` + +#### **yarn** + +```bash +yarn add react-native-md5@1.0.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import {ScrollView, StyleSheet,View,Text,TextInput,TouchableHighlight} from 'react-native'; +import React,{ useState } from 'react'; +import md5 from "react-native-md5"; + +const styles = StyleSheet.create({ + container: { flex: 1, backgroundColor: '#F5FCFF' }, + content: { paddingTop: 40, alignItems: 'center' }, + fieldContainer: { flexDirection: 'row', alignItems: 'center', marginBottom: 10 }, + button: { borderRadius: 3, paddingVertical: 5, paddingHorizontal: 10, backgroundColor: 'green', marginBottom: 10 }, + buttonText: { color: '#fff', textAlign: 'center' }, +}); +export function md5TestExample() { + let data = ''; + const [hMd5Text, setHMd5Text] = useState(""); + const [bMd5Text, setBMd5Text] = useState(""); + const [sMd5Text, setSMd5Text] = useState(""); + const [hmatch, setHmatch] = useState(""); + const [bmatch, setBmatch] = useState(""); + const [smatch, setSmatch] = useState(""); + + return( + + {} + + { data = value; setHMd5Text(md5.hex_md5(value)); setBMd5Text(md5.b64_md5(value)); setSMd5Text(md5.str_md5(value)); }}> + + + + ......................... + + + { + setHmatch(md5.hex_hmac_md5(data,value)); setBmatch(md5.b64_hmac_md5(data,value)); setSmatch(md5.str_hmac_md5(data,value)); + } + } + > + + + 16位:{hMd5Text} + base-64:{bMd5Text} + 字符串:{sMd5Text} + + HMAC-MD5 16位:{hmatch} + HMAC-MD5 base-64:{bmatch} + HMAC-MD5 字符串:{smatch} + + ); +} +``` + + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + +## API + +> [!tip] "Platform"列表示该接口在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| hex_md5 | 返回格式为16进制字符串的md5值 | function | no | All | yes | +| b64_md5 | 返回格式为base64的md5值 | function | no | All | yes | +| str_md5 | 返回格式为字符串的md5值 | function | no | All | yes | +| hex_hmac_md5 | 返回格式为16进制字符串的HMAC-md5值 | function | no | All | yes | +| b64_hmac_md5 | 返回格式为base64的HMAC-md5值 | function | no | All | yes | +| str_hmac_md5 | 返回格式为字符串的HMAC-md5值 | function | no | All | yes | + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/kmend/react-native-md5/blob/master/README.md) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-mlkit-ocr.md b/en/react-native-mlkit-ocr.md new file mode 100644 index 00000000..55d6e930 --- /dev/null +++ b/en/react-native-mlkit-ocr.md @@ -0,0 +1,330 @@ +> 模板版本：v0.2.2 + +

+

react-native-mlkit-ocr

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-mlkit-ocr) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-mlkit-ocr Releases](https://github.com/react-native-oh-library/react-native-mlkit-ocr/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-mlkit-ocr@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-mlkit-ocr@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import * as React from 'react'; +import { + StyleSheet, + View, + Button, + SafeAreaView, + ScrollView, + Text, + Dimensions, + ActivityIndicator, +} from 'react-native'; +import MlkitOcr, { MlkitOcrResult } from 'react-native-mlkit-ocr'; +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + }, + scroll: { + flex: 1, + width: '100%', + borderColor: '#ccc', + borderWidth: 2, + }, +}); +export const OcrTest = () => { + const [loading, setLoading] = React.useState(false); + const [result, setResult] = React.useState(); + + if (loading) { + return ( + + + + ); + } + return ( + + {Array.isArray(result) && result?.length && ( + + {result?.map((block) => { + return block.lines.map((line) => { + return ( + + {line.text} + + ); + }); + })} + + )} + + + + + + + + round(5.123, 0) + + + + bin(true) + + + + between(-1, 0, 100) + + + + toRad(180) + + + + avg([1,2,3,4,5,6,7,8,9,10]) + + + + cubicBezier(1, 0, 0.1, 0.1, 1) + + + + toDeg(Math.PI) + + + + clamp(-1, 0, 100) + + + + mix(0, 10, 20) + + + + addCurvePath + + + + closePath + + + + serializePath + + + + parsePath + + + + interpolatePath + + + + canvas2Cartesian + + + + cartesian2Canvas + + + + cartesian2Polar + + + + polar2Cartesian + + + + polar2Canvas + + + + canvas2Polar + + + + + + ); + } + + const styles = StyleSheet.create({ + container: { + width: '100%', + flexDirection: 'column', + alignItems: 'center', + backgroundColor: '#F1F3F5', + }, + baseText: { + fontWeight: 'bold', + textAlign: 'center', + fontSize: 16 + }, + + titleArea: { + alignItems: 'center', + flexDirection: 'row', + }, + + title: { + width: '90%', + color: '#000000', + textAlign: 'left', + fontSize: 30, + }, + + scrollView: { + width: '90%', + marginHorizontal: 20, + }, + + inputArea: { + width: '90%', + height: 30, + borderWidth: 2, + borderColor: '#000000', + marginTop: 8, + justifyContent: 'center', + alignItems: 'center', + }, + + baseArea: { + width: '100%', + height: 60, + borderRadius: 4, + borderColor: '#000000', + marginTop: 8, + backgroundColor: '#FFFFFF', + flexDirection: 'row', + alignItems: 'center', + paddingLeft: 8, + paddingRight: 8 + } + }); +``` + +动画演示示例 + +1.位置移动演示动画，通过snapPoint运行指定的位置地点 + +```js +import { snapPoint } from "react-native-redash/src/Physics"; +import { + useSharedValue, + withSequence, + withTiming, + withRepeat, +} from "@react-native-oh-tpl/react-native-reanimated"; + +export default function RadashDemo() { + const offset = useSharedValue(0); + + const translateAnimatedStyles = useAnimatedStyle(() => { + return { + transform: [ + { + translateX: offset.value * 2, + }, + ], + }; + }); + + const translate = () => { + offset.value = withSequence( + withTiming(-snapPoint(96, 600, [0, 125, 393]), { duration: 1000 }), + withRepeat( + withTiming(snapPoint(96, 600, [0, 125, 393]), { duration: 1000 }), + 60, + true, + ), + withTiming(0, { duration: 50 }), + ); + }; + + return ( + + + + + + + + +} + +setTimeout(showWelcomeModal, 3000); +``` + +--- + +Insert `RootSiblingParent` between your providers and root app in your root render function. + +```jsx +import { RootSiblingParent } from 'react-native-root-siblings'; + +return ( + + // <- use RootSiblingParent to wrap your root component + + + +); +``` + +`RootSiblingParent` works as a mounting base and can be mounted multiple times. Only the last mounted one would be active. + +In react native, a view has a higher hierarchy if it's more close to the root level. + +```jsx + + // <- the highest view + + // <- the lowest view + { /* what if you want to show a fullscreen modal here? + * usually you have to use a Native Modal which is even higher than RootView + * but it's buggy and has a lot of limitations + */} + + { /* View put in here would be transported to RootSiblingParent + * So it can have a same hierarchy as the RootView to cover any other views + */} + + + + + + + +``` + +In react we have `createPortal` but still it's not so convenient as it can not be used outside of a component. + +`react-native-root-siblings` provides the most possible flexibility: + +### Imperative API + +1. Create sibling element + +```jsx +let sibling = new RootSiblings(); +``` + +This will create a View element cover all of your app elements, +and returns a sibling instance. +You can create a sibling anywhere, no matter in a component, hook or even a pure function. + +2. Update sibling element + +```jsx +sibling.update(); +``` + +This will update the sibling instance to a View with blue backgroundColor and cover the screen by `10` offset distance. + +3. Destroy sibling element + +```js +sibling.destroy(); +``` + +This will remove the sibling element. + +### Component API + +```jsx +import { RootSiblingPortal } from 'react-native-root-siblings'; + +class extends Component { + render() { + return ( + + + + ) + } +} + +``` + +### EXAMPLE + +```jsx +import React, { + AppRegistry, + View, + Component, + TouchableHighlight, + StyleSheet, + Text +} from 'react-native'; +import Dimensions from 'Dimensions'; + +// Import library there,it will wrap everything registered by AppRegistry.registerComponent +// And add or remove other elements after the root component +import RootSiblings from 'react-native-root-siblings'; + +var id = 0; +var elements = []; +class SiblingsExample extends Component{ + addSibling = () => { + let sibling = new RootSiblings( + I`m No.{id} + ); + id++; + elements.push(sibling); + }; + + destroySibling = () => { + let lastSibling = elements.pop(); + lastSibling && lastSibling.destroy(); + }; + + updateSibling = () => { + let lastId = elements.length - 1; + lastId >= 0 && elements[lastId].update( + I`m No.{lastId} : {Math.random()} + ); + }; + + render() { + return + + Add element + + + Destroy element + + + Update element + + ; + } +} + +AppRegistry.registerComponent('SiblingsExample', () => SiblingsExample); + +var styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: 'green', + }, + button: { + borderRadius: 4, + padding: 10, + marginLeft: 10, + marginRight: 10, + backgroundColor: '#ccc', + borderColor: '#333', + borderWidth: 1, + }, + buttonText: { + color: '#000' + }, + sibling: { + left: 0, + height: 20, + width: Dimensions.get('window').width / 2, + backgroundColor: 'blue', + opacity: 0.5 + } +}); + +``` + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +RNOH: 0.72.23; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio: 5.0.3.27; ROM: 3.0.0.19; + +## 静态方法 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| RootSiblings(element: ReactElement, options?: Options) | 创建一个新的兄弟元素 | RootSiblings | no | Android/IOS | yes | +| RootSiblings.update(element: ReactNode, callback?: () => void) | 更新兄弟元素内容 | void | no | Android/IOS | yes | +| RootSiblings.destroy(callback?: () => void) | 销毁兄弟元素 | void | no | Android/IOS | yes | +| RootSiblingParent(props: {children: ReactNode; inactive?: boolean;}) | 包裹需要创建和管理的根级组件 | import("react/jsx-runtime").JSX.Element | no | Android/IOS | yes | +| RootSiblingPortal(props: { children: ReactNode;}) | 允许将子组件渲染到应用的根组件之外的任意位置 | null | no | Android/IOS | yes | +| setSiblingWrapper(wrapper: (sibling: ReactNode) => ReactNode) | 设置全局组件的包装器 | void | no | Android/IOS | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/magicismight/react-native-root-siblings/blob/master/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-root-toast.md b/en/react-native-root-toast.md new file mode 100644 index 00000000..cffa9bbb --- /dev/null +++ b/en/react-native-root-toast.md @@ -0,0 +1,157 @@ + +> 模板版本：v0.2.1 + +

+

react-native-root-toast

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/magicismight/react-native-root-toast) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-root-toast@3.5.1 +``` + +#### **yarn** + +```bash +yarn add react-native-root-toast@3.5.1 +``` + + + +下面的代码展示了这个库的基本使用场景： + +#### Calling api + +```js +import React, { useState } from "react"; +import { + ScrollView, + StyleSheet, + View, + Text, + TouchableHighlight, + TextInput, + Switch, + Button, + Alert, +} from "react-native"; +import Toast from "react-native-root-toast"; + +export function ReactNativeRootToastExample() { + let PToast: any = null; + function startPToast() { + PToast = Toast.show("超长待机弹窗实例", { + duration: 99999999, + position: 20, + shadow: true, + animation: true, + hideOnPress: false, + delay: 0, + onHidden: () => { + PToast.destroy(); + PToast = null; + }, + }); + } + + function hidePToast() { + Toast.hide(PToast); + } + return ( + + + + ); + } + + export default App; + +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； + +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json + +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-share": "file:../../node_modules/@react-native-oh-tpl/react-native-share/harmony/react_native_share.har" + } + +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 RNSharePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff ++ import {RNSharePackage} from '@react-native-oh-tpl/react-native-share/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNSharePackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-share Releases](https://github.com/react-native-oh-library/react-native-share/releases) + +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + + **Overlay**:分享面板弹窗组件 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| visible | 是否显示 | boolean | no | iOS,Android | yes | +| children | JSX element | React.ReactNode | no | iOS,Android | yes | + +**Button**：分享按钮 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| onPress | 是否显示 | boolean | no | iOS,Android | yes | +| iconSrc | icon属性 | [ImageSourcePropType](https://reactnative.dev/docs/image#imagesource) | no | iOS,Android | yes | +| buttonStyle | button属性 | [ ViewStyle ](https://reactnative.dev/docs/view#props) | no | iOS,Android | yes | +| textStyle | text属性 | [TextStyle](https://reactnative.dev/docs/text#props) | no | iOS,Android | yes | +| children | JSX element | React.ReactNode | no | iOS,Android | yes | + +**ShareSheet**：分享面板组件 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| visible | 是否显示 | boolean | no | iOS,Android | yes | +| onCancel | 关闭面板的回调函数 | function | no | iOS,Android | yes | +| style | 分享面板中Sheet的CSS属性 | [ ViewStyle ](https://reactnative.dev/docs/view#props) | no | iOS,Android | yes | +| overlayStyle | 分享面板CSS属性 | [ ViewStyle ](https://reactnative.dev/docs/view#props) | no | iOS,Android | yes | +| children | JSX element | React.ReactNode | no | iOS,Android | yes | + +**Sheet**：分享面板组件的子组件，ShareSheet包含Sheet + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| visible | 是否显示 | boolean | no | iOS,Android | yes | +| children | JSX element | React.ReactNode | no | iOS,Android | yes | + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| Social | 支持分享的三方APP名称 | object | yes | iOS,Android | partially | +| open: (options: ShareOptions) => Promise | 系统分享 | fuction | yes | iOS,Android | yes | +| shareSingle: (options: ShareSingleOptions) => Promise | 三方分APP分享 | fuction | yes | iOS,Android | partially | +| isPackageInstalled: (packagename: string) => Promise | 三方APP是否已在本机安装 | fuction | yes | iOS,Android | no | + +**ShareOptions** ：系统分享参数 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| type | 分享路径资源类型Mime Typ | string | no | iOS,Android | yes | +| urls | 分享多个路径 | string[] | no | iOS,Android | yes | +| url | 分享路径 | string[] | no | iOS,Android | yes | +| filename | 分享路径文件名 | string | no | iOS,Android | yes | +| filenames | 分享多个路径的文件名（不带后缀，如123，要与urls对应） | Array | no | iOS,Android | yes | +| message | 分享短信消息文本 | string | no | iOS,Android | yes | +| title | 分享标题 | string | no | iOS,Android | yes | +| subject | 分享内容摘要 | string | no | iOS,Android | yes | +| email | 收件人邮箱地址 | string | no | iOS,Android | no | +| recipient | 接收短信消息的号码 | string | no | iOS,Android | yes | +| excludedActivityTypes | 系统分享面板操作区不应显示的能力列表(harmonyOS中传参例如['0','1']，对应解释为： 0:复制到剪切板,1:保存到媒体库,2:保存到文件管理器 ,3:打印,4:保存到中转站) | ActivityType[] \| string[] | no | iOS,Android | partially | +| failOnCancel | 分享失败的是否抛出异 | boolean | no | iOS,Android | yes | +| showAppsToView | 是否显示可以预览分享文件的APP | boolean | no | Android | no | +| saveToFiles | 是否保存分享的路径文件到本地 | boolean | no | iOS,Android | yes | +| activityItemSources | 系统分享面板中自定义分享数据 | ActivityItemSource[] | no | iOS | no | +| isNewTask | 是否开启Activity的启动模式FLAG_ACTIVITY_NEW_TASK | boolean | no | Android | no | + +**ShareSingleOptions** ：三方APP分享参数 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| social |分享的三方APP名称 | string | yes | iOS,Android | partially | +| appId |三方APP上架市场的appid(social为instagramstories,facebookstories时必传) | string | no | iOS,Android | yes | +| type | 分享路径资源类型Mime Typ | string | no | iOS,Android | yes | +| urls | 分享多个路径 | string[] | no | iOS,Android | yes | +| url | 分享路径 | string[] | no | iOS,Android | yes | +| filename | 分享路径文件名（不带后缀，如 123） | string | no | iOS,Android | yes | +| message | 分享短信消息文本 | string | no | iOS,Android | yes | +| title | 分享标题 | string | no | iOS,Android | yes | +| subject | 分享内容摘要 | string | no | iOS,Android | yes | +| email | 收件人邮箱地址 | string | no | iOS,Android | no | +| recipient | 接收短信消息的号码 | string | no | iOS,Android | yes | +| forceDialog | 是否开启三方分享对话框 | boolean | no | Android | no | +| backgroundImage | 背景图像（social为instagramstories,facebookstories传参） | string | no | iOS,Android | no | +| stickerImage | 贴纸图像（social为instagramstories,facebookstories传参） | string | no | iOS,Android | no | +| backgroundBottomColor | 背景底部颜色（social为instagramstories,facebookstories传参） | string | no | iOS,Android | no | +| attributionURL | 属性路径（social为instagramstories,facebookstories传参） | string | no | iOS,Android | no | +| backgroundVideo | 背景视频（social为instagramstories,facebookstories传参） | string | no | iOS,Android | no | + +**Social**：可支持的三方APP种类 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| FACEBOOK | facebook | string | yes | iOS,Android | no | +| FACEBOOK_STORIES | facebookstories | string | yes | iOS,Android | no | +| PAGESMANAGER | pagesmanager | string | yes | iOS,Android | no | +| TWITTER | twitter | string | yes | iOS,Android | no | +| WHATSAPP | whatsapp | string | yes | iOS,Android | no | +| WHATSAPPBUSINESS | whatsappbusiness | string | yes | iOS,Android | no | +| INSTAGRAM | instagram | string | yes | iOS,Android | no | +| INSTAGRAM_STORIES | instagramstories | string | yes | iOS,Android | no | +| GOOGLEPLUS | googleplus | string | yes | iOS,Android | no | +| EMAIL | email | string | yes | iOS,Android | no | +| PINTEREST | pinterest | string | yes | iOS,Android | no | +| LINKEDIN | linkedin | string | yes | iOS,Android | no | +| SMS | sms | string | yes | iOS,Android | yes | +| TELEGRAM | telegram | string | yes | iOS,Android | no | +| SNAPCHAT | snapchat | string | yes | iOS,Android | no | +| MESSENGER | messenger | string | yes | iOS,Android | no | +| VIBER | viber | string | yes | iOS,Android | no | +| DISCORD | discord | string | yes | iOS,Android | no | + +**ShareAsset** ：分享图片、视频数据枚举 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| BackgroundImage | social为instagramstories,facebookstories时分享的图片 | enum | no | no,Android | no | +| BackgroundVideo | social为instagramstories,facebookstories时分享的视频 | enum | no | no,Android | no | +| StickerImage | social为instagramstories,facebookstories时分享的贴纸图 | enum | no | no,Android | no | +| BackgroundAndStickerImage | social为instagramstories,facebookstories时分享的背景贴纸 | enum | no | iOS,Android | no | + +**ActivityType**：系统分享面板上支持的分享操作 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| ActivityType | default \| addToReadingList \| airDrop \| assignToContact \| copyToPasteBoard \| mail \| message \| openInIBooks \| postToFacebook \| postToFlickr \| postToTencentWeibo \| postToTwitter \| postToVimeo \| postToWeibo \| print \| saveToCameraRoll \| markupAsPDF | string | no | iOS,Android | no | + + +**ShareSingleResult**：调用三方分享接口返回的数据类型 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| message | 返回的消息 | string | yes | iOS,Android | yes | +| success | 是否成功 | boolean | yes | iOS,Android | yes | + +**ShareOpenResult**： 调用系统分享接口返回的数据类型 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| message | 返回的消息 | string | yes | iOS,Android | yes | +| success | 是否成功 | boolean | yes | iOS,Android | yes | + +**IsPackageInstalledResult**：调用是否安装三方应用接口返回的数据类型 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| message | 返回的消息 | string | yes | iOS,Android | yes | +| isInstalled | 三方APP是否已安装 | boolean | yes | iOS,Android | yes | + +**ActivityItem**：系统面板分享类型 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| type |活动面板类型 text \| url | string | yes | iOS | no | +| content | 内容 | boolean | yes | iOS | no | + +**LinkMetadata**：系统分享中自定义分享操作的元数据 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| originalUrl | 元数据请求的原始URL | string | no | iOS | no | +| url | 元数据的URL | boolean | no | iOS | no | +| title | URL代表的标题 | boolean | no | iOS | no | +| icon | URL代表的icon | boolean | no | iOS | no | +| image | URL的代表性图像数据 | boolean | no | iOS | no | +| remoteVideoUrl | URL的代表视频相对应的远程URL | boolean | no | iOS | no | +| video | URL的代表视频数据 | boolean | no | iOS | no | + +**ActivityItemSource**：系统分享中自定义分享数据 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| placeholderItem | 分享数据的占位显示数据 | ActivityItem | yes | iOS | no | +| item | 分享操作项 | ActivityItem | yes | iOS | no | +| subject | 分享内容 | string | no | iOS | no | +| dataTypeIdentifier | 数据类型标识符 | string | no | iOS | no | +| thumbnailImage | 分享数据的缩略图 | string | no | iOS | no | +| linkMetadata | 分享的数据 | LinkMetadata | no | iOS | no | + + +## 遗留问题 + +- [ ] 无法分享三方APP问题：[issue#1](https://github.com/react-native-oh-library/react-native-share/issues/1) + + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-share/react-native-share/blob/main/LICENSE) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-shimmer-placeholder.md b/en/react-native-shimmer-placeholder.md new file mode 100644 index 00000000..dc8520ae --- /dev/null +++ b/en/react-native-shimmer-placeholder.md @@ -0,0 +1,136 @@ +> 模板版本：v0.2.2 + +

+

react-native-shimmer-placeholder

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/tomzaku/react-native-shimmer-placeholder) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-shimmer-placeholder@2.0.9 +``` + +#### **yarn** + +```bash +yarn add react-native-shimmer-placeholder@2.0.9 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { Component } from "react"; +import { View, Image } from "react-native"; +import { createShimmerPlaceholder } from "react-native-shimmer-placeholder"; +import LinearGradient from "react-native-linear-gradient"; + +const ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient); +export class ShimmerPlaceholderTest extends Component { + constructor(props) { + super(props); + this.state = { + visible: false, + }; + } + render() { + return ( + + + { + this.setState({ visible: true }); + }} + /> + + + ); + } +} +``` + +## Link + +> [!TIP] 本库依赖的@react-native-oh-tpl/react-native-linear-gradient 使用的版本为 3.0.0-0.4.5 + +本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-linear-gradient 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-linear-gradient 文档](/zh-cn/react-native-linear-gradient.md)进行引入 + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; + +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Required | Type | Platform | HarmonyOS Support | +| -------------------------- | ------------------------------------------------------------------------------------------------------ | -------- | --------- | -------- | ----------------- | +| **LinearGradient** | Linear Gradient components ('react-native-linear-gradient' or 'expo-linear-gradient') | no | Component | ALL | yes | +| **visible** | Visible child components | no | boolean | ALL | yes | +| **style** | Container Style | no | Style | ALL | yes | +| **shimmerStyle** | Shimmer Style only | no | Style | ALL | yes | +| **contentStyle** | Content Style when visible | no | Style | ALL | yes | +| **location** | Locations of shimmer | no | number[] | ALL | yes | +| **width** | Width of row | no | number | ALL | yes | +| **duration** | Duration of shimmer over a row | no | number | ALL | yes | +| **height** | Height of row | no | number | ALL | yes | +| **shimmerWidthPercent** | Percent of shimmer width | no | number | ALL | yes | +| **isReversed** | Reverse direction of animation | no | boolean | ALL | yes | +| **stopAutoRun** | Stop running shimmer animation at beginning | no | boolean | ALL | yes | +| **isInteraction** | Defines whether or not the shimmer animation creates an interaction handle on the `InteractionManager` | no | boolean | ALL | yes | +| **shimmerColors** | Colors of the shimmer. | no | string[] | ALL | yes | +| **containerProps** | Props passed to the outermost View | no | ViewProps | ALL | yes | +| **shimmerContainerProps** | Props passed to the View which contains the loading animation | no | ViewProps | ALL | yes | +| **childrenContainerProps** | Props passed to the View which contains the children | no | ViewProps | ALL | yes | + +## 静态方法 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Method | Description | Type | **Required** | Platform | HarmonyOS Support | +| --------------- | --------------------------- | -------- | ------------ | -------- | ----------------- | +| **getAnimated** | get Animated of Placeholder | Animated | no | ALL | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/tomzaku/react-native-shimmer-placeholder/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-signature-canvas.md b/en/react-native-signature-canvas.md new file mode 100644 index 00000000..1a1b865a --- /dev/null +++ b/en/react-native-signature-canvas.md @@ -0,0 +1,212 @@ +> 模板版本：v0.2.2 + +

+

react-native-signature-canvas

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/YanYuanFE/react-native-signature-canvas) + +## 安装与使用 + + + +#### **npm** + +```bash +npm install --save react-native-signature-canvas@4.7.2 +``` + +#### **yarn** + +```bash +yarn add react-native-signature-canvas@4.7.2 +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState } from "react"; +import { StyleSheet, Text, View, Image } from "react-native"; +import Signature from "react-native-signature-canvas"; + +export const SignatureScreen = () => { + const [signature, setSign] = useState(null); + + const handleOK = (signature) => { + console.log(signature); + setSign(signature); + }; + + const handleEmpty = () => { + console.log("Empty"); + }; + + const style = `.m-signature-pad--footer + .button { + background-color: red; + color: #FFF; + }`; + return ( + + + {signature ? ( + + ) : null} + + + + ); +}; + +const styles = StyleSheet.create({ + preview: { + width: 335, + height: 114, + backgroundColor: "#F8F8F8", + justifyContent: "center", + alignItems: "center", + marginTop: 15, + }, + previewText: { + color: "#FFF", + fontSize: 14, + height: 40, + lineHeight: 40, + paddingLeft: 10, + paddingRight: 10, + backgroundColor: "#69B2FF", + width: 120, + textAlign: "center", + marginTop: 10, + }, +}); +``` +## Link + +本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-webview的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-webview 文档](/zh-cn/react-native-webview.md)进行引入 + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.27; SDK：HarmonyOS NEXT Developer Beta1 5.0.0.25; IDE：DevEco Studio 5.0.3.400SP7; ROM:3.0.0.25; + +## 属性 + +### SignatureScreen + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + + + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | +| autoClear | should auto clear the signature after clicking the Confirm button |boolean| no | iOS/Android | yes | +| backgroundColor | default is "rgba(255,255,255,0)" (transparent), background color of the canvas |string| no | iOS/Android | yes | +| bgHeight | height of the background image |number| no | iOS/Android | yes | +| bgWidth |width of the background image |number| no | iOS/Android | yes | +| bgSrc | background image source uri (url) |string| no | iOS/Android | yes | +| clearText |clear button text|string| no | iOS/Android | yes | +| confirmText |save button text |string| no | iOS/Android | yes | +| customHtml |html string that lets you modify things like the layout or elements |(injectedJavaScript: string) => string| no | iOS/Android | yes | +| dataURL |default is "", Base64 string, draws saved signature from dataURL. |string| no | iOS/Android | yes | +| descriptionText |description text for signature |string| no | iOS/Android | yes | +| dotSize |radius of a single dot (not stroke width) |number| no | iOS/Android | yes | +| imageType |"image/png" (default), "image/jpeg"、"image/svg+xml", imageType of exported signature|string| no | iOS/Android | yes | +| minWidth |minimum width of a line. Defaults to 0.5 |number| no | iOS/Android | yes | +| maxWidth |maximum width of a line. Defaults to 2.5 |number| no | iOS/Android | yes | +| onOK |callback function after saving non-empty signature|function| no | iOS/Android | yes | +| onEmpty |callback function after trying to save an empty signature|function| no | iOS/Android | yes | +| onClear |callback function after clearing the signature|function| no | iOS/Android | yes | +| onGetData |callback function when getData() is called |function| no | iOS/Android | yes | +| onBegin |callback function when a new stroke is started |function| no | iOS/Android | yes | +| onEnd |callback function when the stroke has ended |function| no | iOS/Android | yes | +| onLoadEnd |callback function when the webview canvas load ended |function| no | iOS/Android | yes | +| onUndo |callback function when undo() is called |function| no | iOS/Android | yes | +| onRedo |callback function when redo() is called |function| no | iOS/Android | yes | +| onDraw |callback function when drawing is enabled |function| no | iOS/Android | yes | +| onErase |callback function when erasing is enabled |function| no | iOS/Android | yes | +| onChangePenColor |callback function after changing the pen color|function| no | iOS/Android | yes | +| onChangePenSize |callback function after changing the pen size |function| no | iOS/Android | yes | +| overlayHeight |height of the overlay image |number| no | iOS/Android | yes | +| overlayWidth |width of the overlay image |number| no | iOS/Android | yes | +| overlaySrc |overlay image source uri (url) must be .png with a transparent background |string| no | iOS/Android | yes | +| penColor |default is "black", color of pen|string| no | iOS/Android | yes | +| rotated |rotate signature pad 90 degrees |boolean| no | iOS/Android | yes | +| style |style of wrapper view|object| no | iOS/Android | yes | +| trimWhitespace |trim image whitespace|boolean| no | iOS/Android | yes | +| webStyle |webview style for overwrite default style, all style: https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/h5/css/signature-pad.css |string| no | iOS/Android | yes | +| androidLayerType |Sets the android webview layerType |none、software、hardware| no | Android | no | +| androidHardwareAccelerationDisabled |androidHardwareAccelerationDisabled for react-native-webview. Default is false |boolean| no | Android | no | +| showsVerticalScrollIndicator |Boolean value that determines whether a vertical scroll indicator is shown in the WebView, The default value is true.|boolean| no | iOS/Android | no | +| nestedScrollEnabled |enable nested scrolling for use inside of a scrollview|boolean| no | no | no | + + + + +## 静态方法 + + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + + + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | ----------- | +| clearSignature |Clear the current signature |function| no | iOS/Android | yes | +| changePenColor |Change pen color |function| no | iOS/Android | yes | +| changePenSize |Change pen size |function| no | iOS/Android | yes | +| draw |Enable drawing signature |function| no | iOS/Android | yes | +| erase |Enable erasing signature |function| no | iOS/Android | yes | +| getData |riggers the onGetData callback with a single data JSON string |function| no | iOS/Android | yes | +| readSignature |Reads the current signature on the canvas and triggers either the onOK or onEmpty callbacks |function| no | iOS/Android | yes | +| undo |Undo last stroke |function| no | iOS/Android | yes | +| redo |Redo last stroke |function| no | iOS/Android | yes | + + + +## 遗留问题 +- [ ] showsVerticalScrollIndicator属性不生效: [issue#137](https://github.com/react-native-oh-library/react-native-webview/issues/137) + +## 其他 + + 1、minDistance属性版本问题: 此属性在4.7.3版本生效，npm包最新版本为4.7.2，如需使用，请从[Github](https://github.com/YanYuanFE/react-native-signature-canvas)下载最新代码使用； + + 2、nestedScrollEnabled属性在 iOS,Android 不生效，harmonyOS与其表现一致；[issue#363](https://github.com/YanYuanFE/react-native-signature-canvas/issues/363) + + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/YanYuanFE/react-native-signature-canvas/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-signature-capture.md b/en/react-native-signature-capture.md new file mode 100644 index 00000000..dac4267d --- /dev/null +++ b/en/react-native-signature-capture.md @@ -0,0 +1,308 @@ + +> 模板版本：v0.2.2 + +

+

react-native-signature-capture

+

+

+ + Supported platforms + + + License + + +

+ + + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-signature-capture) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-library/react-native-signature-capture Releases](https://github.com/react-native-oh-library/react-native-signature-capture/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +>[!TIP] # 处替换为 tgz 包的路径 + + + +#### npm + +```bash +npm install @react-native-oh-tpl/react-native-signature-capture@file:# +``` + +#### yarn + +```bash +yarn add @react-native-oh-tpl/react-native-signature-capture@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +```tsx +var React = require('react'); +var ReactNative = require('react-native'); + +var {Component} = React; + +var { + AppRegistry, + StyleSheet, + Text, + View, TouchableHighlight +} = ReactNative; + +import SignatureCapture from 'react-native-signature-capture'; + +class RNSignatureExample extends Component { + render() { + return ( + + Signature Capture Extended + + + + { this.saveSign() } } > + Save + + + { this.resetSign() } } > + Reset + + + + + + ); + } + + saveSign() { + this.refs["sign"].saveImage(); + } + + resetSign() { + this.refs["sign"].resetImage(); + } + + _onSaveEvent(result) { + //result.encoded - for the base64 encoded png + //result.pathName - for the file path name + console.log(result); + } + _onDragEvent() { + // This callback will be called when the user enters signature + console.log("dragged"); + } +} + +const styles = StyleSheet.create({ + signature: { + flex: 1, + borderColor: '#000033', + borderWidth: 1, + }, + buttonStyle: { + flex: 1, justifyContent: "center", alignItems: "center", height: 50, + backgroundColor: "#eeeeee", + margin: 10 + } +}); + +AppRegistry.registerComponent('RNSignatureExample', () => RNSignatureExample); + + +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入 (推荐) + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-signature-capture": "file:../../node_modules/@react-native-oh-tpl/react-native-signature-capture/harmony/rnoh_signature_capture.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 SignatureCaptureArkView 组件 + +找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： + +```diff + ... ++ import { SignatureCaptureArkView } from '@react-native-oh-tpl/react-native-signature-capture' + +@Builder +export function buildCustomRNComponent(ctx: ComponentBuilderContext) { + ... ++ if (ctx.componentName === SignatureCaptureArkView.NAME) { ++ SignatureCaptureArkView({ ++ ctx: ctx.rnComponentContext, ++ tag: ctx.tag ++ }) ++ } +... +} +... +``` + +> [!TIP] 本库使用了混合方案，需要添加组件名。 + +在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名 + +```diff +const arkTsComponentNames: Array = [ + SampleView.NAME, + GeneratedSampleView.NAME, + PropsDisplayer.NAME, ++ SignatureCaptureArkView.NAME + ]; +``` + +### 4.在 ArkTs 侧引入 SignatureCapturePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { SignatureCapturePackage } from '@react-native-oh-tpl/react-native-signature-capture/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new SignatureCapturePackage(ctx) + ]; +} +``` + +### 5.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/react-native-signature-capture Releases](https://github.com/react-native-oh-library/react-native-signature-capture/releases) + + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|-------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------|----------|-------------|-------------------| +| showBorder | If this props is made to false, it will hide the dashed border. | boolean | no | iOS | yes | +| showNativeButtons | If this props is made to true, it will display the native buttons "Save" and "Reset".. | boolean | no | iOS/Android | yes | +| showTitleLabel | If this props is made to true, it will display the "x_ _ _ _ _ _ _ _ _ _ _" placeholder indicating where to sign. | boolean | no | iOS | yes | +| viewMode | "portrait" or "landscape" change the screen orientation based on boolean value | "portrait" \| "landscape" | no | iOS/Android | yes | +| maxSize | sets the max size of the image maintains aspect ratio, default is 500 | number | no | iOS/Android | yes | +| minStrokeWidth | sets the min stroke line width | number | no | Android | yes | +| maxStrokeWidth | sets the max stroke line width | number | no | Android | yes | +| backgroundColor | Sets the background color of the component. Defaults to white. May be 'transparent'. | color | no | iOS/Android | yes | +| strokeColor | Sets the color of the signature. Defaults to black. | color | no | iOS/Android | yes | +| saveImageFileInExtStorage | Make this props true, if you want to save the image file in external storage. Default is false. Warning: Image file will be visible in gallery or any other image browsing app. | boolean | no | Android | no | +| onSaveEvent: (event: {pathName: string, encoded: string}) => void | Triggered when saveImage() is called, which return Base64 Encoded String and image file path. | function | no | iOS/Android | yes | +| onDragEvent: (event: boolean) => void | Triggered when user marks his signature on the canvas. This will not be called when the user does not perform any action on canvas. | function | no | iOS/Android | yes | + +## 静态方法 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|------------|-----------------------------------------------------------------------------------------------------|----------|----------|-------------|-------------------| +| saveImage | when called it will save the image and returns the base 64 encoded string on onSaveEvent() callback | function | no | iOS/Android | yes | +| resetImage | when called it will clear the image on the canvas | function | no | iOS/Android | yes | + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/RepairShopr/react-native-signature-capture/blob/master/LICENSE) ，请自由地享受和参与开源。 + + + \ No newline at end of file diff --git a/en/react-native-simple-toast.md b/en/react-native-simple-toast.md new file mode 100644 index 00000000..4fe9b3fe --- /dev/null +++ b/en/react-native-simple-toast.md @@ -0,0 +1,164 @@ + +> 模板版本：v0.2.0 + +

+

react-native-simple-toast

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-simple-toast) + + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-simple-toast Releases](https://github.com/react-native-oh-library/react-native-simple-toast/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +>[!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-simple-toast@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-simple-toast@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +```js +import * as React from 'react'; + +import { + StyleSheet, + View, + Button, + Alert, + TextInput, + ScrollView, + Pressable, + Modal, + Text, +} from 'react-native'; +import Toast from 'react-native-simple-toast'; +import { useState } from 'react'; + +export default function App() { + const [modalVisible, setModalVisible] = useState(false); + + return ( + <> + { + Alert.alert('Modal has been closed.'); + setModalVisible(!modalVisible); + }} + > + + + Hello World! + setModalVisible(!modalVisible)} + > + Hide Modal + + + + + + + + + + + ) +}; + +export default App; + +``` +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/codegen.md)。 +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-touch-id": "file:../../node_modules/@react-native-oh-tpl/react-native-touch-id/harmony/touch_id.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + + +### 3.在 ArkTs 侧引入 TouchIdPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { TouchIdPackage } from "@react-native-oh-tpl/react-native-touch-id/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new TouchIdPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-touch-id Releases](https://github.com/react-native-oh-library/react-native-touch-id/releases) + + +### 权限要求 + +（填入相关权限配置） + +Add the following permissions to their respective files: + +In your `module.json5` + +``` + "requestPermissions": [ + { + "name": "ohos.permission.ACCESS_BIOMETRIC" + } + ] +``` + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| isSupported | Whether touchid is supported | function | yes | ios/andriod | yes | +| authenticate | Verify touchid | function | yes | ios/andriod | yes | +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +### Errors + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---- | ----------- | ---- | -------- | -------- | ------------------ | +| Touch ID Error | Permission verification failed | string | no | harmonry | yes | +| Touch ID Error | Incorrect parameters | string | no | harmonry | yes | +| Touch ID Error | Authentication failed | string | no | harmonry | yes | +| Touch ID Error | The operation is canceled | string | no | harmonry | yes | +| Touch ID Error | The operation is time-out | string | no | harmonry | yes | +| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | +| Touch ID Error | The authentication trust level is not supported | string | no | harmonry | yes | +| Touch ID Error | The authentication task is busy | string | no | harmonry | yes | +| Touch ID Error | The authenticator is locked | string | no | harmonry | yes | +| Touch ID Error | General operation error | string | no | harmonry | no | +| Touch ID Error | The authentication type is not supported | string | no | harmonry | yes | +| Touch ID Error | The type of credential has not been enrolled | string | no | harmonry | yes | +| Touch ID Error | The authentication is canceled from widget's navigation button | string | no | harmonry | yes | +| Touch ID Error | Indicates that current authentication failed because of PIN expired | string | no | harmonry | yes | +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/naoufal/react-native-touch-id?tab=readme-ov-file#license) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-track-player.md b/en/react-native-track-player.md new file mode 100644 index 00000000..334cd0dc --- /dev/null +++ b/en/react-native-track-player.md @@ -0,0 +1,438 @@ +> 模板版本：v0.2.2 + +

+

react-native-track-player

+

+

+ + Supported platforms + + + License + +

+ + + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-track-player) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-track-player Releases](https://github.com/react-native-oh-library/react-native-track-player/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-track-player@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-track-player@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useEffect } from "react"; +import { ScrollView, Text, Button, View, StyleSheet } from 'react-native'; +import TrackPlayer from 'react-native-track-player'; + +const TrackPlayerDemo = () => { + useEffect(() => { + // Set up the player + TrackPlayer.setupPlayer(); + }, []); + + const addExample = () => { + TrackPlayer.add([ + { + url: "https://ting8.yymp3.com/new27/chengxiang10/1.mp3", + title: "世界这么大还是遇见你", + artist: "程响", + artwork: "https://rntp.dev/example/Longing.jpeg", + duration: 237 + }, + { + url: "https://ting8.yymp3.com/new18/fhzq4/8.mp3", + title: "最炫民族风", + artist: "凤凰传奇", + artwork: "https://rntp.dev/example/Rhythm%20City%20(Demo).jpeg", + duration: 283 + }, { + url: "https://ting8.yymp3.com/new27/jinzhiwen3/1.mp3", + title: "远走高飞", + artist: "金志文", + artwork: "https://rntp.dev/example/Rhythm%20City%20(Demo).jpeg", + duration: 235 + }]); + } + + // 开始播放歌曲 + const startExample = () => { + // Start playing it + TrackPlayer.play(); + } + // 暂停播放歌曲 + const pauseExample = () => { + TrackPlayer.pause(); + } + return ( + + + TrackPlayerDemo + + 添加Track + + + + + ; +} + +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-translucent-modal Releases](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +> [!tip] react-native提供的Modal组件，在HarmonyOS、iOS平台一样可以实现状态栏沉浸式效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------------- | --------------------------------------------------- | -------- | -------- | -------- | ----------------- | +| `animationType` | Animation type of modal. | string | yes | All | yes | +| `transparent` | Whether the background of the modal is transparent. | boolean | yes | All | yes | +| `visible` | Controls whether the modal is displayed. | boolean | yes | All | yes | +| `onRequestClose?: () => void` | Called when the model request close. | function | yes | ALL | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/23mf/react-native-translucent-modal/blob/master/LICENSE.md) ，请自由地享受和参与开源。 + + \ No newline at end of file diff --git a/en/react-native-tts.md b/en/react-native-tts.md new file mode 100644 index 00000000..2295efcb --- /dev/null +++ b/en/react-native-tts.md @@ -0,0 +1,318 @@ +> 模板版本：v0.2.2 + +

+

react-native-tts

+

+

+ + Supported platforms + + + License + + +

+ + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-tts) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-tts Releases](https://github.com/react-native-oh-library/react-native-tts/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-tts@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-tts@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import {useState, useCallback} from 'react'; +import {Text, View, StyleSheet, SafeAreaView} from 'react-native'; +import Tts from 'react-native-tts'; + +const cnText = `炎炎夏日，阳光如烈火般炙烤大地，空气中弥漫着热浪的气息。树荫下，蝉鸣声如同热浪中跳跃的音符，微风吹过，带来一丝清凉。远处的田野上，金黄的麦浪随风起伏，仿佛在舞动着夏天的节奏。天空湛蓝如洗，白云悠然飘过，似是一幅宁静而美丽的夏日画卷。`; + +export function TTSDemo() { + const [speakText, setSpeakText] = useState(cnText); + + const addEvent = useCallback(() => { + Tts.addEventListener('tts-start', res => { + console.log('tts-start', res); + }); + }, []); + + const removeEvent = useCallback(() => { + Tts.addEventListener('tts-start', res => { + console.log('tts-start', res); + }); + }, []); + + const stopSpeak = useCallback(() => { + Tts.stop(); + }, []); + + const speakFc = useCallback(() => { + Tts.speak(speakText); + }, []); + + const getInitStatus = useCallback(() => { + Tts.getInitStatus().then(() => { + console.log('初始化已完成'); + }); + }, []); + + const pauseFc = useCallback(() => { + Tts.pause(); + }, []); + + const resumeFc = useCallback(() => { + Tts.resume(); + }, []); + + const setSpeakRate = useCallback(() => { + Tts.setDefaultRate(2); + }, []); + + const setSpeakPitch = useCallback(() => { + Tts.setDefaultPitch(2); + }, []); + + const queryVoices = useCallback(() => { + Tts.voices().then(res => { + const resTr = JSON.stringify(res); + setSpeakText(resTr); + }); + }, []); + + return ( + <> + + react-native-tts功能验证 + + + + getInitStatus + + + speak（zh） + + + stop + + + pause + + + resume + + + setDefaultRate + + + setDefaultPitch + + + voices + + + addEventListener + + + removeEventListener + + + + + + ); +} + +const styles = StyleSheet.create({ + constainer: { + flex: 1, + }, + content: { + flex: 1, + display: 'flex', + }, + btnWrap: { + width: 'auto', + backgroundColor: 'gray', + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + paddingLeft: 20, + }, + text: { + padding: 20, + fontSize: 20, + }, + title: { + padding: 10, + fontSize: 30, + textAlign: 'center', + }, + button: { + paddingVertical: 6, + paddingHorizontal: 12, + backgroundColor: 'hsl(193, 95%, 68%)', + borderWidth: 2, + borderColor: 'hsl(193, 95%, 30%)', + }, +}); + +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-tts": "file:../../node_modules/@react-native-oh-tpl/react-native-tts/harmony/rn_tts.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 RNTTSPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... + ++ import { RNTTSPackage } from '@react-native-oh-tpl/react-native-tts/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNTTSPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-tts Releases](https://github.com/react-native-oh-library/react-native-tts/releases) + +## 静态方法 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ----------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- | +| getInitStatus | Returns a promise that resolves when the TTS engine is initialized. | Function | no | All | yes | +| requestInstallEngine | Requests installation of the TTS engine if not already installed. | Function | no | Android | no | +| requestInstallData | Requests installation of the TTS data if not already installed. | Function | no | Android | no | +| setDucking | Sets whether the TTS engine should duck other audio when speaking. | Function | no | All | no | +| setDefaultEngine | Sets the default TTS engine. | Function | no | Android | no | +| setDefaultVoice | Sets the default voice for the TTS engine. | Function | no | All | no | +| setDefaultRate | Sets the default speech rate for the TTS engine. | Function | no | All | yes | +| setDefaultPitch | Sets the default pitch for the TTS engine. | Function | no | All | yes | +| setDefaultLanguage | Sets the default language for the TTS engine. | Function | no | All | no | +| setIgnoreSilentSwitch | Sets whether to ignore the silent button. | Function | no | iOS |no| +| voices | Retrieves a list of available voices from the TTS engine. | Function | no | All | yes | +| engines | Retrieves a list of available TTS engines. | Function | no | Android | no | +| speak | Speaks the given utterance and returns a promise with the utterance ID. | Function | no | All | yes | +| stop | Stops the current TTS utterance. | Function | no | All | yes | +| pause | Pause the current TTS utterance. | Function | no | All | yes | +| resume | Resume the current TTS utterance. | Function | no | All | yes | +| addEventListener | Adding an Event Listener | Function | no | All | yes | +| removeEventListener | Remove Event Listener | Function | no | All | yes | + +## 遗留问题 + +- [ ] 三方引擎相关功能无法实现的问题：[issue#2](https://github.com/react-native-oh-library/react-native-tts/issues/2) +- [ ] 语言类型只支持中文的问题：[issue#3](https://github.com/react-native-oh-library/react-native-tts/issues/3) +- [ ] setDucking无法实现的问题：[issue#4](https://github.com/react-native-oh-library/react-native-tts/issues/4) +- [ ] setIgnoreSilentSwitch无法实现的问题：[issue#5](https://github.com/react-native-oh-library/react-native-tts/issues/5) +- [ ] setDefaultVoice无法实现的问题：[issue#6](https://github.com/react-native-oh-library/react-native-tts/issues/6) +- [ ] 边合成边播放的问题：[issue#7](https://github.com/react-native-oh-library/react-native-tts/issues/7) +- [ ] 参数skipTransform、onWordBoundary无效的问题：[issue#8](https://github.com/react-native-oh-library/react-native-tts/issues/8) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/ak1394/react-native-tts/blob/master/README.md#license)，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-typing-animation.md b/en/react-native-typing-animation.md new file mode 100644 index 00000000..380fba88 --- /dev/null +++ b/en/react-native-typing-animation.md @@ -0,0 +1,242 @@ + +> 模板版本：v0.2.1 + +

+

react-native-typing-animation

+

+

+ + Supported platforms + + + License + + +

+ + + +> [!TIP] [Github 地址](https://github.com/watadarkstar/react-native-typing-animation) + +## 安装与使用 + + + +#### **npm** + +```bash +npm install react-native-typing-animation@0.1.7 +``` + +#### **yarn** + +```bash +yarn add react-native-typing-animation@0.1.7 +``` + + + +下面的代码展示了这个库的基本使用场景： + +>[!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useEffect, useRef, useState } from 'react'; +import { + Animated, + View, + Text, + PanResponder, + Button, + StyleSheet, + TouchableHighlight, + Alert, + TouchableOpacity, + ScrollView, +} from 'react-native'; +import { TestSuite, Tester, TestCase } from '@rnoh/testerino'; +import { TypingAnimation } from 'react-native-typing-animation'; + +const TypingAnimationDemos = () => { + const typingAnimationProps = [ + { + key: 'dotColor', + value: { + dotColor: 'green' + } + }, + { + key: 'dotColor', + value: { + dotColor: 'red' + } + }, + { + key: 'dotRadius', + value: { + dotRadius: 5 + } + }, + { + key: 'dotRadius', + value: { + dotRadius: 10 + } + }, + { + key: 'dotMargin', + value: { + dotMargin: 10 + } + }, + { + key: 'dotMargin', + value: { + dotMargin: 15 + } + }, + { + key: 'dotAmplitude', + value: { + dotAmplitude: 1 + } + }, + { + key: 'dotAmplitude', + value: { + dotAmplitude: 1 + } + }, + { + key: 'dotSpeed', + value: { + dotSpeed: 10 + } + }, + { + key: 'dotSpeed', + value: { + dotSpeed: 0.5 + } + }, + { + key: 'dotY', + value: { + dotY: 30 + } + }, + { + key: 'dotY', + value: { + dotY: 20 + } + }, + { + key: 'dotX', + value: { + dotX: 12 + } + }, + { + key: 'dotX', + value: { + dotX: 15 + }, + }, + ]; + return ( + + + {typingAnimationProps.map((item) => { + return ( + + + + + + + ); + })} + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: 'white', + }, + button: { + backgroundColor: 'blue', + paddingHorizontal: 20, + paddingVertical: 10, + borderRadius: 5, + marginBottom: 20, + }, + buttonText: { + color: 'white', + fontSize: 16, + }, + animationContainer: { + alignItems: 'center', + }, + text: { + fontSize: 20, + marginBottom: 20, + }, + typingAnimation: { + flexDirection: 'row', + }, +}); + +export default TypingAnimationDemos; +``` + +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过： + +1.RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----------: | :----------------------------------------------------------: | :-----: | :------: | :---------: | :---------------: | +| style | Container styles; default is `{}` | Object | No | Android/ios | Yes | +| dotColor | Dot color; default is `#000` (black) | String | No | Android/ios | Yes | +| dotStyles | Dot styles; default is `{}` | Object | No | Android | No | +| dotRadius | Dot radius; default is `2.5` | Integer | No | Android/ios | Yes | +| dotMargin | Dot margin, the space between dots; default is `3` | Integer | No | Android/ios | Yes | +| dotAmplitude | Dot amplitude; default is `3` | Integer | No | Android/ios | Yes | +| dotSpeed | Dot speed, the speed of the whole animation view; default is `0.15` | Integer | No | Android/ios | Yes | +| dotY | Dot y, the starting y coordinate; default is 6 | Integer | No | Android/ios | Yes | +| dotX | Dot x, the x coordinate of the center dot; default is `12` | Integer | No | Android/ios | Yes | +| show | Visibility, whether the whole animation view is displayed or not; default is true | Boolean | No | Android/ios | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/watadarkstar/react-native-typing-animation/blob/master/LICENSE) ，请自由地享受和参与开源。 + + + \ No newline at end of file diff --git a/en/react-native-typography.md b/en/react-native-typography.md new file mode 100644 index 00000000..3e710d97 --- /dev/null +++ b/en/react-native-typography.md @@ -0,0 +1,101 @@ +> 模板版本：v0.2.2 + +

+

react-native-typography

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-typography) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-typography Releases](https://github.com/react-native-oh-library/react-native-typography/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-typography@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-typography@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变 + +```js +import { View, Text } from "react-native"; +import React from "react"; +import { iOSUIKit, material, systemWeights } from "react-native-typography"; + +export function TypographyExample1() { + return ( + + Hello iOS UI Kit! + Title + Title + + ); +} +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-typography Releases](https://github.com/react-native-oh-library/react-native-typography/releases) + +## 属性 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | ----------------- | +| material | Includes all the styles defined in the [Material Design Guidelines](https://material.io/guidelines/style/typography.html#typography-styles).Defines size, weight and color. | object | no | All | yes | +| materialDense | material`s Dense scripts | object | no | All | yes | +| materialTall | material`s Tall scripts | object | no | All | yes | +| human | Defined in the [Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/visual-design/typography/).Defines size, weight and color. | object | no | All | yes | +| humanDense | human`s Dense scripts | object | no | All | yes | +| humanTall | human`s Tall scripts | object | no | All | yes | +| iOSUIKit | Extracted from [the official Apple sketch file](https://developer.apple.com/design/resources/) These are the text styles that fall under the category of iOS UIKit, and are used to build the UI components of iOS Apps. They build on top of the Human Interface styles, customizing some properties such as weight or letter spacing. | object | no | iOS | yes | +| iOSUIKitDense | iOSUIKit`s Dense scripts | object | no | iOS | yes | +| iOSUIKitTall | iOSUIKit`s Tall scripts | object | no | iOS | yes | +| systemWeights | A font weight in React Native is sometimes formed by a pair of a fontFamily and a fontWeight, but not always! It depends on the typeface, sometimes it's just. defined by the fontFamily. With these helpers, you don't have to worry about those inconsistencies. To combine them with a collection style (or your own styles) just spread them, as they are plain objects. | object | no | All | yes | +| systemDenseWeights | systemWeights`s Dense scripts | object | no | All | yes | +| systemTallWeights | systemWeights`s Tall scripts | object | no | All | yes | +| sanFranciscoWeights | San Francisco typeface | object | no | iOS | yes | +| robotoWeights | These weights are **only intended for Android**, as they directly reference the native Roboto typeface. | object | no | Android | yes | +| webWeights | These weights are **only intended for the web**, and render [react-native-web](https://github.com/necolas/react-native-web)'s system font stack. | object | no | Web | yes | +| iOSColors | Colors iOS | object | no | iOS | yes | +| materialColors | Colors Material | object | no | All | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/hectahertz/react-native-typography/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-udp.md b/en/react-native-udp.md new file mode 100644 index 00000000..ade3443c --- /dev/null +++ b/en/react-native-udp.md @@ -0,0 +1,283 @@ +> 模板版本：v0.2.2 + +

+

react-native-udp

+

+

+ + Supported platforms + + + License + + +

+ + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-udp) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-udp Releases](https://github.com/react-native-oh-library/react-native-udp/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-udp@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-udp@file:# +``` + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, {Component} from 'react'; +import {ScrollView, StyleSheet, Text, View} from 'react-native'; + +import dgram from 'react-native-udp'; + +function randomPort() { + return (Math.random() * 60536) | (0 + 5000); // 60536-65536 +} + +function toByteArray(obj) { + var uint = new Uint8Array(obj.length); + for (var i = 0, l = obj.length; i < l; i++) { + uint[i] = obj.charCodeAt(i); + } + + return new Uint8Array(uint); +} + +class App extends Component { + constructor(props) { + super(props); + + this.updateChatter = this.updateChatter.bind(this); + this.state = {chatter: []}; + } + + updateChatter(msg) { + this.setState({ + chatter: this.state.chatter.concat([msg]), + }); + } + + componentDidMount() { + let self = this; + + let a = dgram.createSocket('udp4'); + let aPort = randomPort(); + a.bind(aPort, function(err) { + if (err) throw err; + self.updateChatter('a bound to ' + JSON.stringify(a.address())); + }); + + let b = dgram.createSocket('udp4'); + var bPort = randomPort(); + b.bind(bPort, function(err) { + if (err) throw err; + self.updateChatter('b bound to ' + JSON.stringify(b.address())); + }); + + a.on('message', function(data, rinfo) { + var str = String.fromCharCode.apply(null, new Uint8Array(data)); + self.updateChatter( + 'a received echo ' + str + ' ' + JSON.stringify(rinfo), + ); + a.close(); + b.close(); + }); + + b.on('message', function(data, rinfo) { + var str = String.fromCharCode.apply(null, new Uint8Array(data)); + self.updateChatter('b received ' + str + ' ' + JSON.stringify(rinfo)); + + // echo back + b.send(data, 0, data.length, aPort, '127.0.0.1', function(err) { + if (err) throw err; + self.updateChatter('b echoed data'); + }); + }); + + b.once('listening', function() { + var msg = toByteArray('hello'); + a.send(msg, 0, msg.length, bPort, '127.0.0.1', function(err) { + if (err) throw err; + self.updateChatter('a sent data'); + }); + }); + } + + render() { + return ( + + + {this.state.chatter.map((msg, index) => { + return ( + + {msg} + + ); + })} + + + ); + } +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, +}); + +export default App; +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-udp": "file:../../node_modules/@react-native-oh-tpl/react-native-udp/harmony/react-native-udp.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + + + +### 3.在 ArkTs 侧引入 RNUdpPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... + ++ import {RNUdpPackage} from '@react-native-oh-tpl/react-native-udp/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNUdpPackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-udp Releases](https://github.com/react-native-oh-library/react-native-udp/releases) + + + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| createSocket | Creates a Socket object. | Function | false | Android/iOS | yes | +| bind | For UDP sockets, causes the `UdpSocket` to listen for datagram messages on a named `port`. | Function | false | Android/iOS | yes | +| send | Broadcasts a datagram on the socket. | Function | false | Android/iOS | yes | +| address | Returns an object containing the address information for a socket. | Function | false | Android/iOS | yes | +| setBroadcast | Sets or clears the `SO_BROADCAST` socket option. | Function | false | Android/iOS | yes | +| addMembership | Tells the kernel to join a multicast group at the given `multicastAddress` and `multicastInterface` using the `IP_ADD_MEMBERSHIP` socket option. | Function | false | Android/iOS | yes | +| dropMembership | Instructs the kernel to leave a multicast group at `multicastAddress` using the `IP_DROP_MEMBERSHIP` socket option. | Function | false | Android/iOS | yes | + + + + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/tradle/react-native-udp/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-ui-lib.md b/en/react-native-ui-lib.md new file mode 100644 index 00000000..490f1a8b --- /dev/null +++ b/en/react-native-ui-lib.md @@ -0,0 +1,1653 @@ +模板版本：v0.2.2 + +

+

react-native-ui-lib

+

+

+ + Supported platforms + + + License + +

+ + + + +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-ui-lib) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases)，并下载适用版本的 tgz 包。 + +本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-reanimated和 @react-native-oh-tpl/react-native-gesture-handler的原生端代码，如已在 HarmonyOS 工程中引入过这些库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参考[@react-native-oh-tpl/react-native-reanimated文档](/zh-cn/react-native-reanimated.md)和[@react-native-oh-tpl/react-native-gesture-handler文档](/zh-cn/react-native-gesture-handler.md)进行引入。 + +下面是根据使用组件情况按需引入依赖项: + +- [@react-native-community/blur](/zh-cn/react-native-community-blur.md) （Card 组件） + +- [@react-native-community/datetimepicker](/zh-cn/react-native-community-datetimepicker.md) （DateTimePicker 组件） +- [@react-native-community/netinfo](/zh-cn/react-native-community-netinfo.md) （ConnectionStatusBar 组件） + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-ui-lib@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-ui-lib@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```jsx +import React, {Component} from 'react'; +import {Colors, Typography, Spacings, ThemeManager, View, Text, Card, Button} from 'react-native-ui-lib'; + +Colors.loadColors({ + primaryColor: '#2364AA', + secondaryColor: '#81C3D7', + textColor: '##221D23', + errorColor: '#E63B2E', + successColor: '#ADC76F', + warnColor: '##FF963C' +}); + +Typography.loadTypographies({ + heading: {fontSize: 36, fontWeight: '600'}, + subheading: {fontSize: 28, fontWeight: '500'}, + body: {fontSize: 18, fontWeight: '400'} +}); + +Spacings.loadSpacings({ + page: 20, + card: 12, + gridGutter: 16 +}); + +// with plain object +ThemeManager.setComponentTheme('Card', { + borderRadius: 8 +}); + +// with a dynamic function +ThemeManager.setComponentTheme('Button', (props, context) => { + // 'square' is not an original Button prop, but a custom prop that can + // be used to create different variations of buttons in your app + if (props.square) { + return { + borderRadius: 0 + }; + } +}); + +class MyScreen extends Component { + render() { + return ( + + + My Screen + + + This is an example card + + + + + ); + } +} +``` + +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-ui-lib": "file:../../node_modules/@react-native-oh-tpl/react-native-ui-lib/harmony/ui_lib.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.配置 CMakeLists 和引入 UiLibPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-ui-lib/src/main/cpp" ./ui-lib) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_ui_lib) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++ #include "UiLibPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 HighlighterView组件 + +找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： + +```diff + ... ++ import { HighlighterView } from "@react-native-oh-tpl/react-native-ui-lib"; + +@Builder +export function buildCustomRNComponent(ctx: ComponentBuilderContext) { + ... ++ if (ctx.componentName === HighlighterView.NAME) { ++ HighlighterView({ ++ ctx: ctx.rnComponentContext, ++ tag: ctx.tag ++ }) ++ } +... +} +... +``` + +> [!TIP] 本库使用了混合方案，需要添加组件名。（如使用混合方案） + +在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名 + +```diff +const arkTsComponentNames: Array = [ + SampleView.NAME, + GeneratedSampleView.NAME, + PropsDisplayer.NAME, ++ HighlighterView.NAME + ]; +``` + +### 5.在 ArkTs 侧引入 UiLibPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { UiLibPackage } from '@react-native-oh-tpl/react-native-ui-lib/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new UiLibPackage(ctx) + ]; +} +``` + +### 6.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-ui-lib Releases](https://github.com/react-native-oh-library/react-native-ui-lib/releases) + + + +## 组件 + +详细请查看 [react-native-ui-lib的文档介绍](https://wix.github.io/react-native-ui-lib/docs/getting-started/setup) + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +**Text**：文本组件，该组件扩展了[Text](https://reactnative.dev/docs/text)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | ----------------------------------- | -------- | ----------- | ----------------- | +| animated | Use Animated.Text as a container | boolean | no | iOS/Android | yes | +| center | Whether to center the text (using textAlign) | boolean | no | iOS/Android | yes | +| color | Color of the text | string | no | iOS/Android | yes | +| highlightString | Substring to highlight. Can be a simple string or a HighlightStringProps object, or an array of the above | HighlightString \|HighlightString[] | no | iOS/Android | yes | +| highlightStyle | Custom highlight style for highlight string | TextStyle | no | iOS/Android | yes | +| recorderTag | Recorder Tag | 'mask' \|'unmask' | no | iOS/Android | yes | +| underline | Whether to add an underline | boolean | no | iOS/Android | yes | +| uppercase | Whether to change the text to uppercase | boolean | no | iOS/Android | yes | + +**TouchableOpacity**：触摸反馈透明度组件，该组件扩展了[TouchableOpacity](https://reactnative.dev/docs/touchableopacity)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| activeBackgroundColor | Apply background color on TouchableOpacity when active (press is on) | string | no | iOS/Android | yes | +| backgroundColor | Background color for TouchableOpacity | string | no | iOS/Android | yes | +| customValue | Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback | any | no | iOS/Android | yes | +| onPress | On press callback | (props?: TouchableOpacityProps & {event: GestureResponderEvent} \|any) => void | no | iOS/Android | yes | +| recorderTag | Recorder Tag | 'mask'\|'unmask' | no | iOS/Android | yes | +| style | Custom style | ViewStyle | no | iOS/Android | yes | +| throttleOptions | Throttle options | ThrottleOptions | no | iOS/Android | yes | +| throttleTime | Throttle time in MS for onPress callback | number | no | iOS/Android | yes | +| useNative | Should use an enhanced native implementation with extra features | boolean | no | iOS/Android | yes | + +**View**：容器组件，该组件扩展了[View](https://reactnative.dev/docs/view)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | ---------------- | -------- | ----------- | ----------------- | +| animated | Use Animate.View as a container | boolean | no | iOS/Android | yes | +| backgroundColor | Set background color | string | no | iOS/Android | yes | +| inaccessible | Turn off accessibility for this view and its nested children | boolean | no | iOS/Android | yes | +| reanimated | Use Animate.View (from react-native-reanimated) as a container | boolean | no | iOS/Android | yes | +| recorderTag | Recorder Tag | 'mask'\|'unmask' | no | iOS/Android | yes | +| renderDelay | Experimental: Pass time in ms to delay render | number | no | iOS/Android | yes | +| style | Custom style | ViewStyle | no | iOS/Android | yes | +| useSafeArea | If true, will render as SafeAreaView | boolean | no | iOS/Android | yes | + +**ActionBar**：快速操作栏，每个操作都支持按钮组件道具，该组件扩展了[View](https://wix.github.io/react-native-ui-lib/docs/components/basic/View)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | ------------- | -------- | ----------- | ----------------- | +| actions | The actions for the action bar | ButtonProps[] | no | iOS/Android | yes | +| backgroundColor | Background color | string | no | iOS/Android | yes | +| centered | Should action be equally centered | boolean | no | iOS/Android | yes | +| height | Height | number | no | iOS/Android | yes | +| keepRelative | Keep the action bar position relative instead of it absolute position | boolean | no | iOS/Android | yes | +| style | Component's style | ViewStyle | no | iOS/Android | yes | +| useSafeArea | In iOS, use safe area, in case component attached to the bottom | boolean | no | iOS/Android | yes | + +**Button**：按钮组件，该组件扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----------------------- | ------------------------------------------------------------ | ----------------------------------------------- | -------- | ----------- | ----------------- | +| animateLayout | should animate layout change. Note: For Android you must set ' setLayoutAnimationEnabledExperimental (true) ' via RN's 'UIManager' | boolean | no | iOS/Android | yes | +| animateTo | the direction of the animation ('left' and 'right' will effect the button's own alignment) | ButtonAnimationDirection | no | iOS/Android | yes | +| avoidInnerPadding | avoid inner button padding | boolean | no | iOS/Android | yes | +| avoidMinWidth | avoid minimum width constraints | boolean | no | iOS/Android | yes | +| backgroundColor | Color of the button background | string | no | iOS/Android | yes | +| borderRadius | Custom border radius. | number | no | iOS/Android | yes | +| color | The Button text color (inherited from Text component) | string | no | iOS/Android | yes | +| disabled | Disable interactions for the component | boolean | no | iOS/Android | yes | +| disabledBackgroundColor | Color of the disabled button background | string | no | iOS/Android | yes | +| enableShadow | Control shadow visibility (iOS-only) | boolean | no | iOS | no | +| fullWidth | should the button act as a coast to coast button (no border radius) | boolean | no | iOS/Android | yes | +| getActiveBackgroundColor | callback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...}). Better set using ThemeManager | (backgroundColor: string, props: any) => string | no | iOS/Android | yes | +| hyperlink | Button will look like a hyperlink | boolean | no | iOS/Android | yes | +| iconOnRight | Should the icon be right to the label | boolean | no | iOS/Android | yes | +| iconProps | Icon image props | Partial | no | iOS/Android | yes | +| iconSource | Icon image source or a callback function that returns a source | ImageProps['source']\|Function | no | iOS/Android | yes | +| iconStyle | Icon image style | ImageStyle | no | iOS/Android | yes | +| label | Text to show inside the button | string | no | iOS/Android | yes | +| labelProps | Props that will be passed to the button's Text label. | TextProps | no | iOS/Android | yes | +| labelStyle | Additional styles for label text | TextStyle | no | iOS/Android | yes | +| link | Button will look like a link | boolean | no | iOS/Android | yes | +| linkColor | label color for when it's displayed as link or hyperlink | string | no | iOS/Android | yes | +| onPress | Actions handler | (props: any) => void | no | iOS/Android | yes | +| outline | Button will have outline style | boolean | no | iOS/Android | yes | +| outlineColor | The outline color | string | no | iOS/Android | yes | +| outlineWidth | The outline width | number | no | iOS/Android | yes | +| round | should the button be a round button | boolean | no | iOS/Android | yes | +| size | Size of the button [large, medium, small, xSmall] | ButtonSize | no | iOS/Android | yes | +| supportRTL | whether the icon should flip horizontally on RTL locals | boolean | no | iOS/Android | yes | + +**Checkbox**：复选框组件，该组件扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------------------------ | -------------------------- | -------- | ----------- | ----------------- | +| borderRadius | The Checkbox border radius | number | no | iOS/Android | yes | +| color | The Checkbox color | string | no | iOS/Android | yes | +| containerStyle | Custom styling for the checkbox and label container | ViewStyle | no | iOS/Android | yes | +| disabled | Whether the checkbox should be disabled | boolean | no | iOS/Android | yes | +| iconColor | The selected icon color | string | no | iOS/Android | yes | +| label | Add a label to the Checkbox | string | no | iOS/Android | yes | +| labelProps | Props to pass on to the label component | TextProps | no | iOS/Android | yes | +| labelStyle | Pass to style the label | TextStyle | no | iOS/Android | yes | +| onChangeValidity | Callback for when field validity has changed | (isValid: boolean) => void | no | iOS/Android | yes | +| onValueChange | Callback function for value change event | (value) => void | no | iOS/Android | yes | +| outline | Alternative Checkbox outline style | boolean | no | iOS/Android | yes | +| required | Whether the checkbox is required | boolean | no | iOS/Android | yes | +| selectedIcon | The icon asset to use for the selected indication | ImageRequireSource | no | iOS/Android | yes | +| size | The Checkbox size, affect both width and height | number | no | iOS/Android | yes | +| style | Custom styling for the Checkbox | ViewStyle | no | iOS/Android | yes | +| value | The Checkbox value. If true the switch will be turned on. Default value is false | boolean | no | iOS/Android | yes | + +**Chip**：芯片组件，该组件扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)，[View](https://wix.github.io/react-native-ui-lib/docs/components/basic/View)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- | ----------- | ----------------- | +| avatarProps | Avatar props object | AvatarProps | no | iOS/Android | yes | +| backgroundColor | Background color | string | no | iOS/Android | yes | +| badgeProps | Badge props object | BadgeProps | no | iOS/Android | yes | +| borderRadius | Border radius | number | no | iOS/Android | yes | +| containerStyle | Component's container style | ViewStyle | no | iOS/Android | yes | +| dismissColor | Dismiss color | string | no | iOS/Android | yes | +| dismissContainerStyle | Dismiss container style | ImageStyle | no | iOS/Android | yes | +| dismissIcon | Dismiss asset | ImageSourcePropType | no | iOS/Android | yes | +| dismissIconStyle | Dismiss style | ImageStyle | no | iOS/Android | yes | +| iconProps | Additional icon props | Omit | no | iOS/Android | yes | +| iconSource | Left icon's source | ImageSourcePropType | no | iOS/Android | yes | +| iconStyle | Icon style | ImageStyle | no | iOS/Android | yes | +| label | Main Chip text | string | no | iOS/Android | yes | +| labelStyle | Label's style | TextStyle | no | iOS/Android | yes | +| leftElement | Left custom element | JSX.Element | no | iOS/Android | yes | +| onDismiss | Adds a dismiss button and serves as its callback | (props: any) => void | no | iOS/Android | yes | +| onPress | On Chip press callback | (props: any) => void | no | iOS/Android | yes | +| resetSpacings | Disables all internal elements default spacings. Helps reach a custom design | boolean | no | iOS/Android | yes | +| rightElement | Right custom element | JSX.Element | no | iOS/Android | yes | +| rightIconSource | Right icon's source | ImageSourcePropType | no | iOS/Android | yes | +| size | Chip's size. Number or a width and height object | number\|{{width: number, height: number}} | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| useCounter | Display badge as counter (no background) | boolean | no | iOS/Android | yes | +| useSizeAsMinimum | Uses size as minWidth and minHeight | boolean | no | iOS/Android | yes | + +**RadioButton**：单选按钮组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | ------------------------------------------------------------ | --------------------------- | -------- | ----------- | ----------------- | +| borderRadius | The radio button border radius | number | no | iOS/Android | yes | +| color | The color of the radio button | string | no | iOS/Android | yes | +| containerStyle | Additional styling for the container | ViewStyle | no | iOS/Android | yes | +| contentOnLeft | Should the content be rendered left to the button | boolean | no | iOS/Android | yes | +| disabled | Whether the radio button should be disabled | boolean | no | iOS/Android | yes | +| iconOnRight | Should the icon be on the right side of the label | boolean | no | iOS/Android | yes | +| iconSource | Icon image source | ImageSource | no | iOS/Android | yes | +| iconStyle | Icon image style | ImageStyle | no | iOS/Android | yes | +| label | A label for the radio button description | string | no | iOS/Android | yes | +| labelStyle | Label style | TextStyle | no | iOS/Android | yes | +| onPress | Invoked when pressing the button | (selected: boolean) => void | no | iOS/Android | yes | +| selected | When using RadioButton without a RadioGroup, use this prop to toggle selection | boolean | no | iOS/Android | yes | +| size | The size of the radio button, affect both width & height | number | no | iOS/Android | yes | +| value | The identifier value of the radio button. must be different than other RadioButtons in the same group | string \| number \| boolean | no | iOS/Android | yes | + +**RadioGroup**：包裹单选按钮组件，和RadioButton配合使用。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| initialValue | The initial value of the selected radio button | string \| number \| boolean | no | iOS/Android | yes | +| onValueChange | Invoked once when value changes, by selecting one of the radio buttons in the group | ((value?: string) => void)\|((value?: number) => void)\|((value?: boolean) => void)\|((value?: any) => void) | no | iOS/Android | yes | + +**Slider**：滑块组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | ------------------------------------ | -------- | ----------- | ----------------- | +| accessible | If true the component will have accessibility features enabled | boolean | no | iOS/Android | yes | +| activeThumbStyle | The active (during press) thumb style | ViewStyle | no | iOS/Android | yes | +| containerStyle | The container style | ViewStyle | no | iOS/Android | yes | +| disableActiveStyling | If true the Slider will not change it's style on press | boolean | no | iOS/Android | yes | +| disableRTL | If true the Slider will stay in LTR mode even if the app is on RTL mode | boolean | no | iOS/Android | yes | +| disabled | If true the Slider will be disabled and will appear in disabled color | boolean | no | iOS/Android | yes | +| initialMaximumValue | Only when `useRange` is true, Initial maximum value | number | no | iOS/Android | yes | +| initialMinimumValue | Only when `useRange` is true, Initial minimum value | number | no | iOS/Android | yes | +| maximumTrackTintColor | The track color | string | no | iOS/Android | yes | +| maximumValue | Track maximum value | number | no | iOS/Android | yes | +| migrate | Temporary prop required for migration to the Slider's new implementation | boolean | no | iOS/Android | yes | +| minimumTrackTintColor | The color used for the track from minimum value to current value | string | no | iOS/Android | yes | +| minimumValue | Track minimum value | number | no | iOS/Android | yes | +| onRangeChange | Callback for onRangeChange. Returns values object with the min and max values | SliderOnRangeChange | no | iOS/Android | yes | +| onReset | Callback that notifies when the reset function was invoked | () => void | no | iOS/Android | yes | +| onSeekEnd | Callback that notifies about slider seeking is finished | () => void | no | iOS/Android | yes | +| onSeekStart | Callback that notifies about slider seeking is started | () => void | no | iOS/Android | yes | +| onValueChange | Callback for onValueChange | SliderOnValueChange | no | iOS/Android | yes | +| renderTrack | Custom render instead of rendering the track | () => ReactElement \| ReactElement[] | no | iOS/Android | yes | +| step | Step value of the slider. The value should be between 0 and (maximumValue - minimumValue) | number | no | iOS/Android | yes | +| testID | The component test id | string | no | iOS/Android | yes | +| thumbStyle | The thumb style | ViewStyle | no | iOS/Android | yes | +| thumbTintColor | Thumb color | string | no | iOS/Android | yes | +| trackStyle | The track style | ViewStyle | no | iOS/Android | yes | +| useGap | If true the min and max thumbs will not overlap | boolean | no | iOS/Android | yes | +| useRange | If true the Slider will display a second thumb for the min value | boolean | no | iOS/Android | yes | +| value | Initial value | number | no | iOS/Android | yes | + +**Switch**：开关切换组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | ------------------------------------------------------------ | ------------------------ | -------- | ----------- | ----------------- | +| disabled | Whether the switch should be disabled | boolean | no | iOS/Android | yes | +| disabledColor | The Switch background color when it's disabled | string | no | iOS/Android | yes | +| height | The Switch height | number | no | iOS/Android | yes | +| id | Component id | string | no | iOS/Android | yes | +| offColor | The Switch background color when it's turned off | string | no | iOS/Android | yes | +| onColor | The Switch background color when it's turned on | string | no | iOS/Android | yes | +| onValueChange | Invoked with the new value when the value changes | (value: boolean) => void | no | iOS/Android | yes | +| style | Custom style | ViewStyle | no | iOS/Android | yes | +| testID | Component test id | string | no | iOS/Android | yes | +| thumbColor | The Switch's thumb color | string | no | iOS/Android | yes | +| thumbSize | The Switch's thumb size (width & height) | number | no | iOS/Android | yes | +| thumbStyle | The Switch's thumb style | ViewStyle | no | iOS/Android | yes | +| value | The value of the switch. If true the switch will be turned on. Default value is false | boolean | no | iOS/Android | yes | +| width | The Switch width | number | no | iOS/Android | yes | + +**ChipsInput**：芯片输入组件，该组件扩展了[TextField](https://wix.github.io/react-native-ui-lib/docs/components/form/TextField)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ---------------------------------------------------- | --------------------------------------------- | -------- | ----------- | ----------------- | +| chips | List of chips to render | ChipProps[] | no | iOS/Android | yes | +| defaultChipProps | Default set of props to pass by default to all chips | ChipProps | no | iOS/Android | yes | +| maxChips | The maximum chips to allow adding | number | no | iOS/Android | yes | +| onChange | Callback for chips change (adding or removing chip) | (newChips, changeReason, updatedChip) => void | no | iOS/Android | yes | + +**ColorPalette**：调色板组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | --------------------------------------------- | -------- | ----------- | ----------------- | +| animatedIndex | Default is last，The index of the item to animate at first render | number | no | iOS/Android | yes | +| backgroundColor | The ColorPalette's background color | string | no | iOS/Android | yes | +| colors | Array of colors to render in the palette | string[] | no | iOS/Android | yes | +| containerStyle | Component's container style | ViewStyle | no | iOS/Android | yes | +| containerWidth | The container margins | number | no | iOS/Android | yes | +| loop | Whether the colors pagination scrolls in a loop | boolean | no | iOS/Android | yes | +| numberOfRows | The number of color rows from 2 to 5 | number | no | iOS/Android | yes | +| onValueChange | Invoked once when value changes by selecting one of the swatches in the palette | (value: string, colorInfo: ColorInfo) => void | no | iOS/Android | yes | +| style | Component's style | ViewStyle | no | iOS/Android | yes | +| swatchStyle | Style to pass all the ColorSwatches in the palette | ViewStyle | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| usePagination | Whether to use pagination when number of colors exceeds the number of rows | boolean | no | iOS/Android | yes | +| value | The value of the selected swatch | string | no | iOS/Android | yes | + +**ColorPicker**：选色器组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| accessibilityLabels | Accessibility labels as an object of strings | { addButton: string, dismissButton: string, doneButton: string, input: string} | no | iOS/Android | yes | +| animatedIndex | Default is last，The index of the item to animate at first render | number | no | iOS/Android | yes | +| backgroundColor | The ColorPicker's background color | string | no | iOS/Android | yes | +| colors | Array of colors for the picker's color palette (hex values) | string[] | no | iOS/Android | yes | +| onValueChange | Callback for the picker's color palette change | (value: string, colorInfo: ColorInfo) => void | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| value | The value of the selected swatch | string | no | iOS/Android | yes | + +**ColorSwatch**：颜色样板组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | ------------------------------------------------------------ | --------------------------------------------- | -------- | ----------- | ----------------- | +| animated | Is first render should be animated | boolean | no | iOS/Android | yes | +| color | The color of the ColorSwatch | string | no | iOS/Android | yes | +| index | The index of the Swatch if in array | number | no | iOS/Android | yes | +| onPress | Callback from press event | (value: string, colorInfo: ColorInfo) => void | no | iOS/Android | yes | +| selected | Is the initial state is selected | boolean | no | iOS/Android | yes | +| size | Color Swatch size | number | no | iOS/Android | yes | +| style | Component's style | ViewStyle | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| unavailable | Is the initial state is unavailable | boolean | no | iOS/Android | yes | +| value | Must be different than other ColorSwatches in the same group，The identifier value of the ColorSwatch in a ColorSwatch palette | string | no | iOS/Android | yes | + +**DateTimePicker**：时间选择组件，该组件扩展了[TextField](https://wix.github.io/react-native-ui-lib/docs/components/form/TextField)属性，依赖[@react-native-community/datetimepicker](/zh-cn/react-native-community-datetimepicker)库。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------- | ------------------------------------------------------------ | ------------------------------------------------- | -------- | ----------- | ----------------- | +| dateTimeFormatter | A callback function to format the time or date | (value: Date, mode: DateTimePickerMode) => string | no | iOS/Android | yes | +| dialogProps | Props to pass the Dialog component | DialogProps | no | iOS/Android | yes | +| display | Defines the visual display of the picker. The default value is 'spinner' on iOS and 'default' on Android. The list of all possible values are default, spinner, calendar or clock on Android and default, spinner, compact or inline for iOS. Full list can be found here:[react-native-datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker#display-optional) | string | no | iOS/Android | yes | +| editable | Should this input be editable or disabled | boolean | no | iOS/Android | yes | +| headerStyle | Style to apply to the iOS dialog header | ViewStyle | no | iOS/Android | yes | +| is24Hour | Android only, Allows changing of the time picker to a 24 hour format | boolean | no | Android | no | +| locale | iOS only, Allows changing of the locale of the component | string | no | iOS | yes | +| maximumDate | The maximum date or time value to use | Date | no | iOS/Android | yes | +| minimumDate | The minimum date or time value to use | Date | no | iOS/Android | yes | +| minuteInterval | iOS only, The interval at which minutes can be selected. Possible values are: 1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30 | number | no | iOS | yes | +| mode | The type of picker to display ('date' or 'time') | DATE \|TIME | no | iOS/Android | yes | +| onChange | Called when the date/time change | () => Date | no | iOS/Android | yes | +| renderInput | Render custom input | JSX.Element | no | iOS/Android | yes | +| themeVariant | Override system theme variant (dark or light mode) used by the date picker | LIGHT \|DARK | no | iOS/Android | yes | +| timeZoneOffsetInMinutes | iOS only, Allows changing of the timeZone of the date picker. By default it uses the device's time zone | number | no | iOS | yes | +| value | Defaults to device's date and time, The initial value to set the picker to | Date | no | iOS/Android | yes | + +**MaskedInput**：掩码输入组件，该组件扩展了[TextInput](https://reactnative.dev/docs/textinput)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------------------------ | ------------------ | -------- | ----------- | ----------------- | +| containerStyle | container style for the masked input container | ViewStyle | no | iOS/Android | yes | +| renderMaskedText | callback for rendering the custom input out of the value returns from the actual input | React.ReactElement | no | iOS/Android | yes | + +**NumberInput**：数字输入框组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | ------------------------------------------------------------ | ------------------------------- | -------- | ----------- | ----------------- | +| containerStyle | Container style of the whole component | ViewStyle | no | iOS/Android | yes | +| contextMenuHidden | Requires @react-native-community/clipboard to be installed. If true, context menu is hidden. | boolean | no | iOS/Android | yes | +| fractionDigits | Number of digits after the decimal point. Must be in the range 0 - 20, inclusive. | number | no | iOS/Android | yes | +| initialNumber | A valid number (in en locale, i.e. only digits and a decimal point). | number | no | iOS/Android | yes | +| leadingText | A leading text | string | no | iOS/Android | yes | +| leadingTextStyle | The style of the leading text | TextStyle | no | iOS/Android | yes | +| onChangeNumber | Callback that is called when the number value has changed. | (data: NumberInputData) => void | no | iOS/Android | yes | +| textFieldProps | Most of TextField's props can be applied, except for ones that are passed directly via named props. | TextFieldProps | no | iOS/Android | yes | +| trailingText | A trailing text | string | no | iOS/Android | yes | +| trailingTextStyle | The style of the trailing text | ViewStyle | no | iOS/Android | yes | + +**Picker**：弹窗选择组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| customPickerProps | Custom picker props (when using renderPicker, will apply on the button wrapper) | object | no | iOS/Android | yes | +| enableModalBlur | iOS only，Adds blur effect to picker modal | boolean | no | iOS | yes | +| fieldType | Pass for different field type UI (form, filter or settings) | PickerFieldTypes | no | iOS/Android | yes | +| getLabel | A function that returns the label to show for the selected Picker value | (value: string \| number) => void | no | iOS/Android | yes | +| items | Data source for Picker | {label: string, value: string \| number}[] | no | iOS/Android | yes | +| listProps | Pass props to the list component that wraps the picker options (allows to control FlatList behavior) | FlatListProps | no | iOS/Android | yes | +| migrate | Temporary prop required for migration to Picker's new API | boolean | no | iOS/Android | yes | +| mode | SINGLE mode or MULTI mode | SINGLE \| MULTI | no | iOS/Android | yes | +| onChange | Callback for when picker value change | (value: string \| number) => void | no | iOS/Android | yes | +| onPress | Add onPress callback for when pressing the picker | () => void | no | iOS/Android | yes | +| onSearchChange | Callback for picker modal search input text change (only when passing showSearch) | (searchValue: string) => void | no | iOS/Android | yes | +| pickerModalProps | Pass props to the picker modal | ModalProps | no | iOS/Android | yes | +| renderCustomModal | Render custom picker modal | ({visible, children, toggleModal}) => void) | no | iOS/Android | yes | +| renderCustomSearch | Render custom search input (only when passing showSearch) | (props) => void | no | iOS/Android | yes | +| renderItem | Render custom picker item | (value, {{...props, isSelected}}, itemLabel) => void | no | iOS/Android | yes | +| renderPicker | Render custom picker - input will be value (see above)\Example:\renderPicker = (selectedItem) => {...} | (selectedItem, itemLabel) => void | no | iOS/Android | yes | +| searchPlaceholder | Placeholder text for the search input (only when passing showSearch) | string | no | iOS/Android | yes | +| searchStyle | Style object for the search input (only when passing showSearch) | {color: string, placeholderTextColor: string, selectionColor: string} | no | iOS/Android | yes | +| selectionLimit | Limit the number of selected items | number | no | iOS/Android | yes | +| showSearch | Show search input to filter picker items by label | boolean | no | iOS/Android | yes | +| topBarProps | The picker modal top bar props | Modal's TopBarProps | no | iOS/Android | yes | +| useSafeArea | Add safe area in the Picker modal view | boolean | no | iOS/Android | yes | +| useWheelPicker | Use wheel picker instead of a list picker | boolean | no | iOS/Android | yes | +| value | Picker current value | string \| number | no | iOS/Android | yes | + +**Picker.Item**：弹窗选择Item组件，配合Picker组件使用。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| disabled | Is the item disabled | boolean | no | iOS/Android | yes | +| getItemLabel | Custom function for the item label | (value: string \| number) => string | no | iOS/Android | yes | +| isSelected | Is the item selected | boolean | no | iOS/Android | yes | +| label | Item's label | string | no | iOS/Android | yes | +| labelStyle | Item's label style | ViewStyle | no | iOS/Android | yes | +| onPress | Callback for onPress action, will stop selection if false is returned | (selected: boolean \| undefined, props: any) => void \| Promise; | no | iOS/Android | yes | +| onSelectedLayout | Callback for onLayout event | (event: LayoutChangeEvent) => void | no | iOS/Android | yes | +| selectedIcon | Pass to change the selected icon | string | no | iOS/Android | yes | +| selectedIconColor | Pass to change the selected icon color | ImageSource | no | iOS/Android | yes | +| value | Item's value | string \| number | no | iOS/Android | yes | + +**SectionsWheelPicker**：滚动选择组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | --------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | +| activeTextColor | Text color for the focused row | string | no | iOS/Android | yes | +| faderProps | Custom props for fader. | FaderProps | no | iOS/Android | yes | +| inactiveTextColor | Text color for other, non-focused rows | string | no | iOS/Android | yes | +| itemHeight | Describe the height of each item in the WheelPicker | number | no | iOS/Android | yes | +| numberOfVisibleRows | Describe the number of rows visible | number | no | iOS/Android | yes | +| sections | Array of sections | WheelPickerProps | no | iOS/Android | yes | +| testID | The component test id | string | no | iOS/Android | yes | +| textStyle | Row text style | TextStyle | no | iOS/Android | yes | + +**SegmentedControl**：切换值组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ----------------------------------------------- | ------------------------- | -------- | ----------- | ----------------- | +| activeBackgroundColor | The background color of the active segment | string | no | iOS/Android | yes | +| activeColor | The color of the active segment label | string | no | iOS/Android | yes | +| backgroundColor | The background color of the inactive segments | string | no | iOS/Android | yes | +| borderRadius | The segmentedControl borderRadius | number | no | iOS/Android | yes | +| containerStyle | Additional spacing styles for the container | ViewStyle | no | iOS/Android | yes | +| iconOnRight | Should the icon be on right of the label | boolean | no | iOS/Android | yes | +| initialIndex | Initial index to be active | number | no | iOS/Android | yes | +| onChangeIndex | Callback for when index has change. | (index: number) => void | no | iOS/Android | yes | +| outlineColor | The color of the active segment outline | string | no | iOS/Android | yes | +| outlineWidth | The width of the active segment outline | number | no | iOS/Android | yes | +| segmentLabelStyle | Segment label style | TextStyle | no | iOS/Android | yes | +| segments | Array on segments | SegmentedControlItemProps | no | iOS/Android | yes | +| segmentsStyle | Additional style for the segments | ViewStyle | no | iOS/Android | yes | +| style | Custom style to inner container | ViewStyle | no | iOS/Android | yes | +| testID | Component test id | string | no | iOS/Android | yes | +| throttleTime | Trailing throttle time of changing index in ms. | number | no | iOS/Android | yes | + +**Stepper**：步进器组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------ | --------------------------------------------------- | ---------------------------------------- | -------- | ----------- | ----------------- | +| accessibilityLabel | Component accessibility label | string | no | iOS/Android | yes | +| disabled | Disables interaction with the stepper | boolean | no | iOS/Android | yes | +| maxValue | Maximum value | number | no | iOS/Android | yes | +| minValue | Minimum value | number | no | iOS/Android | yes | +| onValueChange | Value change callback function | (value: number, testID?: string) => void | no | iOS/Android | yes | +| small | Renders a small sized Stepper | boolean | no | iOS/Android | yes | +| step | The step to increase and decrease by (default is 1) | number | no | iOS/Android | yes | +| testID | Test id for component | string | no | iOS/Android | yes | +| value | Stepper value | number | no | iOS/Android | yes | + +**TextField**：文本域组件，扩展了[TextInput](https://reactnative.dev/docs/textinput)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| centered | Whether to center the TextField - container and label | boolean | no | iOS/Android | yes | +| charCounterStyle | Pass custom style to character counter text | TextStyle | no | iOS/Android | yes | +| color | Input color | ColorType | no | iOS/Android | yes | +| containerProps | Container props of the whole component | Omit | no | iOS/Android | yes | +| containerStyle | Container style of the whole component | ViewStyle | no | iOS/Android | yes | +| enableErrors | Should support showing validation error message | boolean | no | iOS/Android | yes | +| fieldStyle | Internal style for the field container to style the field underline, outline and fill color | ViewStyle \| (context: FieldContextType, props) => ViewStyle | no | iOS/Android | yes | +| floatOnFocus | Should placeholder float on focus or when start typing | boolean | no | iOS/Android | yes | +| floatingPlaceholder | Pass to add floating placeholder support | boolean | no | iOS/Android | yes | +| floatingPlaceholderColor | The floating placeholder color | ColorType | no | iOS/Android | yes | +| floatingPlaceholderStyle | Custom style for the floating placeholder | TextStyle | no | iOS/Android | yes | +| formatter | Custom formatter for the input value (used only when input if not focused) | (value) => string \| undefined | no | iOS/Android | yes | +| hint | A hint text to display when focusing the field | string | no | iOS/Android | yes | +| label | Field label | string | no | iOS/Android | yes | +| labelColor | Field label color. Either a string or color by state map ({default, focus, error, disabled, readonly}) | ColorType | no | iOS/Android | yes | +| labelProps | Pass extra props to the label Text element | TextProps | no | iOS/Android | yes | +| labelStyle | Custom style for the field label | TextStyle | no | iOS/Android | yes | +| leadingAccessory | Pass to render a leading element | ReactElement | no | iOS/Android | yes | +| onChangeValidity | Callback for when field validity has changed | (isValid: boolean) => void | no | iOS/Android | yes | +| onValidationFailed | Callback for when field validated and failed | (failedValidatorIndex: number) => void | no | iOS/Android | yes | +| placeholder | The placeholder for the field | string | no | iOS/Android | yes | +| placeholderTextColor | Placeholder text color | ColorType | no | iOS/Android | yes | +| preset | Predefined preset to use for styling the field | 'default' \| null \|string | no | iOS/Android | yes | +| readonly | A UI preset for read only state | boolean | no | iOS/Android | yes | +| recorderTag | Recorder Tag | 'mask' \| 'unmask' | no | iOS/Android | yes | +| retainValidationSpace | Keep the validation space even if there is no validation message | boolean | no | iOS/Android | yes | +| showCharCounter | Should show a character counter (works only with maxLength) | boolean | no | iOS/Android | yes | +| showMandatoryIndication | Whether to show a mandatory field indication | boolean | no | iOS/Android | yes | +| trailingAccessory | Pass to render a trailing element | ReactElement | no | iOS/Android | yes | +| useGestureHandlerInput | Use react-native-gesture-handler instead of react-native for the base TextInput | boolean | no | iOS/Android | yes | +| validate | A single or multiple validator. Can be a string (required, email) or custom function. | Validator \| Validator [] | no | iOS/Android | yes | +| validateOnBlur | Should validate when losing focus of TextField | boolean | no | iOS/Android | yes | +| validateOnChange | Should validate when the TextField value changes | boolean | no | iOS/Android | yes | +| validateOnStart | Should validate when the TextField mounts | boolean | no | iOS/Android | yes | +| validationMessage | The validation message to display when field is invalid (depends on validate) | string \| string[] | no | iOS/Android | yes | +| validationMessagePosition | The position of the validation message (top/bottom) | ValidationMessagePosition | no | iOS/Android | yes | +| validationMessageStyle | Custom style for the validation message | TextStyle | no | iOS/Android | yes | + +**WheelPicker**：轮式拾取器组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | ----------------------------------------------- | -------- | ----------- | ----------------- | +| activeTextColor | Text color for the focused row | string | no | iOS/Android | yes | +| align | Align the content to center, right ot left | WheelPickerAlign | no | iOS/Android | yes | +| flatListProps | Props to be sent to the FlatList. | FlatListProps | no | iOS/Android | yes | +| inactiveTextColor | Text color for other, non-focused rows | string | no | iOS/Android | yes | +| initialValue | Initial value (uncontrolled) | number \| string | no | iOS/Android | yes | +| itemHeight | Height of each item in the WheelPicker | number | no | iOS/Android | yes | +| items | Data source for WheelPicker | WheelPickerItemProps[] | no | iOS/Android | yes | +| label | Additional label to render next to the items text | string | no | iOS/Android | yes | +| labelProps | Additional label's props | TextProps | no | iOS/Android | yes | +| labelStyle | Additional label's style | TextStyle | no | iOS/Android | yes | +| numberOfVisibleRows | Number of rows visible | number | no | iOS/Android | yes | +| onChange | Change item event callback | (item: string \| number, index: number) => void | no | iOS/Android | yes | +| separatorsStyle | Extra style for the separators | ViewStyle | no | iOS/Android | yes | +| style | height is computed according to itemHeight * numberOfVisibleRows. Container's custom style | ViewStyle | no | iOS/Android | yes | +| testID | test identifier | string | no | iOS/Android | yes | +| textStyle | Row text custom style | TextStyle | no | iOS/Android | yes | + +**Incubator.Dialog**：弹出对话框组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | ----------------------------- | -------- | ----------- | ----------------- | +| containerProps | Extra props for the container | ViewProps | no | iOS/Android | yes | +| containerStyle | The Dialog`s container style (it is set to {position: 'absolute'}) `ViewStyle ` | ViewStyle | no | iOS/Android | yes | +| direction | The direction from which and to which the dialog is animating \ panning (default down). | up \|down \|left \|right | no | iOS/Android | yes | +| headerProps | The Dialog's header (title, subtitle etc) | DialogHeaderProps | no | iOS/Android | yes | +| ignoreBackgroundPress | Whether or not to ignore background press. | boolean | no | iOS/Android | yes | +| modalProps | Pass props to the dialog modal | ModalProps | no | iOS/Android | yes | +| onDismiss | Callback that is called after the dialog's dismiss (after the animation has ended). | (props?: DialogProps) => void | no | iOS/Android | yes | +| testID | Used to locate this view in end-to-end tests.The container has the original id.Supported inner elements IDs:`${TestID}.modal` - the Modal's id.`${TestID}. overlayFadingBackground` - the fading background id. | string | no | iOS/Android | yes | +| visible | The visibility of the dialog | boolean | no | iOS/Android | yes | + +**Dialog.Header**：弹窗头部组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | -------------------- | -------- | ----------- | ----------------- | +| bottomAccessory | Pass to render a bottom element below the subtitle | ReactElement | no | iOS/Android | yes | +| contentContainerStyle | Style for the leading + content + trailing components (without the bottomAccessory) | ViewProps['style'] | no | iOS/Android | yes | +| leadingAccessory | Pass to render a leading element | ReactElement | no | iOS/Android | yes | +| onPress | onPress callback for the inner content | () => void | no | iOS/Android | yes | +| showDivider | Show the header's divider | boolean | no | iOS/Android | yes | +| showKnob | Show the header's knob | boolean | no | iOS/Android | yes | +| subtitle | Subtitle | string | no | iOS/Android | yes | +| subtitleProps | Subtitle extra props | TextProps | no | iOS/Android | yes | +| subtitleStyle | Subtitle text style | StyleProp | no | iOS/Android | yes | +| title | Title | string | no | iOS/Android | yes | +| titleProps | Title extra props | TextProps | no | iOS/Android | yes | +| titleStyle | Title text style | StyleProp | no | iOS/Android | yes | +| topAccessory | Pass to render a top element above the title | ReactElement | no | iOS/Android | yes | +| trailingAccessory | Pass to render a trailing element | ReactElement | no | iOS/Android | yes | + +**Incubator.Slider**：滑块组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------- | ------------------------------------------------------------ | ------------------------------------- | -------- | ----------- | ----------------- | +| accessible | If true the component will have accessibility features enabled | boolean | no | iOS/Android | yes | +| activeThumbStyle | The active (during press) thumb style | ViewStyle | no | iOS/Android | yes | +| containerStyle | The container style | ViewStyle | no | iOS/Android | yes | +| disableActiveStyling | If true the Slider will not change it's style on press | boolean | no | iOS/Android | yes | +| disableRTL | If true the Slider will stay in LTR mode even if the app is on RTL mode | boolean | no | iOS/Android | yes | +| disabled | If true the Slider will be disabled and will appear in disabled color | boolean | no | iOS/Android | yes | +| disabledThumbTintColor | Disabled thumb color | string | no | iOS/Android | yes | +| enableThumbShadow | Whether the thumb will have a shadow (with 'migrate' true only) | boolean | no | iOS/Android | yes | +| initialMaximumValue | Only when `useRange` is true. Initial maximum value | number | no | iOS/Android | yes | +| initialMinimumValue | Only when `useRange` is true. Initial minimum value | number | no | iOS/Android | yes | +| maximumTrackTintColor | The track color | string | no | iOS/Android | yes | +| maximumValue | Track maximum value | number | no | iOS/Android | yes | +| minimumTrackTintColor | The color used for the track from minimum value to current value | string | no | iOS/Android | yes | +| minimumValue | Track minimum value | number | no | iOS/Android | yes | +| onRangeChange | Callback for onRangeChange. Returns values object with the min and max values | SliderOnRangeChange | no | iOS/Android | yes | +| onReset | Callback that notifies when the reset function was invoked | () => void | no | iOS/Android | yes | +| onSeekEnd | Callback that notifies about slider seeking is finished | () => void | no | iOS/Android | yes | +| onSeekStart | Callback that notifies about slider seeking is started | () => void | no | iOS/Android | yes | +| onValueChange | Callback for onValueChange | SliderOnValueChange | no | iOS/Android | yes | +| renderTrack | Custom render instead of rendering the track | () => ReactElement \| ReactElement[] | no | iOS/Android | yes | +| step | Step value of the slider. The value should be between 0 and (maximumValue - minimumValue) | number | no | iOS/Android | yes | +| testID | The component test id | string | no | iOS/Android | yes | +| throttleTime | Control the throttle time of the onValueChange and onRangeChange callbacks | number | no | iOS/Android | yes | +| thumbHitSlop | Defines how far a touch event can start away from the thumb | number | no | iOS/Android | yes | +| thumbStyle | The thumb style | ViewStyle | no | iOS/Android | yes | +| thumbTintColor | Thumb color | string | no | iOS/Android | yes | +| trackStyle | The track style | ViewStyle | no | iOS/Android | yes | +| useGap | If true the min and max thumbs will not overlap | boolean | no | iOS/Android | yes | +| useRange | If true the Slider will display a second thumb for the min value | boolean | no | iOS/Android | yes | +| value | Initial value | number | no | iOS/Android | yes | + +**Incubator.Toast**：非中断式弹窗组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| action | A single action for the user (showLoader will override this) | ButtonProps | no | iOS/Android | yes | +| autoDismiss | Time of milliseconds to automatically invoke the onDismiss callback | number | no | iOS/Android | yes | +| backgroundColor | The toast background color | string | no | iOS/Android | yes | +| centerMessage | Should message be centered in the toast | boolean | no | iOS/Android | yes | +| containerStyle | Toast container style | ViewStyle | no | iOS/Android | yes | +| elevation | Android only. Custom elevation | number | no | Android | no | +| enableHapticFeedback | Whether to trigger an haptic feedback once the toast is shown (requires react-native-haptic-feedback dependency) | boolean | no | iOS/Android | yes | +| icon | A custom icon to render on the left side of the toast | ImageSourcePropType | no | iOS/Android | yes | +| iconColor | The icon color | string | no | iOS/Android | yes | +| message | Toast message | string | no | iOS/Android | yes | +| messageProps | Toast message props | TextProps | no | iOS/Android | yes | +| messageStyle | Toast message style | StyleProp | no | iOS/Android | yes | +| onAnimationEnd | Callback for end of toast animation | (visible?: boolean) => void | no | iOS/Android | yes | +| onDismiss | Callback for the toast dismissal | () => void | no | iOS/Android | yes | +| position | The position of the toast. 'top' or 'bottom'. | 'top' \| 'bottom' | no | iOS/Android | yes | +| preset | Pass to have preset UI | ToastPreset ('success' \| 'failure' \| 'general' \| 'offline') | no | iOS/Android | yes | +| renderAttachment | Render a custom view that will appear permanently above or below a Toast, depends on the Toast's position and animate with it when the Toast is made visible or dismissed | () => JSX.Element \| undefined | no | iOS/Android | yes | +| showLoader | Whether to show a loader | boolean | no | iOS/Android | yes | +| style | Toast style | ViewStyle | no | iOS/Android | yes | +| swipeable | Whether to support dismissing the toast with a swipe gesture. Requires to pass onDismiss method to control visibility | boolean | no | iOS/Android | yes | +| testID | The component test id | string | no | iOS/Android | yes | +| visible | Whether to show or hide the toast | boolean | no | iOS/Android | yes | +| zIndex | Custom zIndex for toast | number | no | iOS/Android | yes | + +**Dash**：阔折现组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | ------------------------------------- | --------- | -------- | ----------- | ----------------- | +| color | The color of the dashes | string | no | iOS/Android | yes | +| containerStyle | The container style | ViewStyle | no | iOS/Android | yes | +| gap | The gap between the dashes | number | no | iOS/Android | yes | +| length | The length of the dashes | number | no | iOS/Android | yes | +| style | Additional style to the dashes | ViewStyle | no | iOS/Android | yes | +| thickness | The thickness of the dashes | number | no | iOS/Android | yes | +| vertical | Is the dashed line should be vertical | boolean | no | iOS/Android | yes | + +**ExpandableSection**：展开收起组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | -------------------------------------------------------- | --------------- | -------- | ----------- | ----------------- | +| children | The expandable's children | React.ReactNode | no | iOS/Android | yes | +| expanded | Should the ExpandableSection be expanded | boolean | no | iOS/Android | yes | +| onPress | Called when pressing the header of the ExpandableSection | () => void | no | iOS/Android | yes | +| sectionHeader | Header element | JSX.Element | no | iOS/Android | yes | +| testID | testing identifier | string | no | iOS/Android | yes | +| top | Should it open above the 'sectionHeader' | boolean | no | iOS/Android | yes | + +**Fader**：渐变淡入淡出组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------- | -------------------------------------------------- | ------------------------------ | -------- | ----------- | ----------------- | +| position | The position of the fader (the image is different) | START \|END \| TOP \| BOTTOM | no | iOS/Android | yes | +| size | change the size of the fade view | number | no | iOS/Android | yes | +| tintColor | Change the tint color of the fade view | string | no | iOS/Android | yes | +| visible | Whether the fader is visible (default is true) | boolean | no | iOS/Android | yes | + +**Gradient**：渐变色组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | --------------------------------- | ------------- | -------- | ----------- | ----------------- | +| color | The color of the gradient | string | no | iOS/Android | yes | +| numberOfSteps | The number of steps | number | no | iOS/Android | yes | +| style | Additional style to the component | ViewStyle | no | iOS/Android | yes | +| type | hue \| lightness \| saturation | GradientTypes | no | iOS/Android | yes | + +**KeyboardAccessoryView**：键盘附件视图。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | ------------------------ | -------- | ----------- | ----------------- | +| kbComponent | The keyboard ID (the componentID sent to KeyboardRegistry) | string | no | iOS/Android | no | +| kbInitialProps | The props that will be sent to the KeyboardComponent | any | no | iOS/Android | no | +| kbInputRef | iOS only. The reference to the actual text input (or the keyboard may not reset when instructed to, etc.). | any | no | iOS | no | +| onHeightChanged | A callback for when the height is changed | (height: number) => void | no | iOS/Android | no | +| onItemSelected | Callback that will be called when an item on the keyboard has been pressed. | () => void | no | iOS/Android | no | +| onKeyboardResigned | Callback that will be called once the keyboard has been closed | () => void | no | iOS/Android | no | +| onRequestShowKeyboard | Callback that will be called if KeyboardRegistry.requestShowKeyboard is called. | () => void | no | iOS/Android | no | +| renderContent | Content to be rendered above the keyboard | () => React.ReactElement | no | iOS/Android | yes | + +**KeyboardAwareInsetsView**：用于在使用键盘时添加插入，可能会隐藏部分屏幕，该组件扩展了[KeyboardTrackingView](https://wix.github.io/react-native-ui-lib/docs/components/infra/KeyboardTrackingView)属性，此组件仅适用与iOS。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------- | ------------------------------------------------------------ | --------- | -------- | -------- | ----------------- | +| KeyboardAwareInsetsView | Used to add an inset when a keyboard is used and might hide part of the screen. | Component | no | iOS | no | + +**KeyboardRegistry**：用于注册键盘并在键盘上执行某些操作。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | --------------- | -------- | ----------- | ----------------- | +| addListener | Add a listener for a callback. globalID (string) - ID that includes the componentID and the event name (i.e. if componentID='kb1' globalID='kb1.onItemSelected') callback (function) - the callback to be called when the said event happens | static function | no | iOS/Android | yes | +| getAllKeyboards | Get all keyboards | static function | no | iOS/Android | yes | +| getKeyboard | Get a specific keyboard componentID (string) - the ID of the keyboard. | static function | no | iOS/Android | yes | +| getKeyboards | Get keyboards by IDs componentIDs (string[]) - the ID of the keyboard. | static function | no | iOS/Android | yes | +| notifyListeners | Notify that an event has occurred. globalID (string) - ID that includes the componentID and the event name (i.e. if componentID='kb1' globalID='kb1.onItemSelected') args (object) - data to be sent to the listener. | static function | no | iOS/Android | yes | +| onItemSelected | Default event to be used for when an item on the keyboard has been pressed. componentID (string) - the ID of the keyboard. args (object) - data to be sent to the listener. | static function | no | iOS/Android | yes | +| registerKeyboard | Register a new keyboard. componentID (string) - the ID of the keyboard. generator (function) - a function for the creation of the keyboard. params (object) - to be returned when using other methods (i.e. getKeyboards and getAllKeyboards). | static function | no | iOS/Android | yes | +| removeListeners | Remove a listener for a callback. globalID (string) - ID that includes the componentID and the event name (i.e. if componentID='kb1' globalID='kb1.onItemSelected') | static function | no | iOS/Android | yes | +| requestShowKeyboard | Request to show the keyboard componentID (string) - the ID of the keyboard. | static function | no | iOS/Android | yes | + +**KeyboardTrackingView**：为该视图及其子视图启用“键盘跟踪”的 UI 组件。通常用于该视图内有 TextField 或 TextInput 的情况，该组件仅适用于iOS。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------------ | ------------------------------------------------------------ | --------- | -------- | -------- | ----------------- | +| addBottomView | Add a view beneath the KeyboardAccessoryView. | boolean | no | iOS | no | +| allowHitsOutsideBounds | Allow hitting sub-views that are placed beyond the view bounds. | boolean | no | iOS | no | +| bottomViewColor | The bottom view's color. | string | no | iOS | no | +| manageScrollView | Set to false to turn off inset management and manage it yourself. | boolean | no | iOS | no | +| ref | Ref | any | no | iOS | no | +| requiresSameParentToManageScrollView | Set to true manageScrollView is set to true and still does not work, it means that the ScrollView found is the wrong one and you'll have to have the KeyboardAccessoryView and the ScrollView as siblings and set this to true. | boolean | no | iOS | no | +| revealKeyboardInteractive | Show the keyboard on a negative scroll. | boolean | no | iOS | no | +| scrollBehavior | The scrolling behavior (use KeyboardTrackingView. scrollBehaviors.NONE \|SCROLL_TO_BOTTOM_INVERTED_ONLY \| FIXED_OFFSET) | number | no | iOS | no | +| scrollToFocusedInput | Should the scrollView scroll to the focused input | boolean | no | iOS | no | +| style | Style | ViewStyle | no | iOS | no | +| trackInteractive | Enables tracking of the keyboard when it's dismissed interactively (false by default). Why? When using an external keyboard (BT), you still get the keyboard events and the view just hovers when you focus the input. Also, if you're not using interactive style of dismissing the keyboard (or if you don't have an input inside this view) it doesn't make sense to track it anyway. (This is caused because of the usage of inputAccessory to be able to track the keyboard interactive change and it introduces this bug) | boolean | no | iOS | no | +| useSafeArea | Whether or not to handle SafeArea. | boolean | no | iOS | no | +| usesBottomTabs | Whether or not to include bottom tab bar inset. | boolean | no | iOS | no | + +**Overlay**：带类型覆盖视图，为Image组件属性，扩展了[image](https://reactnative.dev/docs/image)组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | --------------------------------------------------------- | ----------------------------------------------------- | -------- | ----------- | ----------------- | +| color | The overlay color | string | no | iOS/Android | yes | +| customContent | Custom overlay content to be rendered on top of the image | JSX.Element | no | iOS/Android | yes | +| intensity | The intensity of the gradient. | low \|medium \|high | no | iOS/Android | yes | +| type | The type of overlay to set on top of the image | vertical \| top \| bottom \| solid (OverlayTypeType) | no | iOS/Android | yes | + +**Card**：卡片组件，扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)组件，依赖[@react-native-community/blur](/zh-cn/react-native-community-blur.md)。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------------------------ | -------------------- | -------- | ----------- | ----------------- | +| blurOptions | Blur options for blur effect according to @react-native-community/blur lib (make sure enableBlur is on) | object | no | iOS/Android | yes | +| borderRadius | Card border radius (will be passed to inner Card.Image component) | number | no | iOS/Android | yes | +| containerStyle | Additional styles for the card container | ViewStyle | no | iOS/Android | yes | +| elevation | Android only. Elevation value | number | no | Android | no | +| enableBlur | iOS only. Enable blur effect | boolean | no | iOS | no | +| enableShadow | Whether the card should have shadow or not | boolean | no | iOS/Android | yes | +| height | Card custom height | number \| string | no | iOS/Android | yes | +| onPress | Callback function for card press event | function | no | iOS/Android | yes | +| row | Should inner card flow direction be horizontal | boolean | no | iOS/Android | yes | +| selected | Adds visual indication that the card is selected | boolean | no | iOS/Android | yes | +| selectionOptions | Custom options for styling the selection indication | CardSelectionOptions | no | iOS/Android | yes | +| width | Card custom width | number \| string | no | iOS/Android | yes | + +**Card.Image**：Card 组件的内部组件（最好是直接子组件），扩展了[Image](https://wix.github.io/react-native-ui-lib/docs/components/media/Image)组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| height | Height | number | no | iOS/Android | yes | +| position | The Image position which determines the appropriate flex-ness of the image and border radius (for Android) this prop derived automatically from Card parent component if it rendered as a direct child of the Card component | string[] | no | iOS/Android | yes | +| width | Width | number | no | iOS/Android | yes | + +**Card.Section**：用于在 Card 组件内轻松渲染内容的内部组件，扩展了[View](https://wix.github.io/react-native-ui-lib/docs/components/basic/View)组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | ------------------- | -------- | ----------- | ----------------- | +| backgroundColor | Background color | string | no | iOS/Android | yes | +| content | Text content. Example: content={[{text: 'You’re Invited!', text70: true, grey10: true}]} | ContentType[] | no | iOS/Android | yes | +| contentStyle | Component's container style | ViewStyle | no | iOS/Android | yes | +| imageProps | Other image props that will be passed to the image | ImageProps | no | iOS/Android | yes | +| imageSource | Will be used for the background when provided | ImageSourcePropType | no | iOS/Android | yes | +| imageStyle | The style for the background image | ImageStyle | no | iOS/Android | yes | +| leadingIcon | Image props for a leading icon to render before the text | ImageProps | no | iOS/Android | yes | +| trailingIcon | Image props for a trailing icon to render after the text | ImageProps | no | iOS/Android | yes | + +**Carousel**：轮播组件，扩展了[ScrollView](https://reactnative.dev/docs/scrollview)组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------ | --------------------------------------- | -------- | ----------- | ----------------- | +| allowAccessibleLayout | Whether to layout Carousel for accessibility | boolean | no | iOS/Android | yes | +| animated | Should the container be animated (send the animation style via containerStyle) | boolean | no | iOS/Android | yes | +| animatedScrollOffset | Pass to attach to ScrollView's Animated.event in order to animated elements base on Carousel scroll offset (pass new Animated.ValueXY()) | Animated.ValueXY | no | iOS/Android | yes | +| autoplay | Enable to switch automatically between the pages | boolean | no | iOS/Android | yes | +| autoplayInterval | Time is ms to wait before switching to the next page (requires 'autoplay' to be enabled) | number | no | iOS/Android | yes | +| containerMarginHorizontal | Horizontal margin for the carousel container | number | no | iOS/Android | yes | +| containerPaddingVertical | Vertical padding for the carousel container (Sometimes needed when there are overflows that are cut in Android). | number | no | iOS/Android | yes | +| containerStyle | The carousel container style | ViewStyle | no | iOS/Android | yes | +| counterTextStyle | The counter's text style | ViewStyle | no | iOS/Android | yes | +| horizontal | Whether pages will be rendered horizontally or vertically | boolean | no | iOS/Android | yes | +| initialPage | The initial page to start at | number | no | iOS/Android | yes | +| itemSpacings | The spacing between the pages | number | no | iOS/Android | yes | +| loop | If true, will have infinite scroll (works only for horizontal carousel) | boolean | no | iOS/Android | yes | +| onChangePage | Callback for page change event | (pageIndex, oldPageIndex, info) => void | no | iOS/Android | yes | +| onScroll | Attach a callback for onScroll event of the internal ScrollView | function | no | iOS/Android | yes | +| pageControlPosition | The position of the PageControl component ['over', 'under'], otherwise it won't display | PageControlPosition | no | iOS/Android | yes | +| pageControlProps | PageControl component props | PageControlProps | no | iOS/Android | yes | +| pageHeight | The page height (all pages should have the same height). | number | no | iOS/Android | yes | +| pageWidth | The page width (all pages should have the same width). Does not work if passing 'loop' prop | number | no | iOS/Android | yes | +| pagingEnabled | Will block multiple pages scroll (will not work with 'pageWidth' prop) | boolean | no | iOS/Android | yes | +| showCounter | Whether to show a page counter (will not work with 'pageWidth' prop) | boolean | no | iOS/Android | yes | + +**LoaderScreen**：全屏显示组件，通常用于页面加载loading，扩展了[Activityindicator](https://reactnative.dev/docs/activityindicator)组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | ---------------- | -------- | ----------- | ----------------- | +| backgroundColor | Color of the loader background (only when passing 'overlay') | string | no | iOS/Android | yes | +| containerStyle | Custom container style | ViewStyle | no | iOS/Android | yes | +| customLoader | Custom loader | React.ReactChild | no | iOS/Android | yes | +| loaderColor | Color of the loading indicator | string | no | iOS/Android | yes | +| message | loader message | string | no | iOS/Android | yes | +| messageStyle | message style | TextStyle | no | iOS/Android | yes | +| overlay | Show the screen as an absolute overlay | boolean | no | iOS/Android | yes | + +**StackAggregator**：堆栈聚合器组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | ---------------------------- | -------- | ----------- | ----------------- | +| buttonProps | Props passed to the 'show less' button | ButtonProps | no | iOS/Android | yes | +| children | Component Children | JSX.Element \| JSX.Element[] | no | iOS/Android | yes | +| collapsed | The initial state of the stack | boolean | no | iOS/Android | yes | +| containerStyle | The container style | ViewStyle | no | iOS/Android | yes | +| contentContainerStyle | The content container style | ViewStyle | no | iOS/Android | yes | +| disablePresses | A setting that disables pressability on cards | boolean | no | iOS/Android | yes | +| itemBorderRadius | The items border radius | number | no | iOS/Android | yes | +| onCollapseChanged | A callback for collapse state change (value is collapsed state) | (changed: boolean) => void | no | iOS/Android | yes | +| onCollapseWillChange | A callback for collapse state will change (value is future collapsed state) | (changed: boolean) => void | no | iOS/Android | yes | +| onItemPress | A callback for item press | (index: number) => void | no | iOS/Android | yes | + +**StateScreen**：显示全屏组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | ------------------------------------------------------------ | -------------- | -------- | ----------- | ----------------- | +| ctaLabel | Text to to show in the CTA button | string | no | iOS/Android | yes | +| imageSource | The image source that's showing at the top. use an image that was required locally | ImageURISource | no | iOS/Android | yes | +| onCtaPress | Action handler for CTA button | () => void | no | iOS/Android | yes | +| testID | Use to identify the container in tests | string | no | iOS/Android | yes | +| title | To to show as the title | string | no | iOS/Android | yes | + +**Drawer**：抽屉组件，如果您的应用程序与 RNN 配合使用，则您的屏幕必须使用“react-native-gesture-handler”中的gestureHandlerRootHOC 进行包装。请参阅[这里](https://kmagiera.github.io/react-native-gesture-handler/docs/getting-started.html#with-wix-react-native-navigation-https-githubcom-wix-react-native-navigation)。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------ | ----------------------------------------------------- | -------- | ----------- | ----------------- | +| bounciness | The drawer animation bounciness | number | no | iOS/Android | yes | +| customValue | Custom value of any type to pass on to the component and receive back in the action callbacks | any | no | iOS/Android | yes | +| disableHaptic | Whether to disable the haptic | boolean | no | iOS/Android | yes | +| fullLeftThreshold | Threshold for a left full swipe (0-1) | number | no | iOS/Android | yes | +| fullRightThreshold | Threshold for a right full swipe (0-1) | number | no | iOS/Android | yes | +| fullSwipeLeft | Whether to allow a full left swipe | boolean | no | iOS/Android | yes | +| fullSwipeRight | Whether to allow a full right swipe | boolean | no | iOS/Android | yes | +| itemsIconSize | The items' icon size | number | no | iOS/Android | yes | +| itemsMinWidth | Set a different minimum width | number | no | iOS/Android | yes | +| itemsTextStyle | The items' text style | TextStyle | no | iOS/Android | yes | +| itemsTintColor | The color for the text and icon tint of the items | string | no | iOS/Android | yes | +| leftItem | The bottom layer's item to appear when opened from the left (a single item) | ItemProps | no | iOS/Android | yes | +| onDragStart | Called when drag gesture starts | () => any | no | iOS/Android | yes | +| onFullSwipeLeft | Callback for left item full swipe | () => void | no | iOS/Android | yes | +| onFullSwipeRight | Callback for right item full swipe | () => void | no | iOS/Android | yes | +| onSwipeableWillClose | Callback for close action | () => void | no | iOS/Android | yes | +| onSwipeableWillOpen | Callback for open action | () => void | no | iOS/Android | yes | +| onToggleSwipeLeft | Callback for left item toggle swipe | () => {rowWidth, leftWidth, dragX, resetItemPosition} | no | iOS/Android | yes | +| onWillFullSwipeLeft | Callback for just before left item full swipe | () => void | no | iOS/Android | yes | +| onWillFullSwipeRight | Callback for just before right item full swipe | () => void | no | iOS/Android | yes | +| rightItems | The bottom layer's items to appear when opened from the right | ItemProps[] | no | iOS/Android | yes | +| style | Component's style | ViewStyle | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| useNativeAnimations | Perform the animation in natively | boolean | no | iOS/Android | yes | + +**GridList**：网格列表组件，扩展了[FlatList](https://reactnative.dev/docs/flatlist)组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | ----------------------------------- | -------- | ----------- | ----------------- | +| containerWidth | Pass when you want to use a custom container width for calculation | number | no | iOS/Android | yes | +| contentContainerStyle | Custom content container style | ScrollView[ contentContainerStyle ] | no | iOS/Android | yes | +| itemSpacing | Spacing between each item | number | no | iOS/Android | yes | +| keepItemSize | whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically. | boolean | no | iOS/Android | yes | +| listPadding | List padding (used for item size calculation) | number | no | iOS/Android | yes | +| maxItemWidth | Allow a responsive item width to the maximum item width | number | no | iOS/Android | yes | +| numColumns | Number of items to show in a row (ignored when passing maxItemWidth) | number | no | iOS/Android | yes | + +**GridListItem**：单个网格视图/列表项组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ----------------------------------------------------------- | ---------------------------------- | -------- | ----------- | ----------------- | +| alignToStart | Should content be align to start | boolean | no | iOS/Android | yes | +| containerProps | Props to pass on to the touchable container | TouchableOpacityProps \| ViewProps | no | iOS/Android | yes | +| containerStyle | Custom container style | ViewStyle | no | iOS/Android | yes | +| description | Description content text | string \| React.ReactElement | no | iOS/Android | yes | +| descriptionColor | Description content color | string | no | iOS/Android | yes | +| descriptionLines | Description content number of lines | number | no | iOS/Android | yes | +| descriptionTypography | Description content typography | string | no | iOS/Android | yes | +| horizontalAlignment | Content horizontal alignment | HorizontalAlignment | no | iOS/Android | yes | +| imageProps | Image props object for rendering an image item | ImageProps | no | iOS/Android | yes | +| itemSize | The item size | number \| ImageSize | no | iOS/Android | yes | +| onPress | The item's action handler | TouchableOpacityProps ['onPress'] | no | iOS/Android | yes | +| overlayText | Renders the title, subtitle and description inside the item | boolean | no | iOS/Android | yes | +| overlayTextContainerStyle | Custom container styling for inline text | ViewStyle | no | iOS/Android | yes | +| renderCustomItem | Custom GridListItem to be rendered in the GridView | () => React.ReactElement | no | iOS/Android | yes | +| renderOverlay | Renders an overlay on top of the image | () => React.ReactElement | no | iOS/Android | yes | +| subtitle | Subtitle content text | string \| React.ReactElement | no | iOS/Android | yes | +| subtitleColor | Subtitle content color | string | no | iOS/Android | yes | +| subtitleLines | Subtitle content number of lines | number | no | iOS/Android | yes | +| subtitleTypography | Subtitle content typography | string | no | iOS/Android | yes | +| testID | Test ID for component | string | no | iOS/Android | yes | +| title | Title content text | string \| React.ReactElement | no | iOS/Android | yes | +| titleColor | Title content color | string | no | iOS/Android | yes | +| titleLines | Title content number of lines | number | no | iOS/Android | yes | +| titleTypography | Title content typography | string | no | iOS/Android | yes | + +**GridView**：网格视图组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------ | ----------------------------------------------- | -------- | ----------- | ----------------- | +| itemSpacing | Spacing between each item | number | no | iOS/Android | yes | +| items | The list of items based on GridListItem props | GridListItemProps[] | no | iOS/Android | yes | +| keepItemSize | whether to keep the items initial size when orientation changes, in which case the apt number of columns will be calculated automatically. | boolean | no | iOS/Android | yes | +| lastItemLabel | overlay label for the last item | string \| number | no | iOS/Android | yes | +| lastItemOverlayColor | color of overlay label for the last item | string | no | iOS/Android | yes | +| numColumns | Number of items to show in a row | number | no | iOS/Android | yes | +| renderCustomItem | Pass to render a custom item | (item: GridListItemProps) => React.ReactElement | no | iOS/Android | yes | +| viewWidth | pass the desired grid view width (will improve loading time) | number | no | iOS/Android | yes | + +**ListItem**：列表中列表项组件，该组件扩展了[TouchableOpacity](https://reactnative.dev/docs/touchableopacity)属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| containerElement | The container element to wrap the ListItem | React.ComponentType | no | iOS/Android | yes | +| containerStyle | Additional styles for the top container | ViewStyle | no | iOS/Android | yes | +| height | the list item height | ViewStyle['height'] | no | iOS/Android | yes | +| onLongPress | action for when long pressing the item | () => void | no | iOS/Android | yes | +| onPress | action for when pressing the item | () => void | no | iOS/Android | yes | +| style | The inner element style | ViewStyle | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| underlayColor | The inner element pressed backgroundColor | string | no | iOS/Android | yes | + +**ListItem.Part**：用于在 ListItem 内进行布局的子 ListItem 组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | --------------------------------------------- | --------- | -------- | ----------- | ----------------- | +| column | this part content direction will be column | boolean | no | iOS/Android | yes | +| containerStyle | container style | ViewStyle | no | iOS/Android | yes | +| left | this part content will be aligned to left | boolean | no | iOS/Android | yes | +| middle | this part content will be aligned to spreaded | boolean | no | iOS/Android | yes | +| right | this part content will be aligned to right | boolean | no | iOS/Android | yes | +| row | this part content direction will be row | boolean | no | iOS/Android | yes | + +**SortableGridList**：可排序网格列表组件，该组件扩展了[GridList](https://wix.github.io/react-native-ui-lib/docs/components/lists/GridList)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | ------------------------------------------------------------ | -------------------------------------------- | -------- | ----------- | ----------------- | +| data | Do not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item). Data of items with an id prop as unique identifier | any[] & {id: string} | no | iOS/Android | yes | +| extraData | Pass any extra data that should trigger a re-render | any | no | iOS/Android | yes | +| onOrderChange | Order change callback | (newData: T[], newOrder: ItemsOrder) => void | no | iOS/Android | yes | +| renderItem | Custom render item callback | FlatListProps ['renderItem'] | no | iOS/Android | yes | + +**SortableList**：可排序列表组件，该组件扩展了[FlatList](https://reactnative.dev/docs/flatlist)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| data | Do not update 'data' in 'onOrderChange' (i.e. for each order change); only update it when you change the items (i.g. adding and removing an item).The data of the list, with an id prop as unique identifier. | ItemT[] (ItemT extends {id: string}) | no | iOS/Android | yes | +| enableHaptic | Whether to enable the haptic feedback. (please note that react-native-haptic-feedback does not support the specific haptic type on Android starting on an unknown version, you can use 1.8.2 for it to work properly) | boolean | no | iOS/Android | yes | +| itemProps | Extra props for the item. | {margins?: {marginTop?: number; marginBottom?: number; marginLeft?: number; marginRight?: number}} | no | iOS/Android | yes | +| onOrderChange | A callback to get the new order (or swapped items). | (data: ItemT[]) => void | no | iOS/Android | yes | +| scale | Scale the item once dragged. | number | no | iOS/Android | yes | + +**Timeline**：时间线组件，该组件扩展了[View](https://reactnative.dev/docs/view)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | ---------------------------------- | -------- | ----------- | ----------------- | +| backgroundColor | Background color for the item | string | no | iOS/Android | yes | +| bottomLine | The bottom line props | LineProps | no | iOS/Android | yes | +| point | The point props | PointProps | no | iOS/Android | yes | +| renderContent | Custom content to render right to the timeline indicator | any | no | iOS/Android | yes | +| state | The state of the timeline. Will affect the color of the indication (use static 'states') | current \| next \| error \|success | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| topLine | The top line props | LineProps | no | iOS/Android | yes | + +**AnimatedImage**：图像加载后以动画淡入的图像组件，该组件扩展了[Image](https://wix.github.io/react-native-ui-lib/docs/components/media/Image)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | -------------------------------------------------------- | ----------- | -------- | ----------- | ----------------- | +| animationDuration | Duration for the fade animation when the image is loaded | number | no | iOS/Android | yes | +| containerStyle | Additional spacing styles for the container | ViewStyle | no | iOS/Android | yes | +| loader | A component to render while the image is loading | JSX.element | no | iOS/Android | yes | + +**AnimatedScanner**：该组件扩展了[Animated.View](https://reactnative.dev/docs/animated)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | -------------------------------------------------------- | ---------------------------- | -------- | ----------- | ----------------- | +| backgroundColor | Background color | string | no | iOS/Android | yes | +| containerStyle | Component's container style | ViewStyle | no | iOS/Android | yes | +| duration | Duration of current break (can be change between breaks) | number | no | iOS/Android | yes | +| hideScannerLine | Whether to hide the scanner line | boolean | no | iOS/Android | yes | +| onBreakpoint | Breakpoint callback | ({progress, isDone}) => void | no | iOS/Android | yes | +| opacity | Opacity | number | no | iOS/Android | yes | +| progress | Animated value between 0 and 100 | number | no | iOS/Android | yes | +| testID | Used as a testing identifier | string | no | iOS/Android | yes | + +**Avatar**：头像组件，该组件扩展了[TouchableOpacity](https://wix.github.io/react-native-ui-lib/docs/components/basic/TouchableOpacity)，[Image](https://wix.github.io/react-native-ui-lib/docs/components/media/Image)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ------------------------------------------------------------ | ------------------------------------------------- | -------- | ----------- | ----------------- | +| animate | Adds fade in animation when Avatar image loads | boolean | no | iOS/Android | yes | +| autoColorsConfig | Send this to use the name to infer a backgroundColor | AutoColorsProps | no | iOS/Android | yes | +| backgroundColor | Background color for Avatar | string | no | iOS/Android | yes | +| badgePosition | Badge location on Avatar | TOP_RIGHT \|TOP_LEFT \|BOTTOM_RIGHT \|BOTTOM_LEFT | no | iOS/Android | yes | +| badgeProps | Badge props passed down to Badge component | BadgeProps | no | iOS/Android | yes | +| containerStyle | Additional spacing styles for the container | ViewStyle | no | iOS/Android | yes | +| customRibbon | Custom ribbon | JSX.Element | no | iOS/Android | yes | +| imageProps | Image props object | ImageProps | no | iOS/Android | yes | +| imageStyle | Image style object used to pass additional style props by components which render image | ImageStyle | no | iOS/Android | yes | +| isOnline | Determine if to show online badge | boolean | no | iOS/Android | yes | +| label | Label that can represent initials | string | no | iOS/Android | yes | +| labelColor | The label color | string | no | iOS/Android | yes | +| name | The name of the avatar user. If no label is provided, the initials will be generated from the name. autoColorsConfig will use the name to create the background color of the Avatar. | string | no | iOS/Android | yes | +| onImageLoadEnd | Listener-callback for when an image's (uri) loading either succeeds or fails (equiv. to Image.onLoadEnd()). | ImagePropsBase ['onLoadEnd'] | no | iOS/Android | yes | +| onImageLoadError | Listener-callback for when an image's (uri) loading fails (equiv. to Image.onError()). | ImagePropsBase ['onError'] | no | iOS/Android | yes | +| onImageLoadStart | Listener-callback for when an image's (uri) loading starts (equiv. to Image.onLoadStart()). | ImagePropsBase ['onLoadStart'] | no | iOS/Android | yes | +| onPress | Press handler | (props: any) => void | no | iOS/Android | yes | +| ribbonLabel | Ribbon label to display on the avatar | string | no | iOS/Android | yes | +| ribbonLabelStyle | Ribbon label custom style | TextStyle | no | iOS/Android | yes | +| ribbonStyle | Ribbon custom style | ViewStyle | no | iOS/Android | yes | +| size | Custom size for the Avatar | number | no | iOS/Android | yes | +| source | The image source (external or from assets) | ImageSourcePropType | no | iOS/Android | yes | +| status | AWAY, ONLINE, OFFLINE or NONE mode (if set to a value other then 'NONE' will override isOnline prop) | StatusModes | no | iOS/Android | yes | +| testID | Test identifier | string | no | iOS/Android | yes | +| useAutoColors | Hash the name (or label) to get a color, so each name will have a specific color. Default is false. | boolean | no | iOS/Android | yes | + +**Icon**：图标组件，该组件扩展了[Image](https://reactnative.dev/docs/image)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------- | -------------------------------------------------------- | ----------------- | -------- | ----------- | ----------------- | +| assetGroup | the asset group, default is icons | string | no | iOS/Android | yes | +| assetName | if provided icon source will be driven from asset name | string | no | iOS/Android | yes | +| recorderTag | Recorder Tag | 'mask' \|'unmask' | no | iOS/Android | yes | +| size | The icon size | number | no | iOS/Android | yes | +| supportRTL | whether the image should flip horizontally on RTL locals | boolean | no | iOS/Android | yes | +| tintColor | The icon tint | string | no | iOS/Android | yes | + +**Image**：图片组件，该组件扩展了[Image](https://reactnative.dev/docs/image)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------- | ------------------------------------------------------------ | ----------------------------------- | -------- | ----------- | ----------------- | +| aspectRatio | The aspect ratio for the image | number | no | iOS/Android | yes | +| assetGroup | the asset group, default is icons | string | no | iOS/Android | yes | +| assetName | if provided image source will be driven from asset name | string | no | iOS/Android | yes | +| cover | Show image as a cover, full width, image (according to aspect ratio, default: 16:8) | boolean | no | iOS/Android | yes | +| customOverlayContent | Render an overlay with custom content | JSX.Element | no | iOS/Android | yes | +| errorSource | Default image source in case of an error | ImageSourcePropType | no | iOS/Android | yes | +| imageId | An imageId that can be used in sourceTransformer logic | string | no | iOS/Android | yes | +| overlayColor | Pass a custom color for the overlay | string | no | iOS/Android | yes | +| overlayIntensity | OverlayIntensityType | LOW \|MEDIUM \|HIGH | no | iOS/Android | yes | +| overlayType | the image MUST have proper size, The type of overlay to place on top of the image. | VERTICAL \|TOP \|BOTTOM \|SOLID | no | iOS/Android | yes | +| recorderTag | Recorder Tag | 'mask' \| 'unmask' | no | iOS/Android | yes | +| sourceTransformer | custom source transform handler for manipulating the image source (great for size control) | (props: any) => ImageSourcePropType | no | iOS/Android | yes | +| supportRTL | whether the image should flip horizontally on RTL locals | boolean | no | iOS/Android | yes | +| tintColor | the asset tint | string | no | iOS/Android | yes | +| useBackgroundContainer | Use a container for the Image, this can solve issues on Android when animation needs to be performed on the same view; i.e. animation related crashes on Android. | boolean | no | iOS/Android | yes | + +**Marquee**：滑动文本组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | --------------------------------------- | ------------------ | -------- | ----------- | ----------------- | +| containerStyle | Custom container style | ViewProps['style'] | no | iOS/Android | yes | +| direction | Marquee direction | MarqueeDirections | no | iOS/Android | yes | +| duration | Marquee animation duration | number | no | iOS/Android | yes | +| label | Marquee label | string | no | iOS/Android | yes | +| labelStyle | Marquee label style | TextProps['style'] | no | iOS/Android | yes | +| numberOfReps | Marquee animation number of repetitions | number | no | iOS/Android | yes | + +**ProgressiveImage**：带动画的图像组件，该组件扩展了[AnimatedImage](https://wix.github.io/react-native-ui-lib/docs/components/media/AnimatedImage)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | ----------- | -------- | ----------- | ----------------- | +| thumbnailSource | Small thumbnail source to display while the full-size image is loading | ImageSource | no | iOS/Android | yes | + +**PageControl**：页面指示器组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------ | ---------------------------------- | -------- | ----------- | ----------------- | +| color | Color of the selected page dot and, if inactiveColor not passed, the border of the not selected pages | string | no | iOS/Android | yes | +| containerStyle | Additional styles for the top container | ViewStyle | no | iOS/Android | yes | +| currentPage | Zero-based index of the current page | number | no | iOS/Android | yes | +| enlargeActive | Whether to enlarge the active page indicator. Irrelevant when limitShownPages is in effect. | boolean | no | iOS/Android | yes | +| inactiveColor | Color of the unselected page dots and the border of the not selected pages | string | no | iOS/Android | yes | +| limitShownPages | Limit the number of page indicators shown.\enlargeActive prop is disabled in this state, when set to true there will be maximum of 7 shown.\Only relevant when numOfPages > 5. | boolean | no | iOS/Android | yes | +| numOfPages | Total number of pages | number | no | iOS/Android | yes | +| onPagePress | Action handler for clicking on a page indicator | (index: number) => void | no | iOS/Android | yes | +| size | The size of the page indicator.\When setting limitShownPages the medium sized will be 2/3 of size and the small will be 1/3 of size.\An alternative is to send an array [smallSize, mediumSize, largeSize]. | number \| [number, number, number] | no | iOS/Android | yes | +| spacing | The space between the siblings page indicators | number | no | iOS/Android | yes | +| testID | Used to identify the pageControl in tests | string | no | iOS/Android | yes | + +**TabController**：具有延迟加载机制的选项卡控制器组件，该组件基于react-native-gesture-handler，使用react-native-navigation时，请确保使用gestureHandlerRootHOC包裹屏幕。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | ------------------------------------------------------------ | -------------------------------------------------- | -------- | ----------- | ----------------- | +| asCarousel | When using TabController.PageCarousel this should be turned on | boolean | no | iOS/Android | yes | +| carouselPageWidth | Pass for custom carousel page width | number | no | iOS/Android | yes | +| initialIndex | Initial selected index | number | no | iOS/Android | yes | +| items | The list of tab bar items | TabControllerItemProps [] | no | iOS/Android | yes | +| onChangeIndex | Callback for when index has change (will not be called on ignored items) | (index: number, prevIndex: number \| null) => void | no | iOS/Android | yes | + +**TabController.PageCarousel**：TabController 的 PageCarousel 组件，该组件扩展了[ScrollView](https://reactnative.dev/docs/scrollview)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------- | ------------------------------------------------------------ | --------- | -------- | ----------- | ----------------- | +| TabController.PageCarousel | TabController's PageCarousel component，You must pass asCarousel flag to TabController and render your TabPages inside a PageCarousel | Component | no | iOS/Android | yes | + +**TabController.TabBar**：TabController的TabBar组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | -------------------------------------------- | --------- | -------- | ----------- | ----------------- | +| activeBackgroundColor | Apply background color on press for tab item | string | no | iOS/Android | yes | +| backgroundColor | The TabBar background Color | string | no | iOS/Android | yes | +| centerSelected | Pass to center selected item | boolean | no | iOS/Android | yes | +| containerStyle | Additional styles for the container | ViewStyle | no | iOS/Android | yes | +| containerWidth | The TabBar container width | number | no | iOS/Android | yes | +| enableShadow | Show Tab Bar bottom shadow | boolean | no | iOS/Android | yes | +| height | Tab Bar height | number | no | iOS/Android | yes | +| iconColor | Icon tint color | string | no | iOS/Android | yes | +| indicatorInsets | The indicator insets | number | no | iOS/Android | yes | +| indicatorStyle | Custom style for the selected indicator | ViewStyle | no | iOS/Android | yes | +| labelColor | The default label color | string | no | iOS/Android | yes | +| labelStyle | Custom label style | TextStyle | no | iOS/Android | yes | +| selectedIconColor | Icon selected tint color | string | no | iOS/Android | yes | +| selectedLabelColor | The selected label color | string | no | iOS/Android | yes | +| selectedLabelStyle | Custom selected label style | TextStyle | no | iOS/Android | yes | +| shadowStyle | Custom shadow style | ViewStyle | no | iOS/Android | yes | +| spreadItems | Whether the tabBar should be spread | boolean | no | iOS/Android | yes | +| testID | The component test id | string | no | iOS/Android | yes | +| uppercase | Whether to change the text to uppercase | boolean | no | iOS/Android | yes | + +**TabController.TabBarItem**：TabController的TabBarItem组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ---------------------------------------------------- | ----------------------- | -------- | ----------- | ----------------- | +| activeBackgroundColor | Apply background color on press for TouchableOpacity | string | no | iOS/Android | yes | +| activeOpacity | The active opacity when pressing a tab | number | no | iOS/Android | yes | +| backgroundColor | Apply background color for the tab bar item | string | no | iOS/Android | yes | +| badge | Badge component props to display next the item label | BadgeProps | no | iOS/Android | yes | +| icon | Icon of the tab | number | no | iOS/Android | yes | +| iconColor | Icon tint color | string | no | iOS/Android | yes | +| ignore | Ignore tab presses | boolean | no | iOS/Android | yes | +| label | Label of the tab | string | no | iOS/Android | yes | +| labelColor | The default label color | string | no | iOS/Android | yes | +| labelProps | Extra label props to pass to label Text element | TextProps | no | iOS/Android | yes | +| labelStyle | Custom label style | TextStyle | no | iOS/Android | yes | +| leadingAccessory | Pass to render a leading element | ReactElement | no | iOS/Android | yes | +| onPress | Callback for when pressing a tab | (index: number) => void | no | iOS/Android | yes | +| selectedIconColor | Icon selected tint color | string | no | iOS/Android | yes | +| selectedLabelColor | The selected label color | string | no | iOS/Android | yes | +| selectedLabelStyle | Custom selected label style | TextStyle | no | iOS/Android | yes | +| style | Pass custom style | ViewStyle | no | iOS/Android | yes | +| testID | Used as a testing identifier | string | no | iOS/Android | yes | +| trailingAccessory | Pass to render a trailing element | ReactElement | no | iOS/Android | yes | +| uppercase | Whether to change the text to uppercase | boolean | no | iOS/Android | yes | +| width | A fixed width for the item | number | no | iOS/Android | yes | + +**TabController.TabPage**：TabController的TabPage 组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | ------------------------------------------------------------ | ----------------- | -------- | ----------- | ----------------- | +| index | The index of the the TabPage | number | no | iOS/Android | yes | +| lazy | Whether this page should be loaded lazily | boolean | no | iOS/Android | yes | +| lazyLoadTime | How long to wait till lazy load complete (good for showing loader screens) | number | no | iOS/Android | yes | +| renderLoading | Render a custom loading page when lazy loading | () => JSX.Element | no | iOS/Android | yes | +| testID | The component test id | string | no | iOS/Android | yes | + +**Wizard**：向导组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------ | ----------------------- | -------- | ----------- | ----------------- | +| activeConfig | The configuration of the active step (see Wizard.Step.propTypes) | WizardStepProps | no | iOS/Android | yes | +| activeIndex | The active step's index | number | no | iOS/Android | yes | +| containerStyle | Add or override style of the container | ViewStyle | no | iOS/Android | yes | +| onActiveIndexChanged | Callback that is called when the active step is changed (i.e. a step was clicked on). The new activeIndex will be the input of the callback | (index: number) => void | no | iOS/Android | yes | +| testID | The component test id | string | no | iOS/Android | yes | + +**Wizard.Step**：向导组件中Step组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | ---------------- | -------- | ----------- | ----------------- | +| accessibilityInfo | Extra text to be read in accessibility mode | string | no | iOS/Android | yes | +| circleBackgroundColor | Circle's background color | string | no | iOS/Android | yes | +| circleColor | Color of the circle | string | no | iOS/Android | yes | +| circleSize | The step's circle size (diameter) | number | no | iOS/Android | yes | +| color | Color of the step index (or of the icon, when provided) | string | no | iOS/Android | yes | +| connectorStyle | Additional styles for the connector | ViewStyle | no | iOS/Android | yes | +| enabled | Whether the step should be enabled | boolean | no | iOS/Android | yes | +| icon | Icon to replace the (default) index | ImageProps | no | iOS/Android | yes | +| indexLabelStyle | Additional styles for the index's label (when icon is not provided) | TextStyle | no | iOS/Android | yes | +| label | The label of the item | string | no | iOS/Android | yes | +| labelStyle | Additional styles for the label | TextStyle | no | iOS/Android | yes | +| state | The state of the step (Wizard.States.X) | WizardStepStates | no | iOS/Android | yes | + +**ActionSheet**：弹窗选择组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| cancelButtonIndex | Index of the option represents the cancel action (to be displayed as the separated bottom bold button) | number | no | iOS/Android | yes | +| containerStyle | Add or override style of the action sheet (wraps the title and actions) | ViewStyle | no | iOS/Android | yes | +| destructiveButtonIndex | Index of the option represents the destructive action (will display red text. Usually used for delete or abort actions) | number | no | iOS/Android | yes | +| dialogStyle | Add or override style of the dialog wrapping the action sheet | ViewStyle | no | iOS/Android | yes | +| message | Message of the action sheet | string | no | iOS/Android | yes | +| onDismiss | Called when dismissing the action sheet (usually used for setting 'visible' prop to false) | DialogProps['onDismiss'] | no | iOS/Android | yes | +| onModalDismissed | iOS only, modal only. Called once the modal has been dismissed | DialogProps ['onDialogDismissed'] | no | iOS | no | +| options | List of options for the action sheet, follows the Button prop types (supply 'label' string and 'onPress' function) | Array | no | iOS/Android | yes | +| optionsStyle | Add or override style of the options list | ViewStyle | no | iOS/Android | yes | +| renderAction | You will need to call 'onOptionPress' so the option's 'onPress' will be called. Render custom action | ( option: ButtonProps, index: number, onOptionPress: ActionSheetOnOptionPress ) => JSX.Element | no | iOS/Android | yes | +| renderTitle | Render custom title | () => JSX.Element | no | iOS/Android | yes | +| showCancelButton | When passed (only with useNativeIOS), will display a cancel button at the bottom (overrides cancelButtonIndex) | boolean | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| title | If both 'title' and 'message' are not passed will not render the title view at all. Title of the action sheet | string | no | iOS/Android | yes | +| useNativeIOS | Should use the native action sheet for iOS | boolean | no | iOS/Android | yes | +| useSafeArea | In iOS, use safe area, in case component attached to the bottom | boolean | no | iOS/Android | yes | +| visible | Whether to show the action sheet or not | boolean | no | iOS/Android | yes | + +**Dialog**：弹窗组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------- | ------------------------------------------------------------ | --------------------------- | -------- | ----------- | ----------------- | +| containerStyle | Component's container style | ViewStyle | no | iOS/Android | yes | +| height | Height | string \|number | no | iOS/Android | yes | +| ignoreBackgroundPress | Whether or not to ignore background press | boolean | no | iOS/Android | yes | +| onDialogDismissed | Called once the dialog has been dismissed completely | (props: any) => void | no | iOS/Android | yes | +| onDismiss | Called when clicking on the background | (props?: any) => void | no | iOS/Android | yes | +| overlayBackgroundColor | The color of the overlay background | string | no | iOS/Android | yes | +| panDirection | The direction of the allowed pan | UP \|DOWN \|LEFT \|RIGHT | no | iOS/Android | yes | +| pannableHeaderProps | The props that will be passed to the pannable header | any | no | iOS/Android | yes | +| renderPannableHeader | If this is added only the header will be pannable. Props are transferred to the 'renderPannableHeader'. For scrollable content (the children of the dialog) | (props: any) => JSX.Element | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| useSafeArea | In iOS, use safe area, in case component attached to the bottom | boolean | no | iOS/Android | yes | +| visible | Control visibility of the component | boolean | no | iOS/Android | yes | +| width | Width | string \| number | no | iOS/Android | yes | + +**FeatureHighlight**：功能发现组件，FeatureHighlight 组件必须是 render() 返回的根视图的直接子级，如果要突出显示的元素没有样式属性，请添加 'style={{opacity: 1}}' 以便 Android 操作系统可以检测到它，FeatureHighlight 使用native库，你需要引入它。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------- | ------------------------------------------------------------ | ----------------------------------------- | -------- | ----------- | ----------------- | +| borderColor | Color of the border around the highlighted element | string | no | iOS/Android | yes | +| borderRadius | Border radius for the border corners around the highlighted element | number | no | iOS/Android | yes | +| borderWidth | Width of the border around the highlighted element | number | no | iOS/Android | yes | +| confirmButtonProps | Props that will be passed to the dismiss button | ButtonProps | no | iOS/Android | yes | +| getTarget | Callback that extract the ref of the element to be highlighted | () => any | no | iOS/Android | yes | +| highlightFrame | Frame of the area to highlight {x, y, width, height} | HighlightFrame | no | iOS/Android | yes | +| innerPadding | The padding of the highlight frame around the highlighted element's frame (only when passing ref in 'getTarget') | number | no | iOS/Android | yes | +| message | Message to be displayed | string | no | iOS/Android | yes | +| messageNumberOfLines | Message's max number of lines | number | no | iOS/Android | yes | +| messageStyle | Message text style | TextStyle | no | iOS/Android | yes | +| minimumRectSize | Android API 21+, and only when passing a ref in 'getTarget'. The minimum size of the highlighted component | RectSize | no | iOS/Android | yes | +| onBackgroundPress | Called the background pressed | TouchableWithoutFeedbackProps ['onPress'] | no | iOS/Android | yes | +| overlayColor | Color of the content's background (usually includes alpha for transparency) | string | no | iOS/Android | yes | +| pageControlProps | PageControl component's props | PageControlProps | no | iOS/Android | yes | +| testID | The test id for e2e tests | string | no | iOS/Android | yes | +| textColor | Color of the content's text | string | no | iOS/Android | yes | +| title | Title of the content to be displayed | string | no | iOS/Android | yes | +| titleNumberOfLines | Title's max number of lines | number | no | iOS/Android | yes | +| titleStyle | Title text style | TextStyle | no | iOS/Android | yes | +| visible | Determines if to present the feature highlight component | boolean | no | iOS/Android | yes | + +**FloatingButton**：具有渐变的悬浮按钮。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | --------------------- | -------- | ----------- | ----------------- | +| bottomMargin | The bottom margin of the button, or secondary button if passed | number | no | iOS/Android | yes | +| button | Props for the Button component | ButtonProps | no | iOS/Android | yes | +| buttonLayout | Button layout direction: vertical or horizontal | FloatingButtonLayouts | no | iOS/Android | yes | +| duration | The duration of the button's animations (show/hide) | number | no | iOS/Android | yes | +| fullWidth | Relevant to vertical layout only. Whether the buttons get the container's full with | boolean | no | iOS/Android | yes | +| hideBackgroundOverlay | Whether to show background overlay | boolean | no | iOS/Android | yes | +| secondaryButton | Props for the secondary Button component | ButtonProps | no | iOS/Android | yes | +| testID | Use `testID.button` for the main button or `testID.secondaryButton` for the secondary. The test id for e2e tests | string | no | iOS/Android | yes | +| visible | Whether the component is visible | boolean | no | iOS/Android | yes | +| withoutAnimation | Whether to show/hide the button without animation | boolean | no | iOS/Android | yes | + +**Modal**：模态框组件，该组件扩展了[Modal](https://reactnative.dev/docs/modal)组件属性。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------- | ------------------------------------------------------------ | -------------------------------------- | -------- | ----------- | ----------------- | +| accessibilityLabel | Overrides the text that's read by the screen reader when the user interacts with the element.\By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space. | string | no | iOS/Android | yes | +| blurView | A custom view to use as a BlurView instead of the default one | JSX.Element | no | iOS/Android | yes | +| enableModalBlur | iOS only. Blurs the modal background when transparent | boolean | no | iOS | no | +| onBackgroundPress | allow dismissing a modal when clicking on its background | (event: GestureResponderEvent) => void | no | iOS/Android | yes | +| overlayBackgroundColor | The background color of the overlay | string | no | iOS/Android | yes | +| testID | The modal's end-to-end test identifier | string | no | iOS/Android | yes | +| useGestureHandlerRootView | Android only. Should add a GestureHandlerRootView | boolean | no | Android | no | + +**Modal.TopBar**：模态框的TopBar组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | ---------------------------------------------------------- | -------------------------------------- | -------- | ----------- | ----------------- | +| cancelButtonProps | Cancel action props | ButtonProps | no | iOS/Android | yes | +| cancelIcon | Cancel action icon | ImageSource | no | iOS/Android | yes | +| cancelLabel | Cancel action label | string | no | iOS/Android | yes | +| containerStyle | Style for the TopBar container | ViewStyle | no | iOS/Android | yes | +| doneButtonProps | Done action props | ButtonProps | no | iOS/Android | yes | +| doneIcon | Done action icon | ImageSource | no | iOS/Android | yes | +| doneLabel | Done action label | string | no | iOS/Android | yes | +| includeStatusBar | Whether to include status bar or not (height calculations) | boolean | no | iOS/Android | yes | +| leftButtons | Buttons to render on the left side of the top bar | topBarButtonProp\| topBarButtonProp[] | no | iOS/Android | yes | +| onCancel | Cancel action callback | (props?: any) => void | no | iOS/Android | yes | +| onDone | Done action callback | (props?: any) => void | no | iOS/Android | yes | +| rightButtons | Buttons to render on the right side of the top bar | topBarButtonProp \| topBarButtonProp[] | no | iOS/Android | yes | +| subtitle | Subtitle to display below the top bar title | string | no | iOS/Android | yes | +| subtitleStyle | Subtitle custom style | TextStyle | no | iOS/Android | yes | +| title | Title to display in the center of the top bar | string | no | iOS/Android | yes | +| titleStyle | Title custom style | TextStyle | no | iOS/Android | yes | + +**Toast**：非中断式弹窗组件， 请考虑转向我们新的 Toast 实现并使用 Incubator.Toast 代替。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----- | ------------------------------ | --------- | -------- | ----------- | ----------------- | +| Toast | A customizable Toast component | Component | no | iOS/Android | yes | + +**Badge**：圆形彩色徽章组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------------------------- | -------- | ----------- | ----------------- | +| backgroundColor | Background color | string | no | iOS/Android | yes | +| borderColor | Color of border around the badge | ImageStyle ['borderColor'] | no | iOS/Android | yes | +| borderRadius | Radius of border around the badge | number | no | iOS/Android | yes | +| borderWidth | Width of border around the badge | number | no | iOS/Android | yes | +| containerStyle | Additional styles for the top container | ViewStyle | no | iOS/Android | yes | +| customElement | Custom element to render instead of an icon | JSX.Element | no | iOS/Android | yes | +| hitSlop | Defines how far a touch event can start away from the badge | ViewProps['hitSlop'] | no | iOS/Android | yes | +| icon | Renders an icon badge | ImageSourcePropType | no | iOS/Android | yes | +| iconProps | Additional props passed to icon | ImageProps | no | iOS/Android | yes | +| iconStyle | Additional styling to badge icon | ImageStyle | no | iOS/Android | yes | +| label | Passing a label (undefined) will present a pimple badge. Text to show inside the badge | string | no | iOS/Android | yes | +| labelFormatterLimit | Beyond the max number for that digit length, a '+' will show at the end. If set to a value not included in LABEL_FORMATTER_VALUES, no formatting will occur. Example: labelLengthFormatter={2}, label={124}, label will present '99+' Receives a number from 1 to 4, representing the label's max digit length | LabelFormatterValues | no | iOS/Android | yes | +| labelStyle | Additional styles for the badge label | TextStyle | no | iOS/Android | yes | +| onPress | Called when the badge is pressed | (props: any) => void | no | iOS/Android | yes | +| size | Badge's size | number | no | iOS/Android | yes | + +**ConnectionStatusBar**：顶部栏显示无网络连接状态，该组件依赖[@react-native-community/netinfo](/zh-cn/react-native-community-netinfo.md) 库。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | --------------------------------------------------- | -------------------------------------------------- | -------- | ----------- | ----------------- | +| allowDismiss | Whethere to allow the user to dismiss | boolean | no | iOS/Android | yes | +| label | Text to show as the status | string | no | iOS/Android | yes | +| onConnectionChange | Handler to get connection change events propagation | (isConnected: boolean, isInitial: boolean) => void | no | iOS/Android | yes | +| useAbsolutePosition | Use absolute position for the component | boolean | no | iOS/Android | yes | + +**ProgressBar**：进度条组件。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | -------------------------------------------------------- | ----------- | -------- | ----------- | ----------------- | +| customElement | Custom element to render on top of the animated progress | JSX.Element | no | iOS/Android | yes | +| fullWidth | FullWidth Ui preset | boolean | no | iOS/Android | yes | +| progress | The progress of the bar from 0 to 100 | number | no | iOS/Android | yes | +| progressColor | Progress color | string | no | iOS/Android | yes | +| style | Override container style | ViewStyle | no | iOS/Android | yes | + +**SkeletonView**：骨架视图组件，用于内容还未加载临时显示骨架，该组件需要安装[react-native-shimmer-placeholder](/zh-cn/react-native-shimmer-placeholder.md)和[react-native-linear-gradient](/zh-cn/react-native-linear-gradient.md)库。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------- | ------------------------------------------------------------ | -------------------------------------- | -------- | ----------- | ----------------- | +| borderRadius | The border radius of the skeleton view | number | no | iOS/Android | yes | +| circle | Whether the skeleton is a circle (will override the borderRadius) | boolean | no | iOS/Android | yes | +| colors | The colors of the skeleton view, the array length has to be >=2 | string[] | no | iOS/Android | yes | +| customValue | Custom value of any type to pass on to SkeletonView and receive back in the renderContent callback. | any | no | iOS/Android | yes | +| height | The height of the skeleton view | number | no | iOS/Android | yes | +| listProps | Props that are available when using template={SkeletonView.templates.LIST_ITEM} | SkeletonListProps | no | iOS/Android | yes | +| renderContent | A function that will render the content once the content is ready (i.e. showContent is true). The method will be called with the Skeleton's customValue (i.e. renderContent(props?.customValue)) | (customValue?: any) => React.ReactNode | no | iOS/Android | yes | +| shimmerStyle | Additional style to the skeleton view | ViewStyle | no | iOS/Android | yes | +| showContent | The content has been loaded, start fading out the skeleton and fading in the content | boolean | no | iOS/Android | yes | +| style | Override container styles | ViewStyle | no | iOS/Android | yes | +| template | Accessible through SkeletonView.templates.xxx. The type of the skeleton view. | listItem \|content | no | iOS/Android | yes | +| testID | The component test id | string | no | iOS/Android | yes | +| times | Generates duplicate skeletons | number | no | iOS/Android | yes | +| timesKey | A key prefix for the duplicated SkeletonViews | string | no | iOS/Android | yes | +| width | The width of the skeleton view | number | no | iOS/Android | yes | + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +**Color**: 可以进行全局样式预设，通过Color获取预设样式。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------ | ------------------------------------------------------------ | ------------------------------------------------ | -------- | ----------- | ----------------- | +| loadColors | Load a set of colors to be used in the app. | ({[key: string]: string}) => void | no | iOS/Android | yes | +| loadSchemes | Load a set of scheme colors to support dark/light mode. | ({[name: string]: {[key: string]: any}}) => void | no | iOS/Android | yes | +| rgba | Return rgba string with color and transparency | (color: string, num: number) => string | no | iOS/Android | yes | +| getColorTint | Get color tint | (color: string, num: number) => string | no | iOS/Android | yes | +| isDark | returns `true` if a color is considered dark (bright colors will return `false`) | (color: string) => boolean | no | iOS/Android | yes | + +**ThemeManager**: 使用 ThemeManager 为您的应用程序设置默认的全局行为。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| setComponentTheme | Set default props for a component by passing an object or a callback | (componentName, defaultPropsObject) => void \| (componentName, componentProps => newDefaultPropsObject) => void | no | iOS/Android | yes | + +**Typography**: 设置样式属性，可直接通过“属性”的方式给组件设置样式。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ----------------------------- | ------------------------------------------------ | -------- | ----------- | ----------------- | +| loadTypographies | Set style attribute variables | ({[name: string]: {[key: string]: any}}) => void | no | iOS/Android | yes | + +**Spacings**: 设置空间大小变量，可通过 “属性-变量名” 的方式设置样式。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------- | ----------------------- | ----------------------------------- | -------- | ----------- | ----------------- | +| loadTypographies | Set space size variable | ({ [key: string]: number }) => void | no | iOS/Android | yes | + +## 遗留问题 + +- [ ] KeyboardTrackingView组件，将输入框子节点保持在键盘上方后点击事件位置异常: [issue#4](https://github.com/react-native-oh-library/react-native-ui-lib/issues/4) +- [ ] 原生组件KeyboardAccessoryView切换自定义键盘未实现: [issue#3](https://github.com/react-native-oh-library/react-native-ui-lib/issues/3) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/wix/react-native-ui-lib/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/en/react-native-unitsyles.md b/en/react-native-unitsyles.md new file mode 100644 index 00000000..36c101c3 --- /dev/null +++ b/en/react-native-unitsyles.md @@ -0,0 +1,616 @@ +> 模板版本：v0.2.2 + +

+

react-native-unistyles

+

+

+ + Supported platforms + + + License + + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-unistyles) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-unistyles Releases](https://github.com/react-native-oh-library/react-native-unistyles/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-unistyles@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-unistyles@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import { + StatusBar, + StyleSheet, + Text, + View, + Button, + ScrollView, + PixelRatio, +} from "react-native"; +import { + UnistylesRuntime, + createStyleSheet, + useStyles, + UnistylesRegistry, + mq, + UnistylesPlugin, +} from "react-native-unistyles"; +import React, { useEffect } from "react"; +const basic_styles = StyleSheet.create({ + consta: { backgroundColor: "#F5FCFF" }, + titleStyle: { fontSize: 16, fontWeight: "500" }, +}); + +export function UnistylesExample() { + let anti_shake = true; + const hasSomeCoolFeatures = true; + const { styles, theme } = useStyles(stylesheet, { + colors: hasSomeCoolFeatures, + sizes: !hasSomeCoolFeatures, + }); + let status_color = true; + const renderCount = React.useRef(1); + useEffect( + () => () => { + UnistylesRuntime.removePlugin(autoGuidelinePlugin); + }, + [] + ); + const isAutoGuidelinePluginEnabled = UnistylesRuntime.enabledPlugins.includes( + autoGuidelinePlugin.name + ); + + return ( + + + + {"变更状态栏颜色:"} + + + {"变更主题对象:"} + + + {" "} + 当前主题:{UnistylesRuntime.themeName} 重新渲染的次数:{renderCount.current++} + + + {" "} + Colors: {JSON.stringify(theme.colors, null, 2)}{" "} + + + + + ); +} + +``` + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-vision-camera": "file:../../node_modules/@react-native-oh-tpl/react-native-vision-camera/harmony/vision_camera.har", + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.配置 CMakeLists 和引入 xxxPackge + +打开 `entry/src/main/cpp/CMakeLists.txt`，添加： + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(CMAKE_SKIP_BUILD_RPATH TRUE) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") ++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") +set(LOG_VERBOSITY_LEVEL 1) +set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") +set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie") +set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use +add_compile_definitions(WITH_HITRACE_SYSTRACE) + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: manual_package_linking_1 +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULES}/@react-native-oh-tpl/react-native-vision-camera/src/main/cpp" ./vision-camera) +# RNOH_END: manual_package_linking_1 + +file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") ++file(GLOB VISION_CAMERA_CPP_FILES "${OH_MODULES}/@react-native-oh-tpl/react-native-vision-camera/src/main/cpp/*.cpp") + +add_library(rnoh_app SHARED + ${GENERATED_CPP_FILES} ++ ${VISION_CAMERA_CPP_FILES} + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: manual_package_linking_2 +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_vision_camera) +# RNOH_END: manual_package_linking_2 +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + +```diff +#include "RNOH/PackageProvider.h" +#include "generated/RNOHGeneratedPackage.h" +#include "SamplePackage.h" ++#include "VisionCameraPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), + std::make_shared(ctx), ++ std::make_shared(ctx), + }; +} +``` + +### 4.在 ArkTs 侧引入 VisionCameraView 组件 + +找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： + +```diff + ... ++ import { VisionCameraView } from "@react-native-oh-tpl/react-native-vision-camera"; + +@Builder +export function buildCustomRNComponent(ctx: ComponentBuilderContext) { + ... ++ if (ctx.componentName === VisionCameraView.NAME) { ++ VisionCameraView({ ++ ctx: ctx.rnComponentContext, ++ tag: ctx.tag, ++ }) ++ } +... +} +... +``` +在`entry/src/main/ets/pages/index.ets`中，如果当前文件中存在`arkTsComponentNames`数组(后续版本新增内容)，则需要在其中追加：`VisionCameraView.NAME`; + +```ts + ... + const arkTsComponentNames: Array = [..., VisionCameraView.NAME]; + ... +``` + + + +### 5.在 ArkTs 侧引入 VisionCameraModulePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff + ... ++ import { VisionCameraModulePackage } from "@react-native-oh-tpl/react-native-vision-camera/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new VisionCameraModulePackage(ctx), + ]; +} +``` + +### 6.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-vision-camera Releases](https://github.com/react-native-oh-library/react-native-vision-camera/releases) + +### 权限要求 + +以下权限中有`system_basic` 权限，而默认的应用权限是 `normal` ，只能使用 `normal` 等级的权限，所以可能会在安装hap包时报错**9568289**，请参考 [文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/bm-tool-V5#ZH-CN_TOPIC_0000001884757326__%E5%AE%89%E8%A3%85hap%E6%97%B6%E6%8F%90%E7%A4%BAcode9568289-error-install-failed-due-to-grant-request-permissions-failed) 修改应用等级为 `system_basic` + +#### 在 entry 目录下的module.json5中添加权限 + +打开 `entry/src/main/module.json5`，添加： + +```diff +... +"requestPermissions": [ ++ { ++ "name": "ohos.permission.CAMERA", ++ "reason": "$string:camera_reason", ++ "usedScene": { ++ "abilities": [ ++ "EntryAbility" ++ ], ++ "when":"inuse" ++ } ++ }, ++ { ++ "name": "ohos.permission.MICROPHONE", ++ "reason": "$string:microphone_reason", ++ "usedScene": { ++ "abilities": [ ++ "EntryAbility" ++ ], ++ "when":"inuse" ++ } ++ }, ++ { ++ "name": "ohos.permission.APPROXIMATELY_LOCATION", ++ "reason": "$string:location_reason", ++ "usedScene": { ++ "abilities": [ ++ "EntryAbility" ++ ], ++ "when":"inuse" ++ } ++ } +] +``` + +#### 在 entry 目录下添加申请以上权限的原因 + +打开 `entry/src/main/resources/base/element/string.json`，添加： + +```diff +... +{ + "string": [ ++ { ++ "name": "camera_reason", ++ "value": "使用相机" ++ }, ++ { ++ "name": "location_reason", ++ "value": "获取当前位置" ++ }, ++ { ++ "name": "microphone_reason", ++ "value": "使用麦克风" ++ }, + ] +} +``` + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ---------------------------------- | ------------------------------------------------------------ | -------- | -------- | ----------------- | ------------------ | +| isActive | Whether the Camera should actively stream video frames, or not | boolean | yes | All | yes | +| device | The Camera Device to use | object | yes | All | yes | +| preview | Enables **preview** streaming | boolean | no | All | yes | +| photo | Enables **photo capture** with the `takePhoto` function | boolean | no | All | yes | +| video | Enables **video capture** with the `startRecording` function | boolean | no | All | yes | +| audio | Enables **audio capture** for video recordings | boolean | no | All | yes | +| enableLocation | Enables location streaming to add GPS EXIF tags to captured photos and videos | boolean | no | All | yes | +| torch | Set the current torch mode | string | no | All | yes | +| zoom | Specifies the zoom factor of the current camera, in "factor"/scale | number | no | All | yes | +| enableZoomGesture | Enables or disables the native pinch to zoom gesture | boolean | no | All | yes | +| exposure | Specifies the Exposure bias of the current camera. A lower value means darker images, a higher value means brighter images | number | no | All | yes | +| format | Selects a given format. By default, the best matching format is chosen | object | no | All | yes | +| resizeMode | Specifies the Preview's resize mode | string | no | All | yes | +| androidPreviewViewType | Specifies the implementation mode for the Preview View on Android | string | no | Android | no | +| fps | Specify the frames per second this camera should stream frames at. | number | no | All | yes | +| videoHdr | Enables or disables HDR Video Streaming for Preview, Video and Frame Processor via a 10-bit wide-color pixel format | boolean | no | All | yes | +| photoHdr | Enables or disables HDR Photo Capture via a double capture routine that combines low- and high exposure photos | boolean | no | Android/iOS | no | +| photoQualityBalance | Configures the photo pipeline for a specific quality balance prioritization. | string | no | All | yes | +| enableBufferCompression | Enables or disables lossy buffer compression for the video stream | boolean | no | Android/iOS | no | +| lowLightBoost | Enables or disables low-light boost on this camera device. | boolean | no | Android/iOS | no | +| videoStabilizationMode | Specifies the video stabilization mode to use. | string | no | All | yes | +| enableDepthData | Enables or disables depth data delivery for photo capture. | boolean | no | Android/iOS | no | +| enablePortraitEffectsMatteDelivery | A boolean specifying whether the photo render pipeline is prepared for portrait effects matte delivery. | boolean | no | Android/iOS | no | +| enableFpsGraph | If `true`, show a debug view to display the FPS of the Video Pipeline | boolean | no | Android/iOS | no | +| onError | Called when any kind of runtime error occured. | function | no | All | yes | +| onInitialized | Called when the camera session was successfully initialized. This will get called everytime a new device is set. | function | no | All | yes | +| onStarted | Called when the camera started the session (`isActive={true}`) | function | no | All | yes | +| onStopped | Called when the camera stopped the session (`isActive={false}`) | function | no | All | yes | +| onShutter | Called just before a photo or snapshot is captured. | function | no | All | yes | +| codeScanner | A CodeScanner that can detect QR-Codes or Barcodes using platform-native APIs | object | no | All | yes | + +## 静态方法 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| takePhoto | Take a single photo and write it's content to a temporary file. | function | no | All | yes | +| focus | Focus the camera to a specific point in the coordinate system. | function | no | All | yes | +| startRecording | Start a new video recording. | function | no | All | yes | +| stopRecording | Stop the current video recording. | function | no | All | yes | +| pauseRecording | Pauses the current video recording. | function | no | All | yes | +| resumeRecording | Resumes a currently paused video recording. | function | no | All | yes | +| getAvailableCameraDevices | Get a list of all available camera devices on the current phone. | function | no | All | yes | +| getCameraPermissionStatus | Gets the current Camera Permission Status. | function | no | All | yes | +| requestCameraPermission | Shows a "request permission" alert to the user, and resolves with the new camera permission status. | function | no | All | yes | +| getMicrophonePermissionStatus | Gets the current Microphone-Recording Permission Status. | function | no | All | yes | +| requestMicrophonePermission | Shows a "request permission" alert to the user, and resolves with the new microphone permission status. | function | no | All | yes | +| getLocationPermissionStatus | Gets the current Location Permission Status. | function | no | All | yes | +| requestLocationPermission | Shows a "request permission" alert to the user, and resolves with the new location permission status. | function | no | All | yes | +| takeSnapshot | Captures a snapshot of the Camera view and write it's content to a temporary file. | function | no | Android/iOS | no | +| cancelRecording | Cancel the current video recording. The temporary video file will be deleted, | function | no | Android/iOS | no | +| addCameraDevicesChangedListener | Adds a listener that gets called everytime the Camera Devices change | function | no | Android/iOS | no | + +## API + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------- | ------------------------------------------------------------ | ---- | -------- | -------- | ----------------- | +| useCameraDevice | Get the best matching Camera device that best satisfies your requirements using a sorting filter. | hook | no | All | yes | +| useCameraDevices | Get all available Camera Devices this phone has. | hook | no | All | yes | +| useCameraFormat | Get the best matching Camera format for the given device that satisfies your requirements using a sorting filter. By default, formats are sorted by highest to lowest resolution. | hook | no | All | yes | +| useCameraPermission | Returns whether the user has granted permission to use the Camera, or not. | hook | no | All | yes | +| useMicrophonePermission | Returns whether the user has granted permission to use the Microphone, or not. | hook | no | All | yes | +| useLocationPermission | Returns whether the user has granted permission to use the Location, or not. | hook | no | All | yes | +| useCodeScanner | create a `CodeScanner` instance and pass it to the `` | hook | no | All | yes | +| useFrameProcessor | Returns a memoized Frame Processor function wich you can pass to the ``. | hook | no | All | no | + +## 遗留问题 + +- [ ] 不支持拍照HDR [issue#1](https://github.com/react-native-oh-library/react-native-vision-camera/issues/1) +- [ ] 不支持有损缓冲压缩 [issue#2](https://github.com/react-native-oh-library/react-native-vision-camera/issues/2) +- [ ] 没有夜景模式 [issue#3](https://github.com/react-native-oh-library/react-native-vision-camera/issues/3) +- [ ] 没有实现深度数据能力 [issue#4](https://github.com/react-native-oh-library/react-native-vision-camera/issues/4) +- [ ] 依赖三方库skia未 HarmonyOS 化 [issue#5](https://github.com/react-native-oh-library/react-native-vision-camera/issues/5) +- [ ] 不支持内容失真校正 [issue#6](https://github.com/react-native-oh-library/react-native-vision-camera/issues/6) +- [ ] 不支持消除红眼 [issue#7](https://github.com/react-native-oh-library/react-native-vision-camera/issues/7) +- [ ] 快门声音无法独立控制 [issue#8](https://github.com/react-native-oh-library/react-native-vision-camera/issues/8) +- [ ] 不支持查询传感器旋转角度 [issue#9](https://github.com/react-native-oh-library/react-native-vision-camera/issues/9) +- [ ] 不支持查询硬件级别 [issue#10](https://github.com/react-native-oh-library/react-native-vision-camera/issues/10) +- [ ] 不支持查询设备正确对焦的最小距离 [issue#11](https://github.com/react-native-oh-library/react-native-vision-camera/issues/11) +- [ ] 不支持查询设备名称 [issue#12](https://github.com/react-native-oh-library/react-native-vision-camera/issues/12) +- [ ] 查询的CameraType一直是相机类型未指定 [issue#13](https://github.com/react-native-oh-library/react-native-vision-camera/issues/13) +- [ ] 不支持查询传感器旋转角度 [issue#14](https://github.com/react-native-oh-library/react-native-vision-camera/issues/14) +- [ ] 不支持查询是否支持弱光增强 [issue#15](https://github.com/react-native-oh-library/react-native-vision-camera/issues/15) +- [ ] HarmonyOS 侧相机无法获取视频视野 [issue#16](https://github.com/react-native-oh-library/react-native-vision-camera/issues/16) +- [ ] 不支持查询maxISO和minISO [issue#17](https://github.com/react-native-oh-library/react-native-vision-camera/issues/17) +- [ ] 不支持保存快照 [issue#18](https://github.com/react-native-oh-library/react-native-vision-camera/issues/18) +- [ ] 视频录制取消时无法删除临时文件 [issue#19](https://github.com/react-native-oh-library/react-native-vision-camera/issues/19) +- [ ] 无法监听相机设备变更 [issue#20](https://github.com/react-native-oh-library/react-native-vision-camera/issues/20) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/mrousavy/react-native-vision-camera/blob/main/LICENSE) ，请自由地享受和参与开源。 + + + \ No newline at end of file diff --git a/en/react-native-voice-voice.md b/en/react-native-voice-voice.md new file mode 100644 index 00000000..b1159d29 --- /dev/null +++ b/en/react-native-voice-voice.md @@ -0,0 +1,534 @@ +> 模板版本：v0.2.2 + +

+

@react-native-voice/voice

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/voice) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/voice Releases](https://github.com/react-native-oh-library/voice/releases)，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/voice@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/voice@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, {Component} from 'react'; +import { + StyleSheet, + Text, + View, + Image, + TouchableHighlight, + ScrollView, + Button, +} from 'react-native'; +import Voice, { + SpeechRecognizedEvent, + SpeechResultsEvent, + SpeechErrorEvent, +} from '@react-native-voice/voice'; + +type Props = {}; +type State = { + recognized: string; + error: string; + end: string; + started: string; + results: string[]; + partialResults: string[]; + isAvailable: number; + isRecognizing: number; +}; + +class VoiceTest extends Component { + state = { + recognized: '', + error: '', + end: '', + started: '', + results: [], + partialResults: [], + isAvailable: 0, + isRecognizing: 0, + }; + + constructor(props: Props) { + super(props); + Voice.onSpeechStart = this.onSpeechStart; + Voice.onSpeechRecognized = this.onSpeechRecognized; + Voice.onSpeechEnd = this.onSpeechEnd; + Voice.onSpeechError = this.onSpeechError; + Voice.onSpeechResults = this.onSpeechResults; + Voice.onSpeechPartialResults = this.onSpeechPartialResults; + } + + componentWillUnmount() { + Voice.destroy().then(Voice.removeAllListeners); + } + + onSpeechStart = (e: any) => { + console.log('onSpeechStart: ', e); + this.setState({ + started: '√', + }); + }; + + onSpeechRecognized = (e: SpeechRecognizedEvent) => { + console.log('onSpeechRecognized: ', e); + this.setState({ + recognized: '√', + }); + }; + + onSpeechEnd = (e: any) => { + console.log('onSpeechEnd: ', e); + this.setState({ + end: '√', + }); + }; + + onSpeechError = (e: SpeechErrorEvent) => { + console.log('onSpeechError: ', e); + this.setState({ + error: JSON.stringify(e.error), + }); + }; + + onSpeechResults = (e: SpeechResultsEvent) => { + console.log('onSpeechResults: ', e); + this.setState({ + results: e.value, + }); + }; + + onSpeechPartialResults = (e: SpeechResultsEvent) => { + console.log('onSpeechPartialResults: ', e); + this.setState({ + partialResults: e.value, + }); + }; + + _startRecognizing = async () => { + this.setState({ + recognized: '', + error: '', + started: '', + results: [], + partialResults: [], + end: '', + }); + + try { + await Voice.start('en-US'); + } catch (e) { + console.error(e); + } + }; + + _stopRecognizing = async () => { + try { + await Voice.stop(); + } catch (e) { + console.error(e); + } + }; + + _cancelRecognizing = async () => { + try { + await Voice.cancel(); + Voice.start; + } catch (e) { + console.error(e); + } + }; + + _destroyRecognizer = async () => { + try { + await Voice.destroy(); + } catch (e) { + console.error(e); + } + this.setState({ + recognized: '', + error: '', + started: '', + results: [], + partialResults: [], + end: '', + }); + }; + + _isAvailable = async () => { + try { + Voice.isAvailable().then((available: 0 | 1) => { + this.setState({ + isAvailable: available ? 1 : 0, + }); + }); + } catch (e) { + console.error(e); + this.setState({ + isAvailable: 0, + }); + } + }; + + _isRecognizing = async () => { + try { + Voice.isRecognizing().then((isRecognizing: 0 | 1) => { + this.setState({ + isRecognizing: isRecognizing ? 1 : 0, + }); + }); + } catch (e) { + console.error(e); + } + }; + + render() { + return ( + + + {`${this.state.started}`} + + + + {`${this.state.recognized}`} + + + + {`${this.state.error}`} + + + + {this.state.results.map((result, index) => { + return ( + + {result} + + ); + })} + + + + {this.state.partialResults.map((result, index) => { + return ( + + {result} + + ); + })} + + + + {` ${this.state.end}`} + + + + {`${this.state.isAvailable}`} + + + + + {`${this.state.isRecognizing}`} + + + + + + + + + + + + ); + } +} + +const styles = StyleSheet.create({ + button: { + width: 50, + height: 50, + }, + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + action: { + textAlign: 'center', + color: '#0000FF', + marginVertical: 5, + fontWeight: 'bold', + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, + stat: { + textAlign: 'center', + color: '#B0171F', + marginBottom: 1, + }, + baseArea: { + width: '100%', + height: 30, + borderRadius: 4, + borderColor: '#000000', + marginTop: 6, + backgroundColor: '#FFFFFF', + flexDirection: 'row', + alignItems: 'center', + paddingLeft: 8, + paddingRight: 8, + marginBottom: 20, + }, +}); + +export default VoiceTest; +``` +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 + +## Link + +目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` + +### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 + +```json +{ +... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 2.引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/voice": "file:../../node_modules/@react-native-oh-tpl/voice/harmony/voice.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 3.在 ArkTs 侧引入 RNVoicePackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... + ++ import { RNVoicePackage } from '@react-native-oh-tpl/voice/ts' + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new RNVoicePackage(ctx) + ]; +} +``` + +### 4.运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/voice Releases](https://github.com/react-native-oh-library/voice/releases) + +### 权限要求 +由于此库涉及语音识别会使用到系统录音功能，使用时需要配置对应的权限，权限需配置在entry/src目录下module.json5和entry/src/main/resources/base/element目录下string.json文件 + +打开 `module.json5`，添加： + +```diff +... +"requestPermissions": [ +... ++ { ++ "name": "ohos.permission.MICROPHONE", ++ "reason": "$string:reason", ++ "usedScene": { ++ "abilities": [ ++ "EntryAbility" ++ ], ++ "when": "inuse" ++ } ++ } + ] +``` +打开 `string.json`，添加权限申请原因： + +```diff +... +{ + "string": [ +... ++ { ++ "name": "reason", ++ "value": "Used for recording recognition" ++ }, +... + ] +} +``` + +## API + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +> 详情见 [react-native-voice/voice](https://github.com/react-native-voice/voice) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +|-----------------------------|-----------------------------------------------------------------------------------|-------------------|----------|----------|-------------------| +| Voice.isAvailable()| Checks whether a speech recognition service is available on the system. | Promise<0 \| 1> | no | Android, iOS | yes | +| Voice.start(locale) | Starts listening for speech for a specific locale. Returns null if no error occurs. | Promise | no | Android, iOS | yes | +| Voice.stop() | Stops listening for speech. Returns null if no error occurs. | Promise | no | Android, iOS | yes | +| Voice.cancel() | Cancels the speech recognition. Returns null if no error occurs. | Promise | no | Android, iOS | yes | +| Voice.destroy() | Destroys the current SpeechRecognizer instance. Returns null if no error occurs. | Promise | no | Android, iOS | yes | +| Voice.removeAllListeners() | Cleans/nullifies overridden Voice static methods. | void | no | Android, iOS | yes | +| Voice.isRecognizing() | Return if the SpeechRecognizer is recognizing. | Promise<0 \| 1> | no | Android, iOS | yes | +| Voice.getSpeechRecognitionServices() | Returns a list of the speech recognition engines available on the device. (Example: ['com.google.android.googlequicksearchbox'] if Google is the only one available.) | Promise | no | Android | no | + +## 事件回调 + +> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | --------------------------------------------------------------------------------------------------------------------------------- | :------- |--------| ---------------------------------------------- |-----------------| +| `Voice.onSpeechStart(event)` | Invoked when .start() is called without error. | function | no | Android, iOS | yes | +| `Voice.onSpeechRecognized(event)` | Invoked when speech is recognized. | function | no | Android, iOS | yes | +| `Voice.onSpeechEnd(event)` | Invoked when SpeechRecognizer stops recognition. | function | no | Android, iOS | yes | +| `Voice.onSpeechError(event)` | Invoked when an error occurs. | function | no | Android, iOS | yes | +| `Voice.onSpeechResults(event)` | Invoked when SpeechRecognizer is finished recognizing. | function | no | Android, iOS | yes | +| `Voice.onSpeechPartialResults(event)` | Invoked when any results are computed. | function | no | Android, iOS | yes | +| `Voice.onSpeechVolumeChanged(event)` | Invoked when pitch that is recognized changed. | function | no | Android | no | + +## 遗留问题 + +- [ ] 原库支持在线和离线模式，HarmonyOS侧暂只支持离线 问题: [issue#2](https://github.com/react-native-oh-library/voice/issues/2) +- [ ] 原库支持多种区域和语言，HarmonyOS侧暂只支持中文 问题: [issue#3](https://github.com/react-native-oh-library/voice/issues/3) +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-voice/voice/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-walkthrough-tooltip.md b/en/react-native-walkthrough-tooltip.md new file mode 100644 index 00000000..8a31923c --- /dev/null +++ b/en/react-native-walkthrough-tooltip.md @@ -0,0 +1,98 @@ +> 模板版本：v0.2.2 + +

+

react-native-walkthrough-tooltip

+

+

+ + Supported platforms + + + License + + +

+ + +>[!TIP] [Github 地址](https://github.com/jasongaare/react-native-walkthrough-tooltip) +## 安装与使用 + +进入到工程目录并输入以下命令： + +#### **npm** + +```bash +npm install react-native-walkthrough-tooltip@1.6.0 +``` + +#### **yarn** + +```bash +yarn add react-native-walkthrough-tooltip@1.6.0 +``` +下面的代码展示了这个库的基本使用场景： + +```js +import React, { useState } from "react"; +import { View, Text, } from "react-native"; +import Tooltip from 'react-native-walkthrough-tooltip'; + +export const TestTooltip = ({ text, style }) => { + const [toolTipVisible, setToolTipVisible] = useState(false); + + return ( + Check this out!} + placement="top" + onClose={() => setToolTipVisible(false)} + > + setToolTipVisible(!toolTipVisible)}> + Press me + + +}; +``` +## 约束与限制 + +### 兼容性 + +本文档内容基于以下版本验证通过: + +1. RNOH: 0.72.5; SDK: HarmonyOS-NEXT-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.403; ROM: 3.0.0.25; + + +### 属性 +[!TIP]"Platform"列表示该属性在原三方库上支持的平台。 + +[!TIP]"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果 +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------------------------------------ | -------- | -------- | ----------- | ----------------- | +| accessible | Set this to false if you do not want the root touchable element to be accessible. [See docs on accessible here](https://reactnative.dev/docs/accessibility#accessibility-properties) | bool| No | All |Yes | +| allowChildInteraction |By default, the user can touch and interact with the child element. When this prop is false, the user cannot interact with the child element while the tooltip is visible. | bool | No | All | Yes | +| arrowSize |The dimensions of the arrow on the bubble pointing to the highlighted element | Size | No |All | Yes +| backgroundColor |Color of the fullscreen background beneath the tooltip. Overrides the backgroundStyle prop | string | No |All | Yes +| childContentSpacing | The distance between the tooltip-rendered child and the arrow pointing to it | number | No |All | Yes +| closeOnChildInteraction | When child interaction is allowed, this prop determines if onClose should be called when the user interacts with the child element. Default is true (usually means the tooltip will dismiss once the user touches the element highlighted) | bool | No |All | Yes +| closeOnContentInteraction |this prop determines if onClose should be called when the user interacts with the content element. Default is true (usually means the tooltip will dismiss once the user touches the content element) | bool |No | All | Yes +| content | This is the view displayed in the tooltip popover bubble | function/Element |Yes | All | Yes +| displayInsets | The number of pixels to inset the tooltip on the screen (think of it like padding). The tooltip bubble should never render outside of these insets, so you may need to adjust your content accordingly | object |No | All | Yes +| disableShadow | When true, tooltips will not appear elevated. Disabling shadows will remove the warning: RCTView has a shadow set but cannot calculate shadow efficiently on IOS devices. | bool |No | All | Yes +| isVisible | When true, tooltip is displayed | bool |Yes | All | Yes +| onClose | Callback fired when the user taps the tooltip background overlay | function |Yes | All | Yes +| placement | Where to position the tooltip - options: top, bottom, left, right, center. Default is top for tooltips rendered with children Default is center for tooltips rendered without children.NOTE: center is only available with a childless placement, and the content will be centered within the bounds defined by the displayInsets. | string |Yes | All | Yes +| showChildInTooltip | Set this to false if you do NOT want to display the child alongside the tooltip when the tooltip is visible | bool |No | All | Yes +| supportedOrientations |This prop allows you to control the supported orientations the tooltip modal can be displayed. It correlates directly with [the prop for React Native's Modal component](https://reactnative.dev/docs/modal#supportedorientations) (has no effect if useReactNativeModal is false) | bool |No | iOS | No +| topAdjustment | Value which provides additional vertical offest for the child element displayed in a tooltip. Commonly set to: Platform.OS === 'android' ? -StatusBar.currentHeight : 0 due to an issue with React Native's measure function on Android| number |No | All | Yes +| horizontalAdjustment |Value which provides additional horizontal offest for the child element displayed in a tooltip. This is useful for adjusting the horizontal positioning of a highlighted child element if needed | number |No | All | Yes +| useInteractionManager | Set this to true if you want the tooltip to wait to become visible until the callback for InteractionManager.runAfterInteractions is executed. Can be useful if you need to wait for navigation transitions to complete, etc.[ See docs on InteractionManager here](https://reactnative.dev/docs/interactionmanager) | bool |No | All | Yes +| useReactNativeModal | By default, this library uses a component from React Native. If you need to disable this, and simply render an absolutely positioned full-screen view, set useReactNativeModal={false}. This is especially useful if you desire to render a Tooltip while you have a different Modal rendered. | bool |No | All | Yes +## 遗留问题 + +- [ ] supportedOrientations在HarmonyOS不支持 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/jasongaare/react-native-walkthrough-tooltip/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file diff --git a/en/react-native-waterfall-flow.md b/en/react-native-waterfall-flow.md new file mode 100644 index 00000000..9b938039 --- /dev/null +++ b/en/react-native-waterfall-flow.md @@ -0,0 +1,213 @@ +> 模板版本：v0.2.2 + +

+

react-native-waterfall-flow

+

+

+ + Supported platforms + + + License + +

+ +>[!TIP] [Github 地址](https://github.com/axerjs/react-native-waterfall-flow) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-waterfall-flow@1.1.5 --save +``` + +#### **yarn** + +```bash +yarn add react-native-waterfall-flow@1.1.5 --save +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React, { useState, useRef } from 'react'; +import { View, Text, StyleSheet, Button, RefreshControl, Alert } from 'react-native'; +import WaterfallFlow from 'react-native-waterfall-flow'; + +const App = () => { + const item = ['Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item', 'Item'].map((l, i) => ({ id: l, text: i + ` ${l}` })) + const [data, setData] = useState(item); + const [refreshing, setRefreshing] = useState(false); + const waterfallRef = useRef(null); + + const renderItem = ({ item }) => { + + return ( + + {item.text} + + ); + } + + const onRefresh = () => { + setRefreshing(true); + setTimeout(() => { + // 模拟刷新数据 + setData([...item]); + setRefreshing(false); + }, 2000); + }; + + const onEndReached = () => { + // 模拟加载更多数据 + setData([...data, { id: `${data.length + 1}`, text: `${data.length + 1} Item` }, { id: `${data.length + 2}`, text: `${data.length + 2} Item` }]); + // Alert.alert('滚动到底部') + }; + + return ( + + + Header Component} + ListFooterComponent={Footer Component} + ListEmptyComponent={No Data Available} + onEndReached={onEndReached} + onRefresh={onRefresh} + refreshing={refreshing} + style={styles.waterfall} + contentContainerStyle={styles.contentContainer} + refreshControl={} + /> + + +