diff --git a/README.md b/README.md deleted file mode 100644 index f704017472edd85016e8a6083eef003cdca9a6f6..0000000000000000000000000000000000000000 --- a/README.md +++ /dev/null @@ -1,100 +0,0 @@ -> [!WARNING] 本文档仅用于三方库使用指导,不涉及任何 React Native OpenHarmony 框架的信息,且会随着 React Native OpenHarmony 框架持续迭代更新,当前版本不代表最终展示版本。 - -# 简介 - -> 如果你在找如何搭建环境的文档,请移步开发文档的 [搭建开发环境](https://react-native-oh-library.gitee.io/docs/#/zh-cn/environment) 章节。 - -## 概述 - -该文档旨在帮助开发者在 HarmonyOS 平台使用 React Native OpenHarmony 的第三方库,并呈现每个三方库的信息。 - -## 贡献文档 - -欢迎您参与贡献,我们鼓励开发者以各种方式参与文档反馈和贡献。 - -您可以对现有文档进行评价、简单更改、反馈文档质量问题、贡献您的原创内容,详细请参考[贡献文档](/zh-cn/contribute.md)。 - -## RNOH 三方库总览 - ->[!tip] NPM 公仓坐标:@react-native-oh-tpl - -| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | Releases | 文档链接 | -| :--: | :--------------------------------------: | :-----------: | :-------: | :--------------------------------------: | :--------------------------------------: | -| 1 | [@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage) | 1.21.1 | 是 | [@react-native-oh-tpl/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](/zh-cn/react-native-async-storage-async-storage.md) | -| 2 | [@react-native-clipboard/clipboard](https://github.com/react-native-clipboard/clipboard) | 1.13.2 | 是 | [@react-native-oh-tpl/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](/zh-cn/react-native-clipboard-clipboard.md) | -| 3 | [@react-native-community/datetimepicker](https://github.com/react-native-datetimepicker/datetimepicker) | 7.6.2 | 是 | [@react-native-oh-tpl/datetimepicker](https://github.com/react-native-oh-library/datetimepicker/releases) | [链接](/zh-cn/react-native-community-datetimepicker.md) | -| 4 | [@shopify/flash-list](https://github.com/Shopify/flash-list) | 1.6.3 | 否 | [@react-native-oh-tpl/flash-list](https://github.com/react-native-oh-library/flash-list/releases) | [链接](/zh-cn/shopify-flash-list.md) | -| 5 | [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) | 6.4.1 | 是 | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](/zh-cn/lottie-react-native.md) | -| 6 | [@react-native-picker/picker](https://github.com/react-native-picker/picker) | 2.5.1 | 否 | [@react-native-oh-tpl/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](/zh-cn/react-native-picker-picker.md) | -| 7 | [@react-native-community/progress-bar-android](https://github.com/react-native-progress-view/progress-bar-android) | 1.0.4 | 是 | [@react-native-oh-tpl/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](/zh-cn/react-native-community-progress-bar-android.md) | -| 8 | [@react-native-community/checkbox](https://github.com/react-native-checkbox/react-native-checkbox) | 0.5.16 | 否 | [@react-native-oh-tpl/react-native-checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](/zh-cn/react-native-community-checkbox.md) | -| 9 | [react-native-exception-handler](https://github.com/a7ul/react-native-exception-handler) | 2.10.10 | 否 | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](/zh-cn/react-native-exception-handler.md) | -| 10 | [react-native-fast-image](https://github.com/DylanVann/react-native-fast-image) | 8.6.3 | 否 | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](/zh-cn/react-native-fast-image.md) | -| 11 | [react-native-gesture-handler](https://github.com/software-mansion/react-native-gesture-handler) | 2.12.1 | 是 | [@react-native-oh-tpl/react-native-gesture-handler](https://github.com/react-native-oh-library/react-native-gesture-handler/releases) | [链接](/zh-cn/react-native-gesture-handler.md) | -| 12 | [react-native-image-picker](https://github.com/react-native-image-picker/react-native-image-picker) | 7.0.3 | 是 | [@react-native-oh-tpl/react-native-image-picker](https://github.com/react-native-oh-library/react-native-image-picker/releases) | [链接](/zh-cn/react-native-image-picker.md) | -| 13 | [react-native-linear-gradient](https://github.com/react-native-linear-gradient/react-native-linear-gradient) | 3.0.0-alpha.1 | 是 | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](/zh-cn/react-native-linear-gradient.md) | -| 14 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](/zh-cn/react-native-masked-view-masked-view.md) | -| 15 | [@react-native-community/netinfo](https://github.com/react-native-netinfo/react-native-netinfo) | 11.1.0 | 是 | [@react-native-oh-tpl/netinfo](https://github.com/react-native-oh-library/react-native-netinfo/releases) | [链接](/zh-cn/react-native-community-netinfo.md) | -| 16 | [react-native-pager-view](https://github.com/callstack/react-native-pager-view) | 6.2.2 | 是 | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](/zh-cn/react-native-pager-view.md) | -| 17 | [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) | 4.7.4 | 是 | [@react-native-oh-tpl/react-native-safe-area-context](https://github.com/react-native-oh-library/react-native-safe-area-context/releases) | [链接](/zh-cn/react-native-safe-area-context.md) | -| 18 | [react-native-screens](https://github.com/software-mansion/react-native-screens) | 3.29.0 | 是 | [react-native-screens](https://github.com/software-mansion/react-native-screens/releases) | [链接](/zh-cn/react-native-screens.md) | -| 19 | [@react-native-community/slider](https://github.com/callstack/react-native-slider) | 4.4.3 | 是 | [@react-native-oh-tpl/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](/zh-cn/react-native-community-slider.md) | -| 20 | [react-native-SmartRefreshLayout](https://github.com/react-native-studio/react-native-SmartRefreshLayout) | 0.6.7 | 否 | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](/zh-cn/react-native-SmartRefreshLayout.md) | -| 21 | [react-native-svg](https://github.com/software-mansion/react-native-svg) | 13.14.0 | 是 | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](/zh-cn/react-native-svg.md) | -| 22 | [react-native-tab-view](https://github.com/react-navigation/react-navigation/tree/6.x/packages/react-native-tab-view) | 3.5.2 | - | [@react-native-oh-tpl/react-native-tab-view](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-native-tab-view.md) | -| 23 | [react-native-video](https://github.com/react-native-video/react-native-video) | 5.2.1 | 是 | [@react-native-oh-tpl/react-native-video](https://github.com/react-native-oh-library/react-native-video) | [链接](/zh-cn/react-native-video.md) | -| 24 | [react-native-webview](https://github.com/react-native-webview/react-native-webview) | 13.6.2 | 是 | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](/zh-cn/react-native-webview.md) | -| 25 | [@react-navigation/elements](https://github.com/react-navigation/react-navigation/tree/6.x/packages/elements) | 1.3.21 | - | [@react-native-oh-tpl/elements](https://github.com/react-native-oh-library/react-navigation/releases) | [链接](/zh-cn/react-navigation-elements.md) | -| 26 | [crypto-js](https://github.com/brix/crypto-js/tree/4.2.0) | 4.2.0 | - | [crypto-js](https://github.com/brix/crypto-js/tree/4.2.0) | [链接](/zh-cn/crypto-js.md) | -| 27 | [deepmerge](https://github.com/TehShrike/deepmerge) | 4.3.1 | - | [deepmerge](https://github.com/TehShrike/deepmerge/releases) | [链接](/zh-cn/deepmerge.md) | -| 28 | [htmlparser2](https://github.com/fb55/htmlparser2) | 9.1.0 | - | [htmlparser2](https://github.com/fb55/htmlparser2/releases) | [链接](/zh-cn/htmlparser2.md) | -| 29 | [js-beautify](https://github.com/beautifier/js-beautify) | 1.14.9 | - | [js-beautify](https://github.com/beautifier/js-beautify/releases) | [链接](/zh-cn/js-beautify) | -| 30 | [lodash](https://github.com/lodash/lodash/tree/4.17.21) | 4.17.21 | - | [lodash](https://github.com/lodash/lodash//releases) | [链接](/zh-cn/lodash.md) | -| 31 | [mobx-react](https://github.com/mobxjs/mobx/tree/mobx-react%407.6.0) | 7.6.0 | - | [mobx-react](https://github.com/mobxjs/mobx/tree/mobx-react%407.6.0) | [链接](/zh-cn/mobx-react.md) | -| 32 | [mobx](https://github.com/mobxjs/mobx/tree/mobx%406.10.0) | 6.10.0 | - | [mobx](https://github.com/mobxjs/mobx/tree/mobx%406.10.0) | [链接](/zh-cn/mobx.md) | -| 33 | [parse5](https://github.com/inikulin/parse5) | 7.1.2 | - | [parse5](https://github.com/inikulin/parse5/releases) | [链接](/zh-cn/parse5.md) | -| 34 | [prop-types](https://github.com/facebook/prop-types/tree/v15.8.1) | 15.8.1 | - | [prop-types](https://github.com/facebook/prop-types/tree/v15.8.1) | [链接](/zh-cn/prop-types.md) | -| 35 | [react-i18next](https://github.com/i18next/react-i18next) | 8.6.3 | - | [react-i18next](https://github.com/i18next/react-i18next/releases) | [链接](/zh-cn/react-i18next.md) | -| 36 | [react-native-action-button](https://github.com/mastermoo/react-native-action-button) | 2.8.5 | - | [react-native-action-button](https://github.com/mastermoo/react-native-action-button/releases) | [链接](/zh-cn/react-native-action-button.md) | -| 37 | [react-native-autoheight-webview](https://github.com/react-native-oh-library/react-native-autoheight-webview) | 1.6.5 | - | [@react-native-oh-tpl/react-native-autoheight-webview](https://github.com/react-native-oh-library/react-native-autoheight-webview/releases) | [链接](/zh-cn/react-native-autoheight-webview.md) | -| 38 | [@react-native-camera-roll/camera-roll](https://github.com/react-native-oh-library/react-native-cameraroll) | 6.0.0 | 是 | [@react-native-oh-tpl/camera-roll](https://github.com/react-native-oh-library/react-native-cameraroll/releases) | [链接](/zh-cn/react-native-cameraroll.md) | -| 39 | [@react-native-masked-view/masked-view](https://github.com/react-native-masked-view/masked-view) | 0.2.9 | 否 | [@react-native-oh-tpl/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](/zh-cn/react-native-masked-view-masked-view.md) | -| 40 | [@react-native-community/progress-view](https://github.com/react-native-progress-view/progress-view) | 1.4.2 | 是 | [@react-native-community/progress-view](https://github.com/react-native-oh-library/progress-view/releases) | [链接](/zh-cn/react-native-community-progress-view.md) | -| 41 | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control) | 2.5.0 | - | [@react-native-segmented-control/segmented-control](https://github.com/react-native-segmented-control/segmented-control/releases) | [链接](/zh-cn/react-native-community-segmented-control.md) | -| 42 | [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv) | 3.4.9 | - | [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv/releases) | [链接](/zh-cn/react-native-dotenv.md) | -| 43 | [@react-native-community/geolocation](https://github.com/michalchudziak/react-native-geolocation) | 3.1.0 | 是 | [@react-native-oh-tpl/react-native-geolocation](https://github.com/react-native-oh-library/react-native-geolocation/releases) | [链接](/zh-cn/react-native-geolocation.md) | -| 44 | [react-native-qrcode-svg](https://github.com/awesomejerry/react-native-qrcode-svg) | 6.2.0 | - | [@react-native-oh-tpl/react-native-qrcode-svg](https://github.com/react-native-oh-library/react-native-qrcode-svg/releases) | [链接](/zh-cn/react-native-qrcode-svg.md) | -| 45 | [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated) | 3.6.0 | - | [@react-native-oh-tpl/react-native-reanimated](https://github.com/react-native-oh-library/react-native-reanimated/releases) | [链接](/zh-cn/react-native-reanimated.md) | -| 46 | [react-native-render-html](https://github.com/meliorence/react-native-render-html) | 6.3.4 | - | [react-native-render-html](https://github.com/meliorence/react-native-render-html/releases) | [链接](/zh-cn/react-native-render-html.md) | -| 47 | [react-native-section-list-get-item-layout](https://github.com/jsoendermann/rn-section-list-get-item-layout) | 2.2.3 | - | [react-native-section-list-get-item-layout](https://github.com/jsoendermann/rn-section-list-get-item-layout/releases) | [链接](/zh-cn/react-native-section-list-get-item-layout.md) | -| 48 | [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) | 10.0.3 | - | [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons/releases) | [链接](/zh-cn/react-native-vector-icons.md) | -| 49 | [react-native-view-shot](https://github.com/gre/react-native-view-shot) | 3.8.0 | 否 | [@react-native-oh-tpl/react-native-view-shot](https://github.com/react-native-oh-library/react-native-view-shot/releases) | [链接](/zh-cn/react-native-view-shot.md) | -| 50 | [ @react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | 6.5.11 | - | [ @react-navigation/bottom-tabs](https://github.com/react-navigation/react-navigation/tree/6.x/packages/bottom-tabs) | [链接](/zh-cn/react-navigation-bottom-tabs.md) | -| 51 | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native) | 6.1.9 | - | [@react-navigation/native](https://github.com/react-navigation/react-navigation/tree/6.x/packages/native/) | [链接](/zh-cn/react-navigation-native.md) | -| 52 | [@react-navigation/stack](https://github.com/react-navigation/react-navigation/tree/6.x/packages/stack) | 6.3.19 | - | [@react-navigation/stack](https://github.com/react-navigation/react-navigation/tree/6.x/packages/stack) | [链接](/zh-cn/react-navigation-stack.md) | -| 53 | [recyclerlistview](https://github.com/Flipkart/recyclerlistview) | 4.2.0 | - | [recyclerlistview](https://github.com/Flipkart/recyclerlistview/releases) | [链接](/zh-cn/recyclerListView.md) | -| 54 | [rn-placeholder](https://github.com/mfrachet/rn-placeholder) | 3.0.3 | - | [rn-placeholder](https://github.com/mfrachet/rn-placeholder/releases) | [链接](/zh-cn/rn-placeholder.md) | -| 55 | [styled-components](https://github.com/styled-components/styled-components) | 6.1.8 | - | [styled-components](https://github.com/styled-components/styled-components/releases) | [链接](/zh-cn/styled-components.md) | -| 56 | [styled-system](https://github.com/react-native-picker/picker) | 5.1.5 | - | [styled-system](https://github.com/styled-system/styled-system) | [链接](/zh-cn/styled-system.md) | -| 57 | [jeanregisser/react-native-slider](https://github.com/react-native-oh-library/jeanregisser-react-native-slider) | 0.11.0 | - | [jeanregisser/react-native-slider](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/releases) | [链接](/zh-cn/jeanregisser-react-native-slider.md) | -| 58 | [js-beautify](https://github.com/beautifier/js-beautify) | 1.15.1 | - | [js-beautify](https://github.com/beautifier/js-beautify/releases) | [链接](/zh-cn/js-beautify.md) | -| 59 | [react-native-base64](https://github.com/eranbo/react-native-base64) | 0.2.1 | - | [react-native-base64](https://github.com/eranbo/react-native-base64/releases) | [链接](/zh-cn/react-native-base64.md) | -| 60 | [react-native-check-box](https://github.com/crazycodeboy/react-native-check-box) | 2.1.0 | - | [react-native-check-box](https://github.com/crazycodeboy/react-native-check-box/releases) | [链接](/zh-cn/react-native-check-box.md) | -| 61 | [@react-native-community/blur](https://github.com/Kureev/react-native-blur) | 4.4.0 | 是 | [@react-native-oh-tpl/blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) | [链接](/zh-cn/react-native-community-blur.md) | -| 62 | [@react-native-community/push-notification-ios](https://github.com/react-native-push-notification/ios) | 1.11.0 | 否 | [@react-native-community/push-notification-ios](https://github.com/react-native-oh-library/react-native-push-notification-ios/releases) | [链接](/zh-cn/react-native-community-push-notification-ios.md) | -| 63 | [@react-native-cookies/cookies](https://github.com/react-native-cookies/cookies) | 6.2.1 | 否 | [@react-native-cookies/cookies](https://github.com/react-native-oh-library/react-native-cookies/releases) | [链接](/zh-cn/react-native-cookies.md) | -| 64 | [react-native-crypto-js](https://github.com/imchintan/react-native-crypto-js) | 1.0.0 | - | [react-native-crypto-js](https://github.com/imchintan/react-native-crypto-js/releases) | [链接](/zh-cn/react-native-crypto-js.md) | -| 65 | [react-native-maps](https://github.com/react-native-maps/react-native-maps) | 1.10.3 | 是 | [react-native-maps](https://github.com/react-native-maps/react-native-maps/releases) | [链接](/zh-cn/react-native-maps.md) | -| 66 | [react-native-pdf](https://github.com/wonday/react-native-pdf) | 6.7.4 | 是 | [react-native-pdf](https://github.com/react-native-oh-library/react-native-pdf/releases) | [链接](/zh-cn/react-native-pdf.md) | -| 67 | [react-native-redash](https://github.com/wcandillon/react-native-redash/) | 18.1.3 | - | [react-native-redash](https://github.com/wcandillon/react-native-redash/releases) | [链接](/zh-cn/react-native-redash.md) | -| 68 | [react-native-snap-carousel](https://github.com/meliorence/react-native-snap-carousel) | 3.9.1 | - | [react-native-snap-carousel](https://github.com/react-native-oh-library/react-native-snap-carousel/releases) | [链接](/zh-cn/react-native-snap-carousel.md) | -| 69 | [react-native-transitiongroup](https://github.com/madsleejensen/react-native-transitiongroup) | 1.2.0 | - | [react-native-transitiongroup](https://github.com/react-native-oh-library/react-native-transitiongroup/releases) | [链接](/zh-cn/react-native-transitiongroup.md) | -| 70 | [react-native-translucent-modal](https://github.com/23mf/react-native-translucent-modal) | 1.1.0 | - | [react-native-translucent-modal](https://github.com/react-native-oh-library/react-native-translucent-modal/releases) | [链接](/zh-cn/react-native-translucent-modal.md) | -| 71 | [redux](https://github.com/reduxjs/redux) | 5.0.1 | - | [redux](https://github.com/reduxjs/redux/releases) | [链接](/zh-cn/redux.md) | -| 72 | [redux-logger](https://github.com/LogRocket/redux-logger) | 3.0.6 | - | [redux-logger](https://github.com/LogRocket/redux-logger/releases) | [链接](/zh-cn/redux-logger.md) | -| 73 | [redux-persist](https://github.com/rt2zz/redux-persist) | 6.0.0 | - | [redux-persist](https://github.com/rt2zz/redux-persist/releases) | [链接](/zh-cn/redux-persist.md) | - - -## 社区 - -[Github Organization: react-native-oh-library](https://github.com/react-native-oh-library) \ No newline at end of file diff --git a/_sidebar.md b/_sidebar.md deleted file mode 100644 index b2626402efc5eb63762e1f5923284e2ae3545cbc..0000000000000000000000000000000000000000 --- a/_sidebar.md +++ /dev/null @@ -1,82 +0,0 @@ - - -- [首页](/zh-cn/README.md) -- [贡献文档](/zh-cn/contribute.md) -- [文档模板](/zh-cn/model.md) -- 三方库说明文档合集 - - RN原生库 - - [@react-native-async-storage/async-storage](/zh-cn/react-native-async-storage-async-storage.md) - - [react-native-cameraroll](/zh-cn/react-native-cameraroll.md) - - [@react-native-clipboard/clipboard](/zh-cn/react-native-clipboard-clipboard.md) - - [@react-native-community/checkbox](/zh-cn/react-native-community-checkbox.md) - - [@react-native-community/datetimepicker](/zh-cn/react-native-community-datetimepicker.md) - - [@react-native-community/netinfo](/zh-cn/react-native-community-netinfo.md) - - [@react-native-community/progress-bar-android](/zh-cn/react-native-community-progress-bar-android.md) - - [@react-native-community/progress-view](/zh-cn/react-native-community-progress-view.md) - - [@react-native-community/slider](/zh-cn/react-native-community-slider.md) - - [react-native-exception-handler](/zh-cn/react-native-exception-handler.md) - - [react-native-fast-image](/zh-cn/react-native-fast-image.md) - - [react-native-geolocation](/zh-cn/react-native-geolocation.md) - - [react-native-gesture-handler](/zh-cn/react-native-gesture-handler.md) - - [react-native-image-picker](/zh-cn/react-native-image-picker.md) - - [react-native-linear-gradient](/zh-cn/react-native-linear-gradient.md) - - [@react-native-masked-view/masked-view](/zh-cn/react-native-masked-view-masked-view.md) - - [react-native-pager-view](/zh-cn/react-native-pager-view.md) - - [@react-native-picker/picker](/zh-cn/react-native-picker-picker.md) - - [react-native-reanimated](/zh-cn/react-native-reanimated.md) - - [react-native-safe-area-context](/zh-cn/react-native-safe-area-context.md) - - [react-native-SmartRefreshLayout](/zh-cn/react-native-SmartRefreshLayout.md) - - [react-native-svg](/zh-cn/react-native-svg.md) - - [react-native-vector-icons](/zh-cn/react-native-vector-icons.md) - - [react-native-video](/zh-cn/react-native-video.md) - - [react-native-view-shot](/zh-cn/react-native-view-shot.md) - - [react-native-webview](/zh-cn/react-native-webview.md) - - [@shopify/flash-list](/zh-cn/shopify-flash-list.md) - - [@react-native-community/blur](/zh-cn/react-native-community-blur.md) - - [@react-native-community/push-notification-ios](/zh-cn/react-native-community-push-notification-ios.md) - - [react-native-cookies](/zh-cn/react-native-cookies.md) - - [react-native-maps](/zh-cn/react-native-maps.md) - - [react-native-pdf](/zh-cn/react-native-pdf.md) - - RN JS库 - - [lottie-react-native](/zh-cn/lottie-react-native.md) - - [react-i18next](/zh-cn/react-i18next.md) - - [react-native-action-button](/zh-cn/react-native-action-button.md) - - [react-native-autoheight-webview](/zh-cn/react-native-autoheight-webview.md) - - [@react-native-community/segmented-control](/zh-cn/react-native-community-segmented-control.md) - - [react-native-dotenv](/zh-cn/react-native-dotenv.md) - - [react-native-qrcode-svg](/zh-cn/react-native-qrcode-svg.md) - - [react-native-render-html](/zh-cn/react-native-render-html.md) - - [react-native-screens](/zh-cn/react-native-screens.md) - - [react-native-section-list-get-item-layout](zh-cn/react-native-section-list-get-item-layout.md) - - [react-native-tab-view](/zh-cn/react-native-tab-view.md) - - [@react-navigation/bottom-tabs](/zh-cn/react-navigation-bottom-tabs.md) - - [@react-navigation/elements](/zh-cn/react-navigation-elements.md) - - [@react-navigation/native](/zh-cn/react-navigation-native.md) - - [@react-navigation/stack](/zh-cn/react-navigation-stack.md) - - [react-navigation](/zh-cn/react-navigation) - - [recyclerlistview](/zh-cn/recyclerlistview.md) - - [rn-placeholder](/zh-cn/rn-placeholder.md) - - [jeanregisser/react-native-slider](/zh-cn/jeanregisser-react-native-slider.md) - - [react-native-base64](/zh-cn/react-native-base64.md) - - [react-native-check-box](/zh-cn/react-native-check-box.md) - - [react-native-crypto-js](/zh-cn/react-native-crypto-js.md) - - [react-native-redash](/zh-cn/react-native-redash.md) - - [react-native-snap-carousel](/zh-cn/react-native-snap-carousel.md) - - [react-native-transitiongroup](/zh-cn/react-native-transitiongroup.md) - - [react-native-translucent-modal](/zh-cn/react-native-translucent-modal.md) - - 纯JS库 - - [crypto-js](/zh-cn/crypto-js.md) - - [deepmerge](/zh-cn/deepmerge.md) - - [htmlparser2](/zh-cn/htmlparser2.md) - - [js-beautify](/zh-cn/js-beautify.md) - - [lodash](/zh-cn/lodash.md) - - [mobx-react](/zh-cn/mobx-react.md) - - [mobx](/zh-cn/mobx.md) - - [parse5](/zh-cn/parse5.md) - - [prop-types](/zh-cn/prop-types.md) - - [styled-components](/zh-cn/styled-components.md) - - [styled-system](/zh-cn/styled-system.md) - - [redux](/zh-cn/redux.md) - - [redux-logger](/zh-cn/redux-logger.md) - - [redux-persist](/zh-cn/redux-persist.md) - - [qrcode-generator](/zh-cn/qrcode-generator.md) diff --git a/zh-cn/EventBus.md b/zh-cn/EventBus.md new file mode 100644 index 0000000000000000000000000000000000000000..9f94ec7a19fac92e19fe82564fa092a851944723 --- /dev/null +++ b/zh-cn/EventBus.md @@ -0,0 +1,325 @@ +模板版本:v0.1.3 + +

+

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.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59; + +## 方法 + +详情见 [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 | + +## 遗留问题 + +## 其他 diff --git a/zh-cn/Immer.md b/zh-cn/Immer.md new file mode 100644 index 0000000000000000000000000000000000000000..ada7f260cdac0278601d0a3ec5aaad9cdc0125d1 --- /dev/null +++ b/zh-cn/Immer.md @@ -0,0 +1,812 @@ +模板版本:v0.1.3 + +

+

immer

+

+

+ + License + +

+ +> [!TIP] [Github 地址](https://github.com/immerjs/immer) + +## 安装与使用 + +进入到工程目录并输入以下命令: + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm 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-期望值不可变数据可以更改 + + + + + 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 + +目前鸿蒙暂不支持 AutoLink,所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法: + +1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); +2. 直接链接源码。 + +方法一:通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + +方法二:直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil" + } +``` + +打开终端,执行: + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入 BlobUtilPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULE_DIR}/rnoh-blob-util/src/main/cpp" ./blobUtil) +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: link_packages +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_blob_util) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```diff +#include "RNOH/PackageProvider.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) + }; +} +``` + +### 在 ArkTs 侧引入 BlobUtilPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: + +```diff +... ++ import {BlobUtilPackage} from 'rnoh-blob-util/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new BlobUtilPackage(ctx) + ]; +} +``` + +### 运行 + +点击右上角的 `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-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 | Android/IOS | No | +| base64 | | No | Android/IOS | No | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-blob-util/blob/master/LICENSE) ,请自由地享受和参与开源。 diff --git a/zh-cn/react-native-canvas.md b/zh-cn/react-native-canvas.md new file mode 100644 index 0000000000000000000000000000000000000000..4d75fe54ba7d1a58f95a2d1d434b2de7387ac577 --- /dev/null +++ b/zh-cn/react-native-canvas.md @@ -0,0 +1,152 @@ +模板版本:v0.1.3 + +

+

react-native-canvas

+

+

+ + License + +

+ +> [!TIP] [Github 地址](https://github.com/iddan/react-native-canvas) + +## 安装与使用 + +进入到工程目录并输入以下命令: + + + +#### **npm** + +```bash +npm install react-native-canvas@0.1.39 +``` + +#### **yarn** + +```bash +yarn add react-native-canvas@0.1.39 +``` + + + +下面的代码展示了这个库的基本使用场景: + +```tsx +import React, { useRef, useEffect } from "react"; +import { View, StyleSheet, Text, ScrollView } from "react-native"; +import Canvas, { + Image as CanvasImage, + CanvasRenderingContext2D, + Path2D, +} from "react-native-canvas"; + +const CanvasDemo = () => { + const canvasRef = useRef(null); + + useEffect(() => { + const canvas = canvasRef.current; + if (canvas) { + canvas.width = 300; + canvas.height = 500; + const context = canvas.getContext("2d") as CanvasRenderingContext2D; + + // 绘制背景 + context.fillStyle = "gray"; + context.fillRect(0, 0, 1000, 1000); + + //绘制矩形 + context.fillStyle = "blue"; + context.fillRect(10, 10, 100, 100); + + //绘制椭圆 + const ellipse = new Path2D(canvas); + ellipse.ellipse(200, 60, 50, 30, 0, 0, 2 * Math.PI); + context.fillStyle = "green"; + context.fill(ellipse); + + //绘制线条 + context.beginPath(); + context.moveTo(10, 150); + context.lineTo(150, 150); + context.strokeStyle = "red"; + context.stroke(); + + // 绘制文字 + context.font = "bold 24px Arial"; + context.fillStyle = "orange"; + context.fillText("Hello World", 20, 200); + + //绘制图片 + const image = new CanvasImage(canvas); + image.src = + "https://upload.wikimedia.org/wikipedia/commons/6/63/Biho_Takashi._Bat_Before_the_Moon%2C_ca._1910.jpg"; + image.addEventListener("load", () => { + context.drawImage(image, 10, 250, 100, 100); + }); + } + }, []); + + return ( + + + Canvas Demo Start + + Canvas Demo End + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: "center", + justifyContent: "center", + paddingVertical: 50, + }, + title: { + fontSize: 24, + fontWeight: "bold", + marginBottom: 20, + }, + canvas: { + width: 300, + height: 500, + backgroundColor: "blue", + }, +}); + +export default CanvasDemo; +``` + +## Link + +本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-webview 的原生端代码,如已在鸿蒙工程中引入过该库,则无需再次引入,可跳过本章节步骤,直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-webview 文档的 Link 章节](https://gitee.com/zhanghao2519/usage-docs/blob/master/zh-cn/react-native-webview.md)进行引入 + +## 兼容性 + +在以下版本验证通过 + +1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.700; ROM:2.0.0.72; + +## 属性 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- | +| `heigth` | Reflects the height of the canvas in pixels. | number | yes | Android IOS | YES | +| `width` | Reflects the width of the canvas in pixels. | number | yes | Android IOS | YES | +| `getContext()` | Standard CanvasRenderingContext2D. [MDN](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D). Only difference is `await` should be used to retrieve values from methods.. | function | yes | Android IOS | YES | +| `Image()` | WebView Image constructor. Unlike in the browsers accepts canvas as first argument. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) | function | No | Android IOS | YES | +| `Path2D()` | Path2D API constructor. Unlike in the browsers, this requires the canvas as first argument. See also https://developer.mozilla.org/en-US/docs/Web/API/Path2D/Path2D.. | function | No | Android IOS | YES | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/iddan/react-native-canvas/blob/master/license.txt) ,请自由地享受和参与开源。 diff --git a/zh-cn/react-native-confirmation-code-field.md b/zh-cn/react-native-confirmation-code-field.md new file mode 100644 index 0000000000000000000000000000000000000000..63c2213f3a2c82a72963be0c5e57cfd72c19faca --- /dev/null +++ b/zh-cn/react-native-confirmation-code-field.md @@ -0,0 +1,156 @@ +> 模板版本:v0.1.3 + +

+

react-native-confirmation-code-field

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/retyui/react-native-confirmation-code-field) + +## 安装与使用 + +#### **npm** + +```bash +npm install react-native-confirmation-code-field@7.3.2 +``` + +#### **yarn** + +```bash +yarn add react-native-confirmation-code-field@7.3.2 +``` + + + +下面的代码展示了这个库的基本使用场景: + +> [!WARNING] 使用时 import 的库名不变。 + +```js +import React, { useState } from "react"; +import { SafeAreaView, Text, StyleSheet } from "react-native"; + +import { + CodeField, + Cursor, + useBlurOnFulfill, + useClearByFocusCell, +} from "react-native-confirmation-code-field"; + +const styles = StyleSheet.create({ + root: { flex: 1, padding: 20 }, + title: { textAlign: "center", fontSize: 30 }, + codeFieldRoot: { marginTop: 20 }, + cell: { + width: 40, + height: 40, + lineHeight: 38, + fontSize: 24, + borderWidth: 2, + borderColor: "#00000030", + textAlign: "center", + }, + focusCell: { + borderColor: "#000", + }, +}); + +const CELL_COUNT = 6; + +const App = () => { + const [value, setValue] = useState(""); + const ref = useBlurOnFulfill({ value, cellCount: CELL_COUNT }); + const [props, getCellOnLayoutHandler] = useClearByFocusCell({ + value, + setValue, + }); + + return ( + + Verification + ( + + {symbol || (isFocused ? : null)} + + )} + /> + + ); +}; + +export default App; +``` + +## 约束与限制 + +## 兼容性 + +本文档内容基于以下版本验证通过: + +1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.59; + +## 组件 + +> [!tip] "Platform"列表示该组件在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该组件;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Platform | HarmonyOS Support | +| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------- | ----------------- | +| `CodeField` | This a base component that render RootComponent (default: View) with cells that would be returned by renderCell() and a that will be invisible and over all cells within root component | component | All | yes | +| `Cursor` | It's a help component for simulation a cursor blinking animation in components | component | All | yes | + +## CodeField属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------- | -------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | -------- | ----------------- | +| `cellCount` | Number of characters in input (optional, default: 4) | number | yes | All | yes | +| `renderCell?` | Required function for Cell rendering, will be invoke with next options:{index: number, symbol: string, isFocused: boolean} | ReactElement | No | All | yes | +| `RootComponent?` | if you want change root component for example using animations RootComponent={Animated.View} (optional, default View) | ComponentType | No | All | yes | +| `InputComponent?` | If you want to provide a custom TextInput component that can receive the same props (optional, default TextInput) | ComponentType | No | All | yes | +| `rootStyle?` | Styles for root component (optional) | StyleProp | No | All | yes | +| `RootProps?` | Any props that will applied for root component | Object | No | All | yes | +| `textInputStyle?` | Styles for invisible , can be used for testing or debug (optional) | StyleProp | No | All | yes | + +## Hooks + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -------- | -------- | ----------------- | +| `useClearByFocusCell` | Simple hook that add functionality that trim value by pressed cell,After invoke this hook wil return array with two values `[props,getCellOnLayout]`;
-`props`- an object that you should spreed to ` `
- `getCellOnLayout(index: number): Function` - helper method that returns `onLayout` handler
- If you need to style only one borderX (example `borderBottom`) you need to know about React Native issue with [border styles for `` on iOS](https://github.com/facebook/react-native/issues/23537).
- To fix it need `` wrapper for Cell, but don't forger to move `onLayout={getCellOnLayoutHandler(index)` to `` | Function | yes | All | yes | +| `useBlurOnFulfill` | This hook include a logic to blurring``when value fulfilled You should pass two params:
- `value?: string` - a string value that;
- `cellCount: number`;
Returned value will be a TextInput ref that you should pass to``component.And when a value length would equal cellCount will be called `.blur()` method.It work perfectly with `useClearByFocusCell` hook | Ref | yes | All | yes | + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/Kureev/react-native-blur/blob/master/LICENSE) ,请自由地享受和参与开源。 diff --git a/zh-cn/react-native-drawer-layout-polyfill.md b/zh-cn/react-native-drawer-layout-polyfill.md new file mode 100644 index 0000000000000000000000000000000000000000..ed6d5f373f347d5bc388e8c23f31a40f171aa5b4 --- /dev/null +++ b/zh-cn/react-native-drawer-layout-polyfill.md @@ -0,0 +1,256 @@ +模板版本:v0.1.3 + +

+

react-native-drawer-layout-polyfill

+

+

+ + License + +

+ +> [!TIP] [Github 地址](https://github.com/rnc-archive/react-native-drawer-layout-polyfill) + +## 安装与使用 + +进入到工程目录并输入以下命令: + + + +#### **npm** + +```bash +npm install react-native-drawer-layout-polyfill@2.0.0 +``` + +#### **yarn** + +```bash +yarn add react-native-drawer-layout-polyfill@2.0.0 +``` + + + +下面的代码展示了这个库的基本使用场景: + +```tsx +import React, { useState, useRef } from "react"; +import { Button, Text, StyleSheet, View, TextInput } from "react-native"; +import DrawerLayout from "react-native-drawer-layout-polyfill"; + +const App = () => { + const drawerLayoutRef = useRef(null); + const [drawerPosition, setDrawerPosition] = useState("left"); + const [keyboardDismissMode, setKeyboardDismissMode] = useState("none"); + const [drawerLockMode, setDrawerLockMode] = useState("unlocked "); + const [isOpen, setIsOpen] = useState("关闭 "); + const [drawerSlideOutput, setDrawerSlideOutput] = useState(""); + const [drawerStateChangedOutput, setDrawerStateChangedOutput] = useState(""); + const [drawerWidth, setDrawerWidth] = useState(300); + const [value, onChangeText] = useState(""); + + const open = () => { + drawerLayoutRef.current.openDrawer(); + }; + + const close = () => { + drawerLayoutRef.current.closeDrawer(); + }; + + const changeDrawerPosition = () => { + console.log("drawerPosition-修改弹框位置", drawerPosition); + if (drawerPosition === "left") { + setDrawerPosition("right"); + } else { + setDrawerPosition("left"); + } + }; + + const changeDrawerHideKeyboard = () => { + console.log("keyboardDismissMode-是否隐藏软键盘", keyboardDismissMode); + if (keyboardDismissMode === "none") { + setKeyboardDismissMode("on-drag"); + } else { + setKeyboardDismissMode("none"); + } + }; + + const changeDrawerWidth = () => { + console.log("drawerWidth-修改弹框宽度", drawerWidth); + if (value && Number(value) >= 100) { + setDrawerWidth(Number(value)); + } + }; + + const changeDrawerLockMode = (type) => { + console.log("drawerLockMode-修改弹框锁定模式", type); + setDrawerLockMode(type); + }; + + const handleDrawerOpen = (e) => { + console.log("onDrawerOpen-打开弹框的回调"); + setIsOpen("打开"); + }; + + const handleDrawerClose = (e) => { + console.log("onDrawerClose-关闭弹框的回调"); + setIsOpen("关闭"); + }; + + const handleDrawerSlide = (e) => { + console.log("onDrawerSlide-导航视图发生交互时的回调函数"); + setDrawerSlideOutput(JSON.stringify(e.nativeEvent)); + }; + + const handleDrawerStateChanged = (e) => { + console.log("onDrawerStateChanged-导航视图的状态发生变化时的回调函数"); + setDrawerStateChangedOutput(JSON.stringify(e)); + }; + + const navigationView = ( + + I'm in the Drawer! + 弹框状态:{isOpen} + + 弹框打开关闭过程中触发:{drawerSlideOutput} + + + 弹框状态切换触发:{drawerStateChangedOutput} + + + {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.5; SDK:HarmonyOS NEXT DP2; IDE:DevEco Studio 4.1.3.700; ROM:204.1.0.72(SP2DEVC00E72R1P1); + +## 属性 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | 备注 | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------- | -------- | ----------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------- | +| `style` | 图片宽(width)高(height),边框等样式 | object | yes | Android IOS | YES | 在不加orginalWidth与orginalHeight属性时,style里面必须设置宽width,高height才能把图片加载出来 | +| `source` | 图片文件源: 本地图片 source={require('./assets/expo.png')};
网略图片 source={{uri:"https://octodex.github.com/images/stormtroopocat.jpg"}} | 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 | | + +## 原库已知问题 + +1. 在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) +2. `borderRadius`图片圆角属性,在鸿蒙,ios,安卓均不支持,官方文档互动有提到borderRadius不生效;[issues](https://github.com/huiseoul/react-native-fit-image/issues/111) + +## 其他 diff --git a/zh-cn/react-native-image-editor.md b/zh-cn/react-native-image-editor.md new file mode 100644 index 0000000000000000000000000000000000000000..322f5cc7652aa36d7ea58b6213beee201e3fe21e --- /dev/null +++ b/zh-cn/react-native-image-editor.md @@ -0,0 +1,211 @@ +> 模板版本:v0.1.3 + +

+

@react-native-community/image-editor

+

+

+ + Supported platforms + + + License + + +

+ +> [Github 地址](https://github.com/react-native-oh-library/react-native-image-editor) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/image-editor Releases](https://github.com/react-native-oh-library/react-native-image-editor/releases),并下载适用版本的 tgz 包。 + +#### **npm** + +```bash +npm install @react-native-oh-tpl/image-editor@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/image-editor@file:# +``` + +下面的代码展示了这个库的基本使用场景: + +> [!TIP] 使用时 import 的库名不变。 + +```js +import ImageEditor from "@react-native-community/image-editor"; + +ImageEditor.cropImage(uri, cropData).then((result) => { + console.log("Cropped image uri:", result); +}); +``` + +## Link + +目前鸿蒙暂不支持 AutoLink,所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 引入原生端代码 + +目前有两种方法: + +1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法); +2. 直接链接源码。 + +方法一:通过 har 包引入 + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-image-editor": "file:../../node_modules/@react-native-oh-tpl/image-editor/harmony/image_editor.har" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + +方法二:直接链接源码 + +> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`,添加以下依赖 + +```json +"dependencies": { + "rnoh": "file:../rnoh", + "rnoh-image-editor": "file:../../node_modules/@react-native-oh-tpl/image-editor/harmony/image_editor" + } +``` + +打开终端,执行: + +```bash +cd entry +ohpm install --no-link +``` + +### 配置 CMakeLists 和引入ImageEditorPackage + +打开 `entry/src/main/cpp/CMakeLists.txt`,添加: + +```diff +project(rnapp) +cmake_minimum_required(VERSION 3.4.1) +set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") +set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") +set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") + +add_subdirectory("${RNOH_CPP_DIR}" ./rn) + +# RNOH_BEGIN: add_package_subdirectories +add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) ++ add_subdirectory("${OH_MODULE_DIR}/rnoh-image-editor/src/main/cpp" ./image-editor) +# RNOH_END: add_package_subdirectories + +add_library(rnoh_app SHARED + "./PackageProvider.cpp" + "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" +) + +target_link_libraries(rnoh_app PUBLIC rnoh) + +# RNOH_BEGIN: link_packages +target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) ++ target_link_libraries(rnoh_app PUBLIC rnoh_image_editor) +# RNOH_END: link_packages +``` + +打开 `entry/src/main/cpp/PackageProvider.cpp`,添加: + +```diff +#include "RNOH/PackageProvider.h" +#include "SamplePackage.h" ++ #include "ImageEditorPackage.h" + +using namespace rnoh; + +std::vector> PackageProvider::getPackages(Package::Context ctx) { + return { + std::make_shared(ctx), ++ std::make_shared(ctx) + }; +} +``` + +### 在 ArkTs 侧引入 ImageEditorPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加: + +```diff +... ++ import {ImageEditorPackage} from "rnoh-image-editor/ts"; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new ImageEditorPackage(ctx) + ]; +} +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行: + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + +## 约束与限制 + +### 兼容性 + +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[Releases](https://github.com/react-native-oh-library/react-native-image-editor/releases) + +## API + +| Name | Description | Platform | HarmonyOS Support | +| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ----------------- | +| cropImage | Crop the image specified by the URI param. If URI points to a remote image, it will be downloaded automatically. If the image cannot be loaded/downloaded, the promise will be rejected.

If the cropping process is successful, the resultant cropped image will be stored in the cache path, and the CropResult returned in the promise will point to the image in the cache path. ⚠️ Remember to delete the cropped image from the cache path when you are done with it. | ios/Android | yes | + +cropData + +| 名称 | 类型 | 说明 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | +| `offset` | { x: number, y: number } | The top-left corner of the cropped image, specified in the original image's coordinate space | yes | All | yes | +| `size` | { width: number, height: number } | Size (dimensions) of the cropped image | yes | All | yes | +| `displaySize` | { width: number, height: number } | Size to which you want to scale the cropped image | no | All | yes | +| `resizeMode` | 'contain' \| 'cover' \| 'stretch' | Resizing mode to use when scaling the image**Default value**: `'cover'` | no | All | yes | +| `quality` | number | A value in range `0.0` - `1.0` specifying compression level of the result image. `1` means no compression (highest quality) and `0` the highest compression (lowest quality)
**Default value**: `0.9` | no | All | yes | +| `format` | 'jpeg' \| 'png' \| 'webp' | The format of the resulting image.
**Default value**: based on the provided image;
if value determination is not possible, `'jpeg'` will be used as a fallback. | no | All | yes | + +## + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [ [The MIT License (MIT)]](https://github.com/callstack/react-native-image-editor/blob/master/LICENSE) ,请自由地享受和参与开源。 diff --git a/zh-cn/react-native-image-viewer.md b/zh-cn/react-native-image-viewer.md new file mode 100644 index 0000000000000000000000000000000000000000..107b91fcd025d8e1a408ac5b372f3f4c023a23c0 --- /dev/null +++ b/zh-cn/react-native-image-viewer.md @@ -0,0 +1,277 @@ +> 模板版本:v0.1.3 + +

+

react-native-image-viewer

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-image-viewer) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-image-viewer> Releases](https://github.com/react-native-oh-library/react-native-image-viewer/releases),并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令: + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### npm + +```bash +npm install @react-native-oh-tpl/react-native-image-viewer@file:# +``` + +#### yarn + +```bash +yarn add @react-native-oh-tpl/react-native-image-viewer@file:# +``` + + + +下面的代码展示了这个库的基本使用场景: + +```tsx +import React, { useState } from "react"; +import { + Text, + View, + Button, + Image, + ScrollView, + StyleSheet, +} from "react-native"; +import ImageViewer from "react-native-image-zoom-viewer"; + +const ReactImageZoon = () => { + // 向下滑动的阈值 + const [flipThreshold, setFlipThreshold] = useState(0); + // 页脚位置 + const [footerContainerStyle, setFlexooterContainerStyle] = useState(100); + // 翻页动画时间 + const [pageAnimateTimeA, setPageAnimateTime] = useState(0); + + const [changeStatus, setChangeStatus] = useState(""); + const renderHeaderFun = () => { + return ( + + + 自定义页头或页脚 + + + ); + }; + + const renderArrowLeftFun = () => { + return ( + + + + ); + }; + const renrenderArrowRightFun = () => { + return ( + + + + ); + }; + + const renderIndicatorFn = (currentIndex?: number, allSize?: number) => { + return ( + + {`${currentIndex}/${allSize}`} + + ); + }; + + const images = [ + { + url: "", + props: { + // headers: ... + source: require("./assets/1.png"), + }, + }, + { + url: "https://octodex.github.com/images/godotocat.png", + props: { + // headers: ... + }, + }, + { + url: "", + props: {}, + }, + ]; + + const clearBtn = () => { + setChangeStatus(""); + setFlexooterContainerStyle(100); + setPageAnimateTime(0); + }; + return ( + + + + + imageUrls enableImageZoom;index;saveToLocalByLongPress; + backgroundColor,onChange; + flipThreshold;renderIndicator;renderArrowRight + renderArrowLeft;pageAnimateTime;renderHeader;renderFooter; + onClick;footerContainerStyle;failImageSource + + 保存到相机的回调onSaveToCamera + 查看更改的状态{changeStatus} + + + { + setChangeStatus("onSaveToCamera"); + }} + onChange={() => { + setChangeStatus("onChange"); + }} + onClick={() => { + setChangeStatus("onClick"); + }} + flipThreshold={flipThreshold} + renderArrowLeft={renderArrowLeftFun} + renderArrowRight={renrenderArrowRightFun} + pageAnimateTime={pageAnimateTimeA} + renderHeader={renderHeaderFun} + renderFooter={renderHeaderFun} + renderIndicator={renderIndicatorFn} + footerContainerStyle={{ + bottom: footerContainerStyle, + position: "absolute", + zIndex: 9999, + }} + failImageSource={{ + width: 300, + height: 300, + url: "https://octodex.github.com/images/Robotocat.png", + }} + /> + + + + + + ); +}; +const styles = StyleSheet.create({ + container: { + flexDirection: "row", + justifyContent: "space-around", + }, +}); + +export default ReactImageZoon; +``` + +## 兼容性 + +在以下版本验证通过 + +1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:204.1.0.59; + +## 属性 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | Remark | +| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | ----------- | ----------------- | ---------------------------------------- | +| imageUrls | Image Source | array | yes | Android IOS | YES | | +| enableImageZoom | Enable image zoom | boolean | no | Android IOS | NO | | +| onShowModal | The callback for show modal | function
(content?: JSX.Element) => void | no | NO | NO | 此属性在HarmonyOS,Android ,IOS均不生效 | +| onCancel | The callback for cancel modal | function
() => void | no | Android IOS | YES | | +| flipThreshold | Swipe threshold of the next page | number | no | Android IOS | YES | | +| maxOverflow | The X position maximum, that current page can slide to the next page | number | no | Android IOS | YES | | +| index | Init index of images | number | no | Android IOS | YES | | +| failImageSource | placeholder for fail | string, object
{url: string} | no | Android IOS | YES | | +| loadingRender | placeholder for loading | function
() => React.ReactElement | no | Android IOS | YES | | +| onSaveToCamera | The callback for save to camera | function
(index?: number => void | no | Android IOS | YES | | +| onChange | When the image changed | function
(index?: number => void | no | Android IOS | YES | | +| onMove | ()=> {} | ( position: [IOnMove](https://github.com/ascoders/react-native-image-zoom/blob/master/src/image-zoom/image-zoom.type.ts) )=>void | reports movement position data (helpful to build overlays) | Android IOS | YES | | +| saveToLocalByLongPress | Enable save to camera when long press | boolean | no | Android IOS | YES | | +| onClick | Onclick | function
(onCancel?: function) => void | no | Android IOS | YES | | +| onDoubleClick | OnDoubleClick | function
(onCancel?: function) => void | no | 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 | no | Android IOS | YES | | +| renderHeader | Custom header | function
(currentIndex?: number) => React.ReactElement | no | Android IOS | YES | | +| renderFooter | Custom footer | function
(currentIndex?: number) => React.ReactElement | no | Android IOS | YES | | +| renderIndicator | Custom indicator | function
`(currentIndex?: number, allSize?) => React.ReactElement`: number | no | Android IOS | YES | | +| renderImage | Custom image component | function
(props: any) => React.ReactElement | no | Android IOS | YES | | +| renderArrowLeft | Custom left arrow | function
() => React.ReactElement | no | Android IOS | YES | | +| renderArrowRight | Custom right arrow | function
() => React.ReactElement | no | Android IOS | YES | | +| onSwipeDown | Callback for swipe down | function
() => void | no | Android IOS | YES | | +| footerContainerStyle | custom style props for container that will be holding your footer that you pass | object
{someStyle: someValue} | no | Android IOS | YES | | +| backgroundColor | Component background color | string
white | no | Android IOS | YES | | +| enableSwipeDown | Enable swipe down to close image viewer. When swipe down, will trigger onCancel. | boolean | no | Android IOS | YES | | +| swipeDownThreshold | Threshold for firing swipe down function | number | no | Android IOS | YES | | +| doubleClickInterval | Double click interval. | number | no | Android IOS | YES | | +| pageAnimateTime | Set the animation time for page flipping. | number | no | Android IOS | YES | | +| enablePreload | Preload the next image | boolean | no | Android IOS | YES | | +| useNativeDriver | Whether to animate using [`useNativeDriver`](https://reactnative.dev/docs/animations#using-the-native-driver) | boolean | no | 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 | no | Android IOS | YES | | +| menuContext | Custom menu context. | object
{someKey: someValue} | no | Android IOS | YES | | + +## 遗留问题 + +- [ ] 本库 CameraRoll.saveToCameraRoll 还未完全鸿蒙化,暂不支持调起相册 (未解决)[#I99NUM](https://gitee.com/chenchen2019710/usage-docs/issues/I99NUM) +- [ ] 本库依赖 react-native-image-zoom ,enableImageZoom属性还未完全鸿蒙化(未解决)[#I99NP7](https://gitee.com/wuyasmile/usage-docs/issues/I99NP7) +- [ ] 本库依赖 react-native-image-zoom ,长按触发框架图片拖拽,应用崩溃(未解决)[#I99NQ7](https://gitee.com/wuyasmile/usage-docs/issues/I99NQ7) + +## 其他 + +## 开源协议 + +本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-image-viewer/blob/sig/LICENSE) ,请自由地享受和参与开源。 diff --git a/zh-cn/react-native-image-viewing.md b/zh-cn/react-native-image-viewing.md new file mode 100644 index 0000000000000000000000000000000000000000..f401b850a007634e0d7bd9a45adfcd5adc88c65f --- /dev/null +++ b/zh-cn/react-native-image-viewing.md @@ -0,0 +1,220 @@ +> 模板版本:v0.1.3 + +

+

react-native-image-viewing

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-viewing) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-image-viewing> Releases](https://github.com/react-native-oh-library/react-native-image-viewing/releases),并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令: + +> [!TIP] # 处替换为 tgz 包的路径 + + + +进入到工程目录并输入以下命令: + +#### npm + +```bash +npm install @react-native-oh-tpl/react-native-image-viewing@file:# +``` + +#### yarn + +```bash +yarn add @react-native-oh-tpl/react-native-image-viewing@file:# +``` + +快速使用: + +```js +import React, { useState } from "react"; +import { + Alert, + Platform, + SafeAreaView, + StatusBar, + StyleSheet, + Text, + View, + Image, ScrollView, TouchableOpacity +} from "react-native"; +import memoize from "lodash/memoize"; +import get from "lodash/get"; +import ImageViewing from "react-native-image-viewing"; +import {ImageSource} from "react-native-image-viewing/dist/@types" + +type Props = { + images: string[]; + onPress: (index: number) => void; + shift?: number; +}; + +const IMAGE_WIDTH = 120; +const IMAGE_HEIGH = 120; + +const architecture = [ + { + thumbnail: "https://img.zcool.cn/community/01d191576ccecb0000018c1b64e382.jpg@1280w_1l_2o_100sh.jpg", + original: "https://img.zcool.cn/community/01d191576ccecb0000018c1b64e382.jpg@1280w_1l_2o_100sh.jpg", + }, + { + thumbnail: "https://p0.ssl.qhimgs1.com/sdr/400__/t0461b1cfd7e4ef2b66.jpg", + original: "https://p0.ssl.qhimgs1.com/sdr/400__/t0461b1cfd7e4ef2b66.jpg", + }, + { + thumbnail: "https://p0.ssl.qhimgs1.com/sdr/400__/t017c44dc545b663cce.jpg", + original: "https://p0.ssl.qhimgs1.com/sdr/400__/t017c44dc545b663cce.jpg", + } +]; + + +const ImageList = ({ images, shift = 0, onPress }: Props) => ( + + {images.map((imageUrl, index) => ( + onPress(index)} + > + + + ))} + +); + +const styles1 = StyleSheet.create({ + root: { flexGrow: 0 }, + container: { + flex: 0, + paddingLeft: 10, + marginBottom: 10 + }, + button: { + marginRight: 10 + }, + image: { + width: IMAGE_WIDTH, + height: IMAGE_HEIGH, + borderRadius: 10 + } +}); + +function App() { + const [currentImageIndex, setImageIndex] = useState(0); + const [images, setImages] = useState(architecture); + const [isVisible, setIsVisible] = useState(false); + + const onSelect = (images, index) => { + setImageIndex(index); + setImages(images); + setIsVisible(true); + }; + + const onRequestClose = () => setIsVisible(false); + + + const getImageSource = memoize((images): ImageSource[] => + images.map((image) => + typeof image.original === "number" + ? image.original + : { uri: image.original as string } + ) + ); + + return ( + + image.thumbnail)} + onPress={(index) => onSelect(architecture, index)} + shift={0.75} + /> + + + ); +} + +const styles = StyleSheet.create({ + root: { + flex: 1, + backgroundColor: "#000", + ...Platform.select({ + android: { paddingTop: StatusBar.currentHeight }, + default: null, + }), + }, + about: { + flex: 1, + marginTop: -12, + alignItems: "center", + justifyContent: "center", + }, + name: { + textAlign: "center", + fontSize: 24, + fontWeight: "200", + color: "#FFFFFFEE", + }, +}); + +``` + +## 兼容性 + +在下述版本验证通过: + +1. RNOH:0.72.13; SDK:HarmonyOS NEXT DP2; IDE:DevEco Studio 4.1.3.700; ROM:204.1.0.72(SP2DEVC00E72R1P1); + +## API列表 + +| Name | Description | Type | Required | HarmonyOS Support | +| ---------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- | ----------------- | +| images | Array of images to display | ImageSource[] | Yes | Yes | +| keyExtractor | Uniqely identifying each image | (imageSrc: ImageSource, index: number) => string | No | Yes | +| imageIndex | Current index of image to display | number | Yes | Yes | +| visible | Is modal shown or not | boolean | No | Yes | +| onRequestClose | Function called to close the modal | function | Yes | Yes | +| onImageIndexChange | Function called when image index has been changed | function | No | Yes | +| onLongPress | Function called when image long pressed | function (event: GestureResponderEvent, image: ImageSource) | No | Yes | +| delayLongPress | Delay in ms, before onLongPress is called: default | number | No | Yes | +| animationType | Animation modal presented with: default | none, fade, slide | No | Yes | +| presentationStyle | Modal presentation style: default: fullScreen Android: Use overFullScreen to hide StatusBar | fullScreen, pageSheet, formSheet, overFullScreen | No | Yes | +| backgroundColor | Background color of the modal in HEX | string | No | Yes | +| swipeToCloseEnabled | Close modal with swipe up or down: default | boolean | No | Yes | +| doubleTapToZoomEnabled | Zoom image by double tap on it: default | boolean | No | Yes | +| HeaderComponent | Header component, gets current imageIndex as a prop | component, function | No | Yes | +| FooterComponent | Footer component, gets current imageIndex as a prop | component, function | No | Yes | + +## 遗留问题 + +- [ ] 本库 swipeToCloseEnabled,doubleTapToZoomEnabled,animationType 还未完全HarmonyOS化,暂不支持上下滑动关闭、双击放大与动画效果功能 (未解决)[#I9DNQU](https://gitee.com/react-native-oh-library/usage-docs/issues/I9DQPA) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/facebook/prop-types/blob/v15.8.1/LICENSE) ,请自由地享受和参与开源。 diff --git a/zh-cn/react-native-image-zoom.md b/zh-cn/react-native-image-zoom.md new file mode 100644 index 0000000000000000000000000000000000000000..1c417b618b461fdd763c0107ec63413c2a19569e --- /dev/null +++ b/zh-cn/react-native-image-zoom.md @@ -0,0 +1,541 @@ +模板版本:v0.1.3 + +

+

react-native-image-zoom

+

+

+ + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-image-zoom) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-library/react-native-image-zoom> Releases](https://github.com/react-native-oh-library/react-native-image-zoom/releases),并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令: + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-image-zoom@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-image-zoom@file:# +``` + + + +下面的代码展示了这个库的基本使用场景: + +```tsx +import React, { useState } from "react"; +import { + Button, + Dimensions, + Image, + LayoutChangeEvent, + StyleSheet, + Switch, + Text, + View, +} from "react-native"; +import ImageZoom from "react-native-image-pan-zoom"; +import type { IOnClick, IOnMove, ICenterOn } from "react-native-image-pan-zoom"; +// const LOCAL_IMAGE_ASSET_ID = require('../') + +const formatEventData = (evt: IOnClick) => { + const { locationX, locationY, pageX, pageY } = evt; + return `x ${locationX.toFixed(2)} y ${locationY.toFixed(2)} pageX ${pageX.toFixed(2)} pageY ${pageY.toFixed(2)}`; +}; + +const ImageZoomDemo = () => { + //长按 + const [longPressData, setLongPressData] = useState( + "LongPress: Haven't long pressed yet", + ); + const longPressHandler = (evt: IOnClick) => { + const data = formatEventData(evt); + setLongPressData(`LongPress: ${data}`); + }; + const [longPressTime, setLongPressTime] = useState(800); + + // 双击 + const [doubleClickData, setDoubleClickData] = useState( + "DoubleClick: Haven't doubleclicked yet", + ); + const [isEnabled, setIsEnabled] = useState(false); + const toggleDoubleClickSwitch = () => + setIsEnabled((previousState) => !previousState); + const doubleClickHandler = (evt: IOnClick) => { + setDoubleClickData( + `DoubleClick: x: ${evt.locationX.toFixed(2)} y: ${evt.locationY.toFixed(2)}}`, + ); + }; + const [clickInterval, setClickInterval] = useState(175); + + // 单击 + const [singleClickData, setSingleClickData] = useState( + "SingleClick: Haven't singleClicked yet", + ); + const singleClickHandler = (evt: IOnClick) => { + setSingleClickData( + `SingleClick: x: ${evt.locationX.toFixed(2)} y: ${evt.locationY.toFixed(2)}`, + ); + }; + + // 下滑 + const [swiperDownData, setSwiperDownData] = useState( + "SwiperDown: Haven't swipe down yet", + ); + const [enableSwiperDown, setSwiperDownEnabled] = useState(false); + const [downThreshold, setDownThreshold] = useState(230); + const swiperDownHandler = () => { + setSwiperDownData("SwiperDown: already swipe down"); + }; + const toggleSwipeDownSwitch = () => { + setSwiperDownEnabled((previousState) => !previousState); + }; + + // 移动 + const [moveData, setMoveData] = useState("Move: Haven't move yet"); + const moveHandler = (data: IOnMove) => { + const { type, positionX, positionY, scale, zoomCurrentDistance } = data; + setMoveData( + `Move: type:${type} positionX:${positionX.toFixed(2)} positionY:${positionY.toFixed(2)} scale:${scale} zoomCurrentDistance:${zoomCurrentDistance}`, + ); + }; + + // 窗口和图片尺寸 + const winWidth = Dimensions.get("window").width; + const winHeight = winWidth; + const [zoomWidth, setZoomWidth] = useState(winWidth); + const [zoomHeight, setZoomHeight] = useState(winHeight); + const defaultViewData = `Current view data:width:${zoomWidth.toFixed(2)}, height:${zoomHeight.toFixed(2)}`; + const [viewData, setViewData] = useState(defaultViewData); + const toggleAdd = () => { + setZoomWidth(winWidth); + setZoomHeight(winHeight); + setViewData(getViewData(winWidth, winHeight)); + }; + const toggleDecrease = () => { + setZoomWidth(winWidth * 0.8); + setZoomHeight(winHeight * 0.8); + setViewData(getViewData(winWidth * 0.8, winHeight * 0.8)); + }; + const getViewData = (width: number, height: number) => { + return `Current view data:width: ${width.toFixed(2)} height: ${height.toFixed(2)}`; + }; + + // 双指缩放 + const [isEnablePinchToZoom, setPinchToZoomState] = useState(false); + const togglePinchToZoomSwitch = () => { + setPinchToZoomState((previousState) => !previousState); + }; + const [minScale, setMinScale] = useState(0.6); + const [maxScale, setMaxScale] = useState(2); + + // 单指移动 + const [isEnablePanToMove, setPanToMoveState] = useState(false); + const [singleClickDistance, setSingleClickDistance] = useState(10); + const togglePanToMoveSwitch = () => { + setPanToMoveState((previousState) => !previousState); + }; + const [maxOverflow, setMaxOverFlow] = useState(100); + + // 自定义中心 + const defaultCenter: ICenterOn = { + x: 0, + y: 0, + scale: 1, + duration: 300, + }; + const [centerData, setCenterData] = useState( + (): ICenterOn | undefined => undefined, + ); + const leftCenter: ICenterOn = { + x: 100, + y: 100, + scale: 1, + duration: 300, + }; + const [centerEnable, setCenterIsEnable] = useState(false); + const toggleSettingCenter = (val: boolean) => { + console.log(`toggleSettingCenter: ${val}`); + if (val) { + setCenterData(leftCenter); + } else { + setCenterData(defaultCenter); + } + setCenterIsEnable((previousState) => !previousState); + }; + + // 中心焦点 + const [enableCenterFocus, setEnterFocusIsEnable] = useState(false); + + // 动画驱动 + const [enableNativeDriver, setNativeDriverIsEnable] = useState(false); + + // 禁用安卓渲染 + const [enableAndroidRender, setAndroidRenderEnable] = useState(false); + + // 触发想切换到左边的图,向左滑动速度超出阈值触发 + const dragLeftHandler = () => { + console.log("dragLeftHandler!!!"); + }; + + // 松手但是没有取消看图 + const responderReleaseHandler = (vx: number, scale: number) => { + setViewData(`ResponderRelease: scale: ${scale}`); + }; + + // 成为响应者 + const startPanResponderHandler = () => { + console.log("respondercallback:startPanResponderHandler!!!"); + return true; + }; + const movePanResponderHandler = () => { + console.log("respondercallback:movePanResponderHandler!!!"); + return false; + }; + const terminationRequestHandler = () => { + console.log("respondercallback:terminationRequestHandler!!!"); + return false; + }; + + const getButtonColor = (current: number, origin: number): string => { + return current === origin ? "#007AFF99" : "#007AFF"; + }; + + // 横向超出距离 + const offsetHandler = (offsetX?: number) => { + setViewData(`HorizontalOuterRangeOffset: offsetX: ${offsetX?.toFixed(2)}`); + }; + + // 图片渲染完成 + const layoutChangeHandler = (event: LayoutChangeEvent) => { + console.log("layoutChangeHandler!!!"); + }; + + return ( + + + 操作区域: + + + {count} + + + + ) +} +``` + +## 约束与限制 + +## 兼容性 + +本文档内容基于以下版本验证通过: + +1. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.59; + +## 方法和属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 +> +> 详情见 [redux-toolkit 源库地址](https://github.com/reduxjs/redux-toolkit) + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------------ | ------------------------------------------------- | -------- | -------- | -------- | ----------------- | +| configureStore | 创建store的方法 | Function | yes | All | yes | +| reducer | configureStore参数,reducer对象 | Object | yes | All | yes | +| middleware | configureStore参数,存放中间件的数组 | Array | yes | All | yes | +| devTools | configureStore参数,浏览器调试用具 | Boolean | yes | Web | no | +| preloadedState | configureStore参数,默认的state值 | Object | yes | All | yes | +| enhancers | configureStore参数,存放增强功能数组 | Array | yes | All | yes | +| getDefaultMiddleware | 获取默认中间件列表 | Function | yes | All | yes | +| immutableCheck | getDefaultMiddleware对象参数属性 | Boolean | yes | All | yes | +| serializableCheck | getDefaultMiddleware对象参数属性 | Boolean | yes | All | yes | +| actionCreatorCheck | getDefaultMiddleware对象参数属性 | Boolean | yes | All | yes | +| createListenerMiddleware | 创建中间件监听函数 | Function | yes | All | yes | +| middleware | createListenerMiddleware属性,中间件列表 | Array | yes | All | yes | +| startListening | createListenerMiddleware属性,添加一个监听 | Function | yes | All | yes | +| stopListening | createListenerMiddleware属性,暂停一个监听 | Function | yes | All | yes | +| clearListeners | createListenerMiddleware属性,清除所有监听 | Function | yes | All | yes | +| addListener | createListenerMiddleware属性,添加一个监听 | Function | yes | All | yes | +| removeListener | createListenerMiddleware属性,暂停一个监听 | Function | yes | All | yes | +| clearAllListeners | createListenerMiddleware属性,清除所有监听 | Function | yes | All | yes | +| createDynamicMiddleware | 创建一个中间件 | Function | yes | All | yes | +| getDefaultEnhancers | 获取默认增强功能组件 | Function | yes | All | yes | +| createReducer | 创建reducer | Function | yes | All | yes | +| addCase | createReducer函数返回对象参数方法,添加action | Function | yes | All | yes | +| addMatcher | createReducer函数返回对象参数方法,添加过滤条件 | Function | yes | All | yes | +| addDefaultCase | createReducer函数返回对象参数方法,添加默认action | Function | yes | All | yes | +| createAction | 创建action | Function | yes | All | yes | +| createSlice | 创建slice切片 | Function | yes | All | yes | +| name | createSlice属性,store名字 | String | yes | All | yes | +| initialState | createSlice属性,store默认值 | object | yes | All | yes | +| reducers | createSlice属性,reducer对象 | Object | yes | All | yes | +| extraReducers | createSlice属性,额外的reducer对象 | Object | yes | All | yes | +| createAsyncThunk | 创建异步action | Function | yes | All | yes | +| createEntityAdapter | 创建适配器 | Function | yes | All | yes | +| selectId | createEntityAdapter属性,表示唯一ID | String | yes | All | yes | +| sortComparer | createEntityAdapter属性,排序方法 | Function | yes | All | yes | +| getInitialState | createEntityAdapter属性,默认状态 | Object | yes | All | yes | +| combineSlices | 结合两个Slice切片 | Function | yes | All | yes | +| createSelector | 创建select选择器 | Function | yes | All | yes | +| combineSlices | 结合两个Slice切片 | Function | yes | All | yes | + +## 工具方法 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ------------------- | ------------------------------ | -------- | -------- | -------- | ----------------- | +| isAllOf | 判断action是否全部通过 | Function | yes | All | yes | +| isAnyOf | 判断action是否有一个通过 | Function | yes | All | yes | +| isAsyncThunkAction | 判断action是否是异步 | Function | yes | All | yes | +| isPending | 判断action是否在执行中 | Function | yes | All | yes | +| isRejected | 判断action是否执行完成 | Function | yes | All | yes | +| isFulfilled | 判断action是否执行失败 | Function | yes | All | yes | +| isRejectedWithValue | 判断action是否执行失败并返回值 | Function | yes | All | yes | +| nanoid | 生成随机字符串 | Function | yes | All | yes | +| miniSerializeError | 打印错误信息 | Function | yes | All | yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/reduxjs/redux-toolkit?tab=readme-ov-file),请自由地享受和参与开源。