diff --git a/en/react-native-awesome-gallery.md b/en/react-native-awesome-gallery.md index 59aca600d9b1c953a813948a77883bf924532472..6bde1b2afbd67b5e973eee4ba00bb730561390ae 100644 --- a/en/react-native-awesome-gallery.md +++ b/en/react-native-awesome-gallery.md @@ -19,6 +19,11 @@ Go to the project directory and execute the following instruction: +| Version | Support RN version | +| ---------- | -------------- | +| 0.4.2 | 0.72/0.77 | + + #### **npm** @@ -80,6 +85,8 @@ This document is verified based on the following versions: 2. RNOH: 0.72.29; SDK: HarmonyOS-NEXT-DB6 5.0.0.61; IDE: DevEco Studio 5.0.3.706; ROM: 5.0.0.60; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; + ## Properties > [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library. @@ -92,7 +99,6 @@ This document is verified based on the following versions: | renderItem | Callback func which can be used to render custom image component, e.g FastImage. NOTE: You have to call setImageDimensions({width, height}) parameter after image is loaded | (renderItemInfo: {item: T, index: number, setImageDimensions: Function}) => React.ReactElement | No | iOS/Android | Yes | | keyExtractor | Callback func which provides unique keys for items | (item: T, index: number) => string or number | No | iOS/Android | Yes | | initialIndex | The initial image index | number | No | iOS/Android | Yes | -| onIndexChange | Is called when index of active item is changed | boolean | No | iOS/Android | Yes | | numToRender | Amount of items rendered in gallery simultaneously | number | No | iOS/Android | Yes | | emptySpaceWidth | Width of empty space between items | number | No | iOS/Android | Yes | | doubleTapScale | Image scale when double tap is fired | number | No | iOS/Android | No | @@ -121,7 +127,8 @@ This document is verified based on the following versions: | ------------------ | -------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | | onSwipeToClose() | Fired when user swiped to top/bottom | function | No | iOS/Android | Yes | | onTranslationYChange(translationY: number, shouldClose: boolean) | 'worklet'; Fired when user is swiping vertically to close the gallery | function | No | iOS/Android | No | -| onTap() | Fired when user tap on image | string or number | No | iOS/Android | Yes | +| onTap() | Fired when user tap on image | function | No | iOS/Android | Yes | +| onIndexChange | Is called when index of active item is changed | function | No | iOS/Android | Yes | | onDoubleTap(toScale: number) | Fired when user double tap on image | function | No | iOS/Android | No | | onLongPress() | Fired when long press is detected | function | No | iOS/Android | Yes | | onScaleStart(scale: number) | Fired when pinch gesture starts | function | No | iOS/Android | Yes | diff --git a/en/react-navigation-native.md b/en/react-navigation-native.md index 4693a5de7d94a116f29a71b4e24fcd7ee7fac123..efcfdb03e473f3836de92679e28b8d045d261406 100644 --- a/en/react-navigation-native.md +++ b/en/react-navigation-native.md @@ -16,18 +16,33 @@ ## Installation and Usage +Go to the project directory and execute the following instruction: + +| Version | Support RN version | +| ------- | ------------------ | +| 6.1.17 | 0.72 | +| 7.1.6 | 0.77 | + Go to the project directory and execute the following instruction: #### **npm** ```bash +# For RN0.72 npm install @react-navigation/native@6.1.17 + +# For RN0.77 +npm install @react-navigation/native@7.1.6 ``` #### **yarn** ```bash +# For RN0.72 yarn add @react-navigation/native@6.1.17 + +# For RN0.77 +yarn add @react-navigation/native@7.1.6 ``` @@ -83,6 +98,7 @@ This document is verified based on the following versions: 2. RNOH: 0.72.13; SDK: HarmonyOS NEXT Developer Preview1; IDE: DevEco Studio 4.1.3.500; ROM: 2.0.0.58; 3. RNOH: 0.72.20-CAPI; SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; 4. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; +5. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## Properties diff --git a/zh-cn/react-native-awesome-gallery.md b/zh-cn/react-native-awesome-gallery.md index 5ac5a65b53c94f138b015daddb9c055f70e83085..6c30d3d00f2881e028d5069c1ad62915e5047666 100644 --- a/zh-cn/react-native-awesome-gallery.md +++ b/zh-cn/react-native-awesome-gallery.md @@ -17,7 +17,15 @@ ## 安装与使用 -进入到工程目录并输入以下命令： +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 支持RN版本 | +| ------------------------------------------------------------ | ---------- | +| 0.4.2 | 0.72/0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + +进入到工程目录并输入以下命令 @@ -80,6 +88,10 @@ export default function App() { 2. RNOH: 0.72.29; SDK: HarmonyOS-NEXT-DB6 5.0.0.61; IDE: DevEco Studio 5.0.3.706; ROM: 5.0.0.60; +3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; + + + ## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 @@ -88,28 +100,27 @@ export default function App() { | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------- | ------------------------------- | -------------- | -------- | ----------- | ----------------- | -| data | Array of items to render | T[] | Yes | iOS/Android | Yes | -| renderItem | Callback func which can be used to render custom image component, e.g FastImage. NOTE: You have to call setImageDimensions({width, height}) parameter after image is loaded | (renderItemInfo: {item: T, index: number, setImageDimensions: Function}) => React.ReactElement | No | iOS/Android | Yes | -| keyExtractor | Callback func which provides unique keys for items | (item: T, index: number) => string or number | No | iOS/Android | Yes | -| initialIndex | The initial image index | number | No | iOS/Android | Yes | -| onIndexChange | Is called when index of active item is changed | boolean | No | iOS/Android | Yes | -| numToRender | Amount of items rendered in gallery simultaneously | number | No | iOS/Android | Yes | -| emptySpaceWidth | Width of empty space between items | number | No | iOS/Android | Yes | -| doubleTapScale | Image scale when double tap is fired | number | No | iOS/Android | No | -| doubleTapInterval | Time in milliseconds between single and double tap events | number | No | iOS/Android | No | -| maxScale | Maximum scale user can set with gesture | number | No | iOS/Android | Yes | -| pinchEnabled | Is pinch gesture enabled | boolean | No | iOS/Android | Yes | -| swipeEnabled | Is pan gesture enabled | boolean | No | iOS/Android | Yes | -| doubleTapEnabled | Is double tap enabled | boolean | No | iOS/Android | No | -| disableTransitionOnScaledImage | Disables transition to next/previous image when scale > 1 | boolean | No | iOS/Android | Yes | -| hideAdjacentImagesOnScaledImage | Hides next and previous images when scale > 1 | boolean | No | iOS/Android | Yes | -| disableVerticalSwipe | Disables vertical swipe when scale == 1 | boolean | No | iOS/Android | Yes | -| disableSwipeUp | Disables swipe up when scale == 1 | boolean | No | iOS/Android | Yes | -| loop | Allows user to swipe infinitely. Works when data.length > 1 | boolean | No | iOS/Android | Yes | -| onScaleChange | Is called when scale is changed | (scale: number) => void | No | iOS/Android | Yes | -| onScaleChangeRange | Shows range of scale in which onScaleChange is called | {start: number, end: number} | No | iOS/Android | Yes | -| containerDimensions | Dimensions object for the View that wraps gallery. | {width: number, height: number} | No | iOS/Android | Yes | -| style | Is double tap enabled | Style of container | No | iOS/Android | Yes | +| data | 要渲染的条目数组 | T[] | Yes | iOS/Android | Yes | +| renderItem | 用于渲染自定义图片组件（如 FastImage）的回调函数。注意：图片加载完成后必须调用 setImageDimensions({width, height}) 参数 | (renderItemInfo: {item: T, index: number, setImageDimensions: Function}) => React.ReactElement | No | iOS/Android | Yes | +| keyExtractor | 为条目提供唯一 key 的回调函数 | (item: T, index: number) => string or number | No | iOS/Android | Yes | +| initialIndex | 初始显示的图片索引 | number | No | iOS/Android | Yes | | +| numToRender | 画廊中同时渲染的条目数量 | number | No | iOS/Android | Yes | +| emptySpaceWidth | 条目之间的留白宽度 | number | No | iOS/Android | Yes | +| doubleTapScale | 双击时应用的图片缩放比例 | number | No | iOS/Android | No | +| doubleTapInterval | 单击与双击之间的毫秒间隔 | number | No | iOS/Android | No | +| maxScale | 用户通过手势可设置的最大缩放值 | number | No | iOS/Android | Yes | +| pinchEnabled | 是否启用捏合手势 | boolean | No | iOS/Android | Yes | +| swipeEnabled | 是否启用平移手势 | boolean | No | iOS/Android | Yes | +| doubleTapEnabled | 是否启用双击 | boolean | No | iOS/Android | No | +| disableTransitionOnScaledImage | 当缩放比例大于 1 时禁用前后图片的切换 | boolean | No | iOS/Android | Yes | +| hideAdjacentImagesOnScaledImage | 当缩放比例大于 1 时隐藏前后相邻图片 | boolean | No | iOS/Android | Yes | +| disableVerticalSwipe | 当缩放比例等于 1 时禁用垂直滑动 | boolean | No | iOS/Android | Yes | +| disableSwipeUp | 当缩放比例等于 1 时禁用上滑手势 | boolean | No | iOS/Android | Yes | +| loop | 允许用户循环滑动，data.length 大于 1 时生效 | boolean | No | iOS/Android | Yes | +| onScaleChange | 当缩放值变化时触发 | (scale: number) => void | No | iOS/Android | Yes | +| onScaleChangeRange | 指定触发 onScaleChange 的缩放区间 | {start: number, end: number} | No | iOS/Android | Yes | +| containerDimensions | 包裹画廊的容器 View 尺寸对象 | {width: number, height: number} | No | iOS/Android | Yes | +| style | 是否启用双击 | Style of container | No | iOS/Android | Yes | ## 事件 @@ -119,14 +130,15 @@ export default function App() { | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------ | -------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | -| onSwipeToClose() | Fired when user swiped to top/bottom | function | No | iOS/Android | Yes | -| onTranslationYChange(translationY: number, shouldClose: boolean) | 'worklet'; Fired when user is swiping vertically to close the gallery | function | No | iOS/Android | No | -| onTap() | Fired when user tap on image | string or number | No | iOS/Android | Yes | -| onDoubleTap(toScale: number) | Fired when user double tap on image | function | No | iOS/Android | No | -| onLongPress() | Fired when long press is detected | function | No | iOS/Android | Yes | -| onScaleStart(scale: number) | Fired when pinch gesture starts | function | No | iOS/Android | Yes | -| onScaleEnd(scale: number) | Fired when pinch gesture ends. Use case: add haptic feedback when user finished gesture with scale > maxScale or scale < 1 | function | No | iOS/Android | Yes | -| onPanStart() | Fired when pan gesture starts | function | No | iOS/Android | Yes | +| onSwipeToClose() | 当用户向上/向下滑动至顶部或底部时触发 | function | No | iOS/Android | Yes | +| onTranslationYChange(translationY: number, shouldClose: boolean) | "worklet"; 当用户垂直滑动以关闭画廊时触发 | function | No | iOS/Android | No | +| onTap() | 当用户点击图片时触发 | function | No | iOS/Android | Yes | +| onIndexChange | 当当前激活项的索引变化时触发 | function | No | iOS/Android | Yes +| onDoubleTap(toScale: number) | 当用户双击图片时触发 | function | No | iOS/Android | No | +| onLongPress() | 检测到长按时触发 | function | No | iOS/Android | Yes | +| onScaleStart(scale: number) | 捏合手势开始时触发 | function | No | iOS/Android | Yes | +| onScaleEnd(scale: number) | 捏合手势结束时触发，可用于在缩放 > maxScale 或 < 1 时添加触感反馈 | function | No | iOS/Android | Yes | +| onPanStart() | 平移手势开始时触发 | function | No | iOS/Android | Yes | ## 静态方法 @@ -136,8 +148,8 @@ export default function App() { | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------ | -------------------------------------------------- | ---------------- | -------- | ----------- | ----------------- | -| setIndex | Sets active index | (newIndex: number, animated?: boolean) => void | No | iOS/Android | Yes | -| reset | Resets scale, translation | (animated?: boolean) => void | No | iOS/Android | Yes | +| setIndex | 设置当前激活的索引 | (newIndex: number, animated?: boolean) => void | No | iOS/Android | Yes | +| reset | 重置缩放与位移 | (animated?: boolean) => void | No | iOS/Android | Yes | ## 遗留问题 - [ ] onTranslationYChange事件设置后，拖动图片会发生异常，iOS 和 Android平台均有该问题: [issue#84](https://github.com/pavelbabenko/react-native-awesome-gallery/issues/84) diff --git a/zh-cn/react-navigation-native.md b/zh-cn/react-navigation-native.md index 34887d25d6bc5775d5a0af01c5ddb33ba039cbc2..34e8630d8ea0b0aeec9b417a6269bad662e2c893 100644 --- a/zh-cn/react-navigation-native.md +++ b/zh-cn/react-navigation-native.md @@ -15,6 +15,14 @@ ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息： + +| 三方库版本 | 支持RN版本 | +| ---------- | ---------- | +| 6.1.17 | 0.72 | +| 7.1.6 | 0.77 | + +对于未发布到npm的旧版本，请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： @@ -22,12 +30,20 @@ #### **npm** ```bash +# For RN0.72 npm install @react-navigation/native@6.1.17 + +# For RN0.77 +npm install @react-navigation/native@7.1.6 ``` #### **yarn** ```bash +# For RN0.72 yarn add @react-navigation/native@6.1.17 + +# For RN0.77 +yarn add @react-navigation/native@7.1.6 ``` @@ -83,6 +99,7 @@ export {App} 2. RNOH: 0.72.13; SDK: HarmonyOS NEXT Developer Preview1; IDE: DevEco Studio 4.1.3.500; ROM: 2.0.0.58; 3. RNOH: 0.72.20-CAPI; SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; 4. RNOH: 0.72.27; SDK: HarmonyOS-Next-DB1 5.0.0.25; IDE: DevEco Studio 5.0.3.400SP7; ROM: 3.0.0.25; +5. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性