From 9978381d918b693539e2f128d39dd0de0c01185f Mon Sep 17 00:00:00 2001 From: liang Date: Sat, 25 Oct 2025 19:09:13 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issue:ID3106]=E4=BF=AE=E6=94=B9react-n?= =?UTF-8?q?ative-swiper-flatlist=E7=9A=84=E6=8C=87=E5=AF=BC=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liang --- en/react-native-swiper-flatlist.md | 42 ++++++++++++++++++++++++++- zh-cn/react-native-swiper-flatlist.md | 40 +++++++++++++++++++++++-- 2 files changed, 79 insertions(+), 3 deletions(-) diff --git a/en/react-native-swiper-flatlist.md b/en/react-native-swiper-flatlist.md index 08289971..1dc8cf4a 100644 --- a/en/react-native-swiper-flatlist.md +++ b/en/react-native-swiper-flatlist.md @@ -65,7 +65,7 @@ const App = () => ( ); -const { width } = Dimensions.get('window'); +const { width, height } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { backgroundColor: 'white', height: height * 0.7 }, child: { width, justifyContent: 'center', height: height * 0.5 }, @@ -123,7 +123,35 @@ react-native-harmony：0.77.18; SDK：HarmonyOS 5.1.0.125; IDE：DevEco Studio 5 | `viewabilityConfig` | TestID for automation testing | ViewabilityConfig | No | All | Yes | | `useReactNativeGestureHandler` | Use react-native-gesture-handler FlatList instead of the native FlatList | boolean | No | All | Yes | | `paginationAccessibilityLabels` | Accessibility labels for the pagination items.This is optional and used for screen readers. | string[] | No | All | No | + +### SwiperFlatListWithGestureHandler Props +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `data` | Data to use in renderItem | array | No | All | Yes | +| `children` | Children elements | node | No | All | Yes | +| `renderItem` | Takes an item from data and renders it into the list | FlatListProps[renderItem] | No | All | Yes | +| `onMomentumScrollEnd` | Called after scroll end and the first parameter is the current index| (item: { index: number }, event: any) | No | All | Yes | +| `vertical` | Show vertical swiper | boolean | No | All | Yes | +| `index` | Index to start | number | No | All | Yes | +| `renderAll` | Edge/Corner's height. Default: 20 | boolean | No | All | Yes | +| `showPagination` | Showpagination | boolean | No | All | Yes | +| `onChangeIndex` | Executed every time the index change, the index change when the user reaches 60% of the next screen | ({ index: number, prevIndex: number}) => void | No | All | Yes | +| `PaginationComponent` | Overwrite Pagination component | node | No | All | Yes | +| `onViewableItemsChanged` | Native visible term changes in RN | FlatListProps['onViewableItemsChanged'] | No | All | Yes | +| `autoplay` | Change index automatically | boolean | No | All | Yes | +| `autoplayDelay` | Delay between every page in seconds | number | No | All | Yes | +| `autoplayLoop` | Continue playing after reach end | boolean | No | All | Yes | +| `autoplayLoopKeepAnimation` | Show animation when reach the end of the list | boolean | No | All | Yes | +| `autoplayInvertDirection` | Invert auto play direction | boolean | No | All | Yes | +| `disableGesture` | Disable swipe gesture | boolean | No | All | Yes | +| `e2eID` | TestID for automation testing | string | No | All | Yes | +| `viewabilityConfig` | TestID for automation testing | ViewabilityConfig | No | All | Yes | +| `useReactNativeGestureHandler` | Use react-native-gesture-handler FlatList instead of the native FlatList | boolean | No | All | Yes | +| `paginationAccessibilityLabels` | Accessibility labels for the pagination items.This is optional and used for screen readers. | string[] | No | All | No | + ### Pagination Props +> [!TIP] Pagination properties except 'paginationIndex' and 'size' SwiperFlatListWithGestureHandler and SwiperFlatList components can also be used. + | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--- | :--- | :--- | :--- | :--- | :--- | | `paginationDefaultColor` | Pagination Default color | string | No | All | Yes | @@ -138,6 +166,16 @@ react-native-harmony：0.77.18; SDK：HarmonyOS 5.1.0.125; IDE：DevEco Studio 5 | `e2eID` | TestID for automation testing | string | No | All | Yes | | `paginationAccessibilityLabels` | Accessibility labels for the pagination items.This is optional and used for screen readers. | string[] | No | All | No | | `paginationTapDisabled` | Prevents tapping pagination dots | boolean | No | All | Yes | + +### SwiperFlatListWithGestureHandler Functions +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `scrollToIndex` | Scroll to the index | ({ item: ScrollToIndex}) => void | No | All | Yes | +| `getCurrentIndex` | Returns the current index | () => number | No | All | Yes | +| `getPrevIndex` | Returns the previous index | () => number | No | All | Yes | +| `goToFirstIndex` | Go to the first index | () => void | No | All | Yes | +| `goToLastIndex` | Go to the last index | () => void | No | All | Yes | + ### SwiperFlatList Functions | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--- | :--- | :--- | :--- | :--- | :--- | @@ -146,10 +184,12 @@ react-native-harmony：0.77.18; SDK：HarmonyOS 5.1.0.125; IDE：DevEco Studio 5 | `getPrevIndex` | Returns the previous index | () => number | No | All | Yes | | `goToFirstIndex` | Go to the first index | () => void | No | All | Yes | | `goToLastIndex` | Go to the last index | () => void | No | All | Yes | + ### Pagination Functions | Name | Description | Type | Required | Platform | HarmonyOS Support | | :--- | :--- | :--- | :--- | :--- | :--- | | `scrollToIndex` | Scroll to the index | ({ index: number}) => void | Yes | All | Yes | + ## Known Issues ## Others diff --git a/zh-cn/react-native-swiper-flatlist.md b/zh-cn/react-native-swiper-flatlist.md index caf20c43..fb7dcca6 100644 --- a/zh-cn/react-native-swiper-flatlist.md +++ b/zh-cn/react-native-swiper-flatlist.md @@ -65,7 +65,7 @@ const App = () => ( ); -const { width } = Dimensions.get('window'); +const { width, height } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { backgroundColor: 'white', height: height * 0.7 }, child: { width, justifyContent: 'center', height: height * 0.5 }, @@ -122,8 +122,34 @@ react-native-harmony：0.77.18；SDK：HarmonyOS 5.1.0.125；IDE：DevEco Studio | `useReactNativeGestureHandler` | 使用 react-native-gesture-handler 的 FlatList 代替原生 FlatList | 布尔值 | 否 | 全平台 | 是 | | `paginationAccessibilityLabels` | 分页项目的无障碍标签。此为可选，用于屏幕阅读器。 | 字符串数组 | 否 | 全平台 | 否 | -### Pagination 属性 +### SwiperFlatListWithGestureHandler 属性 +| 名称 | 描述 | 类型 | 必填 | 平台 | HarmonyOS 支持 | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `data` | 用于 renderItem 的数据 | 数组 | 否 | 全平台 | 是 | +| `children` | 子元素 | 节点 | 否 | 全平台 | 是 | +| `renderItem` | 从 data 中取出一个项目并将其渲染到列表中 | FlatListProps[renderItem] | 否 | 全平台 | 是 | +| `onMomentumScrollEnd` | 滚动结束后调用，第一个参数是当前索引 | (item: { index: number }, event: any) => void | 否 | 全平台 | 是 | +| `vertical` | 显示垂直轮播 | 布尔值 | 否 | 全平台 | 是 | +| `index` | 起始索引 | 数字 | 否 | 全平台 | 是 | +| `renderAll` | 渲染所有项目 | 布尔值 | 否 | 全平台 | 是 | +| `showPagination` | 显示分页指示器 | 布尔值 | 否 | 全平台 | 是 | +| `onChangeIndex` | 每次索引改变时执行，当用户到达下一个屏幕的 60% 时索引改变 | ({ index: number, prevIndex: number}) => void | 否 | 全平台 | 是 | +| `PaginationComponent` | 覆写分页组件 | 节点 | 否 | 全平台 | 是 | +| `onViewableItemsChanged` | RN 中原生可见项发生变化 | FlatListProps['onViewableItemsChanged'] | 否 | 全平台 | 是 | +| `autoplay` | 自动改变索引 | 布尔值 | 否 | 全平台 | 是 | +| `autoplayDelay` | 每页之间的延迟（秒） | 数字 | 否 | 全平台 | 是 | +| `autoplayLoop` | 到达末尾后继续播放 | 布尔值 | 否 | 全平台 | 是 | +| `autoplayLoopKeepAnimation` | 到达列表末尾时显示动画 | 布尔值 | 否 | 全平台 | 是 | +| `autoplayInvertDirection` | 反转自动播放方向 | 布尔值 | 否 | 全平台 | 是 | +| `disableGesture` | 禁用滑动手势 | 布尔值 | 否 | 全平台 | 是 | +| `e2eID` | 用于自动化测试的 TestID | 字符串 | 否 | 全平台 | 是 | +| `viewabilityConfig` | 可见性配置 | ViewabilityConfig | 否 | 全平台 | 是 | +| `useReactNativeGestureHandler` | 使用 react-native-gesture-handler 的 FlatList 代替原生 FlatList | 布尔值 | 否 | 全平台 | 是 | +| `paginationAccessibilityLabels` | 分页项目的无障碍标签。此为可选，用于屏幕阅读器。 | 字符串数组 | 否 | 全平台 | 否 | + +### Pagination 属性 +> [!提示] Pagination的属性除'paginationIndex'与'size'外，SwiperFlatListWithGestureHandler与SwiperFlatList组件也可以使用。 | 名称 | 描述 | 类型 | 必填 | 平台 | HarmonyOS 支持 | | :--- | :--- | :--- | :--- | :--- | :--- | | `paginationDefaultColor` | 分页默认颜色 | 字符串 | 否 | 全平台 | 是 | @@ -149,6 +175,16 @@ react-native-harmony：0.77.18；SDK：HarmonyOS 5.1.0.125；IDE：DevEco Studio | `goToFirstIndex` | 跳转到第一个索引 | () => void | 否 | 全平台 | 是 | | `goToLastIndex` | 跳转到最后一个索引 | () => void | 否 | 全平台 | 是 | +### SwiperFlatListWithGestureHandler 函数 + +| 名称 | 描述 | 类型 | 必填 | 平台 | HarmonyOS 支持 | +| :--- | :--- | :--- | :--- | :--- | :--- | +| `scrollToIndex` | 滚动到指定索引 | ({ item: ScrollToIndex}) => void | 否 | 全平台 | 是 | +| `getCurrentIndex` | 返回当前索引 | () => number | 否 | 全平台 | 是 | +| `getPrevIndex` | 返回上一个索引 | () => number | 否 | 全平台 | 是 | +| `goToFirstIndex` | 跳转到第一个索引 | () => void | 否 | 全平台 | 是 | +| `goToLastIndex` | 跳转到最后一个索引 | () => void | 否 | 全平台 | 是 | + ### Pagination 函数 | 名称 | 描述 | 类型 | 必填 | 平台 | HarmonyOS 支持 | -- Gitee