From aa1d85a67b423e372306a4c8be2bd96c08ad2b56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9D=E4=B9=94=E6=9E=97?= Date: Fri, 5 Jul 2024 17:58:41 +0800 Subject: [PATCH 1/8] =?UTF-8?q?docs:=20[Issues:=20#IAADKA]=20=E6=8C=890.2.?= =?UTF-8?q?2=E8=A7=84=E8=8C=83=E4=BF=AE=E6=94=B9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-swipe-list-view.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/react-native-swipe-list-view.md b/zh-cn/react-native-swipe-list-view.md index 5793f491..677df78a 100644 --- a/zh-cn/react-native-swipe-list-view.md +++ b/zh-cn/react-native-swipe-list-view.md @@ -1,5 +1,5 @@ -> 模板版本：v0.2.1 +> 模板版本：v0.2.2

react-native-swipe-list-view

-- Gitee From aa5b2ffb0d8d0347440d8942383950046bcd296c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9D=E4=B9=94=E6=9E=97?= Date: Fri, 5 Jul 2024 20:28:20 +0800 Subject: [PATCH 2/8] =?UTF-8?q?docs:=20[Issues:=20#IAADKA]=20=E6=8C=890.2.?= =?UTF-8?q?2=E8=A7=84=E8=8C=83=E4=BF=AE=E6=94=B9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-swipe-list-view.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/zh-cn/react-native-swipe-list-view.md b/zh-cn/react-native-swipe-list-view.md index 677df78a..64a0de33 100644 --- a/zh-cn/react-native-swipe-list-view.md +++ b/zh-cn/react-native-swipe-list-view.md @@ -8,12 +8,13 @@ Supported platforms - + License

+ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-swipe-list-view) ## 安装与使用 @@ -207,7 +208,9 @@ const styles = StyleSheet.create({ }); ``` -## 兼容性 +## 约束与限制 + +### 兼容性 在以下版本验证通过 @@ -305,7 +308,7 @@ const styles = StyleSheet.create({ ## 开源协议 -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-swipe-list-view/blob/sig/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [The MIT License (MIT)](https://github.com/jemise111/react-native-swipe-list-view/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee From 39508b9ba287ac5953af773be4e5f691b16cace6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9D=E4=B9=94=E6=9E=97?= Date: Mon, 8 Jul 2024 13:49:14 +0800 Subject: [PATCH 3/8] =?UTF-8?q?docs:=20[Issues:=20#IAADKA]=20=E6=8C=890.2.?= =?UTF-8?q?2=E8=A7=84=E8=8C=83=E4=BF=AE=E6=94=B9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-swipe-list-view.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/zh-cn/react-native-swipe-list-view.md b/zh-cn/react-native-swipe-list-view.md index 64a0de33..3ce86be9 100644 --- a/zh-cn/react-native-swipe-list-view.md +++ b/zh-cn/react-native-swipe-list-view.md @@ -304,6 +304,8 @@ const styles = StyleSheet.create({ ## 遗留问题 +- [ ] 属性leftActivationValue在鸿蒙暂时未适配 + ## 其他 ## 开源协议 -- Gitee From bb3f424da0dfd05594610501cb4c8961c9cf4935 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9D=E4=B9=94=E6=9E=97?= Date: Mon, 8 Jul 2024 13:57:04 +0800 Subject: [PATCH 4/8] =?UTF-8?q?docs:=20[Issues:=20#IAADKA]=20=E6=8C=890.2.?= =?UTF-8?q?2=E8=A7=84=E8=8C=83=E4=BF=AE=E6=94=B9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-drawer-layout-polyfill.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/zh-cn/react-native-drawer-layout-polyfill.md b/zh-cn/react-native-drawer-layout-polyfill.md index 215f1e6a..f9a6c8f3 100644 --- a/zh-cn/react-native-drawer-layout-polyfill.md +++ b/zh-cn/react-native-drawer-layout-polyfill.md @@ -1,15 +1,19 @@ -模板版本：v0.2.0 +模板版本：v0.2.2

react-native-drawer-layout-polyfill

+ Supported platforms + + License

+ > [!TIP] [Github 地址](https://github.com/rnc-archive/react-native-drawer-layout-polyfill) ## 安装与使用 @@ -221,7 +225,9 @@ const styles = StyleSheet.create({ export default App; ``` -## 兼容性 +## 约束与限制 + +### 兼容性 在以下版本验证通过 @@ -229,6 +235,10 @@ export default App; ## 属性 +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + 详情见[react-native-drawer-layout-polyfill](https://reactnative.dev/docs/drawerlayoutandroid) | Name | Description | Type | Required | Platform | HarmonyOS Support | note | @@ -254,6 +264,12 @@ export default App; ## 遗留问题 +- [ ] 属性statusBarBackgroundColor 鸿蒙暂不支持。 + ## 其他 +## 开源协议 + +本项目基于 [MIT License](https://www.mit-license.org/) ，请自由地享受和参与开源。 + \ No newline at end of file -- Gitee From f7726b86c43ea26711ad68b2ac8f992476256321 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9D=E4=B9=94=E6=9E=97?= Date: Mon, 15 Jul 2024 15:18:39 +0800 Subject: [PATCH 5/8] =?UTF-8?q?docs:=20[Issues:=20#IAADKA]=20=E6=8C=890.2.?= =?UTF-8?q?2=E8=A7=84=E8=8C=83=E4=BF=AE=E6=94=B9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-drawer-layout-polyfill.md | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/zh-cn/react-native-drawer-layout-polyfill.md b/zh-cn/react-native-drawer-layout-polyfill.md index f9a6c8f3..215f1e6a 100644 --- a/zh-cn/react-native-drawer-layout-polyfill.md +++ b/zh-cn/react-native-drawer-layout-polyfill.md @@ -1,19 +1,15 @@ -模板版本：v0.2.2 +模板版本：v0.2.0

react-native-drawer-layout-polyfill

- Supported platforms - - License

- > [!TIP] [Github 地址](https://github.com/rnc-archive/react-native-drawer-layout-polyfill) ## 安装与使用 @@ -225,9 +221,7 @@ const styles = StyleSheet.create({ export default App; ``` -## 约束与限制 - -### 兼容性 +## 兼容性 在以下版本验证通过 @@ -235,10 +229,6 @@ export default App; ## 属性 -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - 详情见[react-native-drawer-layout-polyfill](https://reactnative.dev/docs/drawerlayoutandroid) | Name | Description | Type | Required | Platform | HarmonyOS Support | note | @@ -264,12 +254,6 @@ export default App; ## 遗留问题 -- [ ] 属性statusBarBackgroundColor 鸿蒙暂不支持。 - ## 其他 -## 开源协议 - -本项目基于 [MIT License](https://www.mit-license.org/) ，请自由地享受和参与开源。 - \ No newline at end of file -- Gitee From f707ac2bb0278dc9ebdc3d027fd5300c73dab216 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9D=E4=B9=94=E6=9E=97?= Date: Mon, 15 Jul 2024 17:12:21 +0800 Subject: [PATCH 6/8] =?UTF-8?q?docs:=20[Issues:=20#IAADKA]=20=E6=8C=890.2.?= =?UTF-8?q?2=E8=A7=84=E8=8C=83=E4=BF=AE=E6=94=B9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-image-zoom-viewer.md | 290 ++++++++++++++++++++++++ zh-cn/react-native-swipe-list-view.md | 4 +- 2 files changed, 291 insertions(+), 3 deletions(-) create mode 100644 zh-cn/react-native-image-zoom-viewer.md diff --git a/zh-cn/react-native-image-zoom-viewer.md b/zh-cn/react-native-image-zoom-viewer.md new file mode 100644 index 00000000..47ae0fc2 --- /dev/null +++ b/zh-cn/react-native-image-zoom-viewer.md @@ -0,0 +1,290 @@ + +> 模板版本：v0.2.2 + +

+

react-native-image-zoom-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-zoom-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; +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-zoom-viewer Releases](https://github.com/react-native-oh-library/react-native-image-viewer/releases) + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | 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 还未完全 HarmonyOS 化，暂不支持调起相册 （未解决）[issues#1](https://github.com/react-native-oh-library/react-native-image-viewer/issues/1) +- [ ] 本库依赖 react-native-image-zoom ,enableImageZoom属性还未完全 HarmonyOS 化（未解决）[issues#2](https://github.com/react-native-oh-library/react-native-image-viewer/issues/1) +- [ ] 本库依赖 react-native-image-zoom ,长按触发框架图片拖拽，应用崩溃（未解决）[issues#3](https://github.com/react-native-oh-library/react-native-image-viewer/issues/1) + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/ascoders/react-native-image-viewer/blob/master/LICENSE) ，请自由地享受和参与开源。 + + + diff --git a/zh-cn/react-native-swipe-list-view.md b/zh-cn/react-native-swipe-list-view.md index 3ce86be9..ab9d8afb 100644 --- a/zh-cn/react-native-swipe-list-view.md +++ b/zh-cn/react-native-swipe-list-view.md @@ -304,9 +304,7 @@ const styles = StyleSheet.create({ ## 遗留问题 -- [ ] 属性leftActivationValue在鸿蒙暂时未适配 - -## 其他 +- [ ] 属性leftActivationValue在鸿蒙暂时未适配 [issue#\4](https://github.com/react-native-oh-library/react-native-swipe-list-view/issues/4) ## 开源协议 -- Gitee From 551784f823a38d5e81169bd2c28d1b130de52534 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9D=E4=B9=94=E6=9E=97?= Date: Mon, 15 Jul 2024 17:15:20 +0800 Subject: [PATCH 7/8] =?UTF-8?q?docs:=20[Issues:=20#IAADKA]=20=E6=8C=890.2.?= =?UTF-8?q?2=E8=A7=84=E8=8C=83=E4=BF=AE=E6=94=B9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-image-zoom-viewer.md | 290 ------------------------ 1 file changed, 290 deletions(-) delete mode 100644 zh-cn/react-native-image-zoom-viewer.md diff --git a/zh-cn/react-native-image-zoom-viewer.md b/zh-cn/react-native-image-zoom-viewer.md deleted file mode 100644 index 47ae0fc2..00000000 --- a/zh-cn/react-native-image-zoom-viewer.md +++ /dev/null @@ -1,290 +0,0 @@ - -> 模板版本：v0.2.2 - -

-

react-native-image-zoom-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-zoom-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; -``` - -## 约束与限制 - -### 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-image-zoom-viewer Releases](https://github.com/react-native-oh-library/react-native-image-viewer/releases) - -## 属性 - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -| Name | Description | Type | 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 还未完全 HarmonyOS 化，暂不支持调起相册 （未解决）[issues#1](https://github.com/react-native-oh-library/react-native-image-viewer/issues/1) -- [ ] 本库依赖 react-native-image-zoom ,enableImageZoom属性还未完全 HarmonyOS 化（未解决）[issues#2](https://github.com/react-native-oh-library/react-native-image-viewer/issues/1) -- [ ] 本库依赖 react-native-image-zoom ,长按触发框架图片拖拽，应用崩溃（未解决）[issues#3](https://github.com/react-native-oh-library/react-native-image-viewer/issues/1) - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/ascoders/react-native-image-viewer/blob/master/LICENSE) ，请自由地享受和参与开源。 - - - -- Gitee From c3024f5003f684fea7df93e180065f61e6d7feff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A5=9D=E4=B9=94=E6=9E=97?= Date: Wed, 24 Jul 2024 13:51:54 +0800 Subject: [PATCH 8/8] =?UTF-8?q?docs:=20[Issues:=20#IAADKA]=20=E6=8C=890.2.?= =?UTF-8?q?2=E8=A7=84=E8=8C=83=E4=BF=AE=E6=94=B9=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-swipe-list-view.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/zh-cn/react-native-swipe-list-view.md b/zh-cn/react-native-swipe-list-view.md index ab9d8afb..2bf3ddec 100644 --- a/zh-cn/react-native-swipe-list-view.md +++ b/zh-cn/react-native-swipe-list-view.md @@ -304,7 +304,9 @@ const styles = StyleSheet.create({ ## 遗留问题 -- [ ] 属性leftActivationValue在鸿蒙暂时未适配 [issue#\4](https://github.com/react-native-oh-library/react-native-swipe-list-view/issues/4) +- [ ] 属性leftActivationValue在鸿蒙暂时未适配 [issue#4](https://github.com/react-native-oh-library/react-native-swipe-list-view/issues/4) + +## 其他 ## 开源协议 -- Gitee