模板版本：v0.2.2

This project is based on react-native-swiper-flatlist

[!TIP] Gitee

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@tuya-oh/react-native-swiper-flatlist Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

npm

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

yarn

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

快速使用：

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