@tuya-oh/react-native-swiper-flatlist

> 模板版本：v0.2.2 <p align="center"> <h1 align="center"> <code>react-native-swiper-flatlist</code> </h1> </p> <p align="center"> <a href="https://github.com/gusgard/react-native-swiper-flatlist"> <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" /> </a> <a href="https://github.com/gusgard/react-native-swiper-flatlist/blob/master/LICENSE"> <img src="https://img.shields.io/badge/license-Apache2.0-green.svg" alt="License" /> </a> </p> This project is based on [react-native-swiper-flatlist](https://github.com/gusgard/react-native-swiper-flatlist) > [!TIP] [Gitee](https://gitee.com/rn-mi/ty-react-native-swiper-flatlist) ## 安装与使用请到三方库的 Releases 发布地址查看配套的版本信息：[@tuya-oh/react-native-swiper-flatlist Releases](https://gitee.com/rn-mi/ty-react-native-swiper-flatlist/releases) 。对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。  #### **npm** ```bash npm install @tuya-oh/react-native-swiper-flatlist ``` #### **yarn** ```bash yarn add @tuya-oh/react-native-swiper-flatlist ```  快速使用： ```js import React from 'react'; import { Text, Dimensions, StyleSheet, View } from 'react-native'; import { SwiperFlatList } from 'react-native-swiper-flatlist'; const colors = ['tomato', 'thistle', 'skyblue', 'teal']; const App = () => ( <View style={styles.container}> <SwiperFlatList autoplay autoplayDelay={2} autoplayLoop index={2} showPagination data={colors} renderItem={({ item }) => ( <View style={[styles.child, { backgroundColor: item }]}> <Text style={styles.text}>{item}</Text> </View> )} /> </View> ); const { width } = Dimensions.get('window'); const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'white' }, child: { width, justifyContent: 'center' }, text: { fontSize: width * 0.5, textAlign: 'center' }, }); export default App; ``` ## 约束与限制 ### 兼容性在以下版本验证通过 1. RNOH：0.72.50; SDK：HarmonyOS 5.0.3.131; IDE：DevEco Studio 5.0.9.200; ROM：5.0.0.126; ## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 #### 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<T>['renderItem'] | No | All | Yes | | vertical | Show vertical swiper | boolean | No | All | Yes | | index | Index to start | number | No | All | Yes | | renderAll | Render all the items before display it | boolean | No | All | Yes | | showPagination | Show pagination | boolean | No | All | Yes | | paginationDefaultColor | Pagination color | string | No | All | Yes | | paginationActiveColor | Pagination color | string | No | All | Yes | | paginationStyle | Style object for the container | ViewStyle | No | All | Yes | | paginationStyleItem | Style object for the item (dot) | ViewStyle | No | All | Yes | | paginationStyleItemActive | Style object for the active item (dot) | ViewStyle | No | All | Yes | | paginationStyleItemInactive | Style object for the inactive item (dot) | ViewStyle | No | All | Yes | | PaginationComponent | Overwrite Pagination component | node | 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 | | onMomentumScrollEnd | Called after scroll end and the first parameter is the current index | function | No | All | Yes | | onPaginationSelectedIndex | Executed when the user presses the pagination index, similar properties onChangeIndex | function | No | All | Yes | | onChangeIndex | Executed every time the index change, the index change when the user reaches 60% of the next screen | function | No | All | Yes | #### Methods | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-------------- | -------------------------- | :------: | :------: | -------- | ----------------- | | scrollToIndex | Scroll to the index | function | No | All | Yes | | getCurrentIndex | Returns the current index | function | No | All | Yes | | getPrevIndex | Returns the previous index | function | No | All | Yes | | goToFirstIndex | Go to the first index | function | No | All | Yes | | goToLastIndex | Go to the last index | function | No | All | Yes | ### 遗留问题 ### 其他 ### 开源协议本项目基于[Apache License 2.0](https://github.com/gusgard/react-native-swiper-flatlist/blob/master/LICENSE)，请自由地享受和参与开源。