模板版本：v0.2.2

react-native-swiper-flatlist

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

[!TIP] Gitee

安装与使用

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

npm

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

yarn

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

快速使用：

1import React from 'react';
2import { Text, Dimensions, StyleSheet, View } from 'react-native';
3import { SwiperFlatList } from 'react-native-swiper-flatlist';
4
5const colors = ['tomato', 'thistle', 'skyblue', 'teal'];
6
7const App = () => (
8  <View style={styles.container}>
9    <SwiperFlatList
10      autoplay
11      autoplayDelay={2}
12      autoplayLoop
13      index={2}
14      showPagination
15      data={colors}
16      renderItem={({ item }) => (
17        <View style={[styles.child, { backgroundColor: item }]}>
18          <Text style={styles.text}>{item}</Text>
19        </View>
20      )}
21    />
22  </View>
23);
24
25const { width } = Dimensions.get('window');
26const styles = StyleSheet.create({
27  container: { flex: 1, backgroundColor: 'white' },
28  child: { width, justifyContent: 'center' },
29  text: { fontSize: width * 0.5, textAlign: 'center' },
30});
31
32export 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，请自由地享受和参与开源。