> 模板版本：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包。

<!-- tabs:start -->

#### **npm**

```bash
npm install @tuya-oh/react-native-swiper-flatlist
```

#### **yarn**

```bash
yarn add @tuya-oh/react-native-swiper-flatlist
```

<!-- tabs:end -->

快速使用：

```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)，请自由地享受和参与开源。