# react-native-swipe-list-view **Repository Path**: harmonytsc_rn/react-native-swipe-list-view ## Basic Information - **Project Name**: react-native-swipe-list-view - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-02-20 - **Last Updated**: 2026-01-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README > 模板版本：v0.2.2

@ohmi/react-native-swipe-list-view

Supported platforms License

> [!TIP] [Gitee 地址](https://gitee.com/kunyuan-hongke/react-native-swipe-list-view) ## 安装与使用 请到三方库的 Releases 发布地址查看配套的版本信息：[@ohmi/react-native-swipe-list-view Releases](https://gitee.com/kunyuan-hongke/react-native-swipe-list-view/releases/) 。对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/tree/master/zh-cn/tgz-usage.md)安装tgz包。 进入到工程目录并输入以下命令： #### **npm** ```bash npm install --save @ohmi/react-native-swipe-list-view ``` #### **yarn** ```bash yarn add @ohmi/react-native-swipe-list-view ``` 下面的代码展示了这个库的基本使用场景： > [!WARNING] 使用时 import 的库名不变。 ```tsx import { SwipeListView } from 'react-native-swipe-list-view'; //... note: your data array objects MUST contain a key property // or you must pass a keyExtractor to the SwipeListView to ensure proper functionality // see: https://reactnative.dev/docs/flatlist#keyextractor this.state.listViewData = Array(20) .fill("") .map((_, i) => ({ key: `${i}`, text: `item #${i}` })); //... render() { return ( ( I am {data.item.text} in a SwipeListView )} renderHiddenItem={ (data, rowMap) => ( Left Right )} leftOpenValue={75} rightOpenValue={-75} /> ) } ``` 完整使用案例如下： ```jsx import React, { useState } from "react"; import { StyleSheet, Text, TouchableOpacity, TouchableHighlight, View, } from "react-native"; import { SwipeListView } from "react-native-swipe-list-view"; export default function Basic() { const [listData, setListData] = useState( Array(20) .fill("") .map((_, i) => ({ key: `${i}`, text: `item #${i}` })), ); const closeRow = (rowMap, rowKey) => { if (rowMap[rowKey]) { rowMap[rowKey].closeRow(); } }; const deleteRow = (rowMap, rowKey) => { closeRow(rowMap, rowKey); const newData = [...listData]; const prevIndex = listData.findIndex((item) => item.key === rowKey); newData.splice(prevIndex, 1); setListData(newData); }; const onRowDidOpen = (rowKey) => { console.log("This row opened", rowKey); }; const renderItem = (data) => ( console.log("You touched me")} style={styles.rowFront} underlayColor={"#AAA"} > I am {data.item.text} in a SwipeListView ); const renderHiddenItem = (data, rowMap) => ( Left closeRow(rowMap, data.item.key)} > Close deleteRow(rowMap, data.item.key)} > Delete ); return ( ); } const styles = StyleSheet.create({ container: { backgroundColor: "white", flex: 1, }, backTextWhite: { color: "#FFF", }, rowFront: { alignItems: "center", backgroundColor: "#CCC", borderBottomColor: "black", borderBottomWidth: 1, justifyContent: "center", height: 50, }, rowBack: { alignItems: "center", backgroundColor: "#DDD", flex: 1, flexDirection: "row", justifyContent: "space-between", paddingLeft: 15, }, backRightBtn: { alignItems: "center", bottom: 0, justifyContent: "center", position: "absolute", top: 0, width: 75, }, backRightBtnLeft: { backgroundColor: "blue", right: 75, }, backRightBtnRight: { backgroundColor: "red", right: 0, }, }); ``` ## 约束与限制 ### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@ohmi/react-native-swipe-list-view Releases](https://gitee.com/kunyuan-hongke/react-native-swipe-list-view/releases/) ## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。**SwipeListView** | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | ------------- | ----------------- | | data | List of objects to be passed into the `renderItem` and `renderHiddenItem` functions. Each item must include a unique `key` property or `keyExtractor` must be implemented to ensure full functionality. | array | YES | Android iOS | YES | | useSectionList | Render list using React Native's `SectionList` | bool | NO | Android iOS | YES | | renderItem | How to render a row in a FlatList. Should return a valid React Element. | func | YES | Android iOS | YES | | renderHiddenItem | How to render a hidden row in a FlatList (renders behind the row). Should return a valid React Element. This is required unless `renderItem` returns a `` (see [Per Row Behavior](https://github.com/jemise111/react-native-swipe-list-view/blob/master/docs/per-row-behavior.md)). | func | YES | Android iOS | YES | | leftOpenValue | TranslateX value for opening the row to the left (positive number) | number | NO | Android iOS | YES | | rightOpenValue | TranslateX value for opening the row to the right (negative number) | number | NO | Android iOS | YES | | leftActivationValue | TranslateX value for firing onLeftActionStatusChange (positive number) | number | NO | Android iOS | NO | | rightActivationValue | TranslateX value for firing onRightActionStatusChange (negative number) | number | NO | Android iOS | YES | | rightActionValue | TranslateX value for right action to which the row will be shifted after gesture release | number | NO | Android iOS | YES | | initialLeftActionState | Initial value for left action state (default is false) | bool | NO | Android iOS | YES | | initialRightActionState | Initial value for right action state (default is false) | bool | NO | Android iOS | YES | | closeOnRowPress | Should open rows be closed when a row is pressed | bool | NO | Android iOS | YES | | closeOnRowOpen | Should open rows be closed when another row is opened | bool | NO | Android iOS | YES | | closeOnRowBeginSwipe | Should open rows be closed when a row begins to swipe open | bool | NO | Android iOS | YES | | closeOnScroll | Should open rows be closed when the listView begins scrolling | bool | NO | Android iOS | YES | | disableLeftSwipe | Disable ability to swipe the row left | bool | NO | Android iOS | YES | | disableRightSwipe | Disable ability to swipe the row right | bool | NO | Android iOS | YES | | stopLeftSwipe | TranslateX value for stop the row to the left (positive number). This number is the stop value corresponding to the leftOpenValue (while the row is swiping in the right direction) | number | NO | Android iOS | YES | | stopRightSwipe | TranslateX value for stop the row to the right (negative number). This number is the stop value corresponding to the rightOpenValue (while the row is swiping in the left direction) | number | NO | Android iOS | YES | | directionalDistanceChangeThreshold | Change the sensitivity of the row | number | NO | Android iOS | YES | | swipeToOpenPercent | What % of the left/right openValue does the user need to swipe past to trigger the row opening. | number | NO | Android iOS | YES | | swipeToClosePercent | What % of the left/right openValue does the user need to swipe past to trigger the row closing. | number | NO | Android iOS | YES | | swipeToOpenVelocityContribution | Describes how much the ending velocity of the gesture affects whether the swipe will result in the item being closed or open. A velocity factor of 0 (the default) means that the velocity will have no bearing on whether the swipe settles on a closed or open position and it'll just take into consideration the swipeToOpenPercent. Ideal values for this prop tend to be between 5 and 15. | number | NO | Android iOS | YES | | recalculateHiddenLayout | Enable hidden row onLayout calculations to run always. By default, hidden row size calculations are only done on the first onLayout event for performance reasons. Passing true here will cause calculations to run on every onLayout event. You may want to do this if your rows' sizes can change. One case is a SwipeListView with rows of different heights and an options to delete rows. | bool | NO | Android iOS | YES | | swipeGestureBegan | Called when a swipe row is animating swipe | func | NO | Android iOS | YES | | swipeGestureEnded | Called when user has ended their swipe gesture | func | NO | Android iOS | YES | | onRowOpen | Called when a swipe row is animating open. This has a param of toValue which is the new X value the row (after it has opened). This can be used to calculate which direction the row has been swiped open. | func | NO | Android iOS | YES | | onRowDidOpen | Called when a swipe row has animated open | func | NO | Android iOS | YES | | onRowClose | Called when a swipe row is animating closed | func | NO | Android iOS | YES | | onRowDidClose | Called when a swipe row has animated closed | func | NO | Android iOS | YES | | onLeftActionStatusChange | Called once when swipe value crosses the leftActivationValue | func | NO | Android iOS | YES | | onRightActionStatusChange | Called once when swipe value crosses the rightActivationValue | func | NO | Android iOS | YES | | onLeftAction | Called when row shifted to leftActivationValue | func | NO | Android iOS | YES | | onRightAction | Called when row shifted to rightActivationValue | func | NO | Android iOS | YES | | onScrollEnabled | Called when scrolling has been enabled/disabled | func | NO | Android iOS | YES | | swipeRowStyle | Styles for the parent wrapper View of the SwipeRow | object | NO | Android iOS | YES | | listViewRef | Called when the ListView ref is set and passes a ref to the ListView. e.g. listViewRef={ ref => this._swipeListViewRef = ref } | func | NO | Android iOS | YES | | previewRowKey | Should the row with this key do a slide out preview to show that the list is swipeable | string | NO | Android iOS | YES | | previewDuration | Duration of the slide out preview animation | number | NO | Android iOS | YES | | previewRepeat | Should the animation repeat | bool | NO | Android iOS | YES | | previewRepeatDelay | Delay between each preview repeat in milliseconds | number | NO | Android iOS | YES | | previewOpenValue | TranslateX value for the slide out preview animation. | number | NO | Android iOS | YES | | previewOpenDelay | Add some delay before opening the preview row. Can be useful when you have enter animation. | number | NO | Android iOS | YES | | friction | Friction for the open / close animation. Controls "bounciness"/overshoot. | number | NO | Android iOS | YES | | tension | Tension for the open / close animation. Controls speed | number | NO | Android iOS | YES | | restSpeedThreshold | RestSpeedThreshold for the open / close animation. Controls speed. | number | NO | Android iOS | YES | | restDisplacementThreshold | RestDisplacementThreshold for the open / close animation. Controls speed. | number | NO | Android iOS | YES | | onSwipeValueChange | Callback invoked any time the translateX value of a row changes | func | NO | Android iOS | YES | | renderListView | To render a custom ListView component, if you don't want to use ReactNative one. Note: This will call renderRow, not renderItem | func | NO | Android iOS | YES | | shouldItemUpdate | Callback to determine whether component should update | func | NO | Android iOS | YES | | useNativeDriver | useNativeDriver: true for all animations | bool | NO | Android iOS | YES | | onPreviewEnd | Callback that runs after row swipe preview is finished | func | NO | Android iOS | YES | **SwipeRow** | Name | Description | Type | Required | Platform | HarmonyOS Support | |:------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:--------:|:--------:|:-------------:| ----------------- | | closeOnRowPress | Should the row be closed when it is tapped | bool | NO | Android iOS | YES | | directionalDistanceChangeThreshold | Change the sensitivity of the row | number | NO | Android iOS | YES | | friction | Friction for the open / close animation. Controls "bounciness"/overshoot. https://facebook.github.io/react-native/docs/animated#spring | number | NO | Android iOS | YES | | tension | Tension for the open / close animation. Controls speed. https://facebook.github.io/react-native/docs/animated#spring | number | NO | Android iOS | YES | | restSpeedThreshold | RestSpeedThreshold for the open / close animation. Controls speed. https://facebook.github.io/react-native/docs/animated#spring | number | NO | Android iOS | YES | | restDisplacementThreshold | RestDisplacementThreshold for the open / close animation. Controls speed. https://facebook.github.io/react-native/docs/animated#spring | number | NO | Android iOS | YES | | leftOpenValue | TranslateX value for opening the row to the left (positive number) | number | YES | Android iOS | YES | | rightOpenValue | TranslateX value for opening the row to the right (negative number) | number | YES | Android iOS | YES | | leftActivationValue | TranslateX value for firing onLeftActionStatusChange (positive number) | number | NO | Android iOS | YES | | rightActivationValue | TranslateX value for firing onRightActionStatusChange (negative number) | number | NO | Android iOS | YES | | initialLeftActionState | Initial value for left action state (default is false) | bool | NO | Android iOS | YES | | initialRightActionState` | Initial value for right action state (default is false) | bool | NO | Android iOS | YES | | leftActionValue | TranslateX value for left action to which the row will be shifted after gesture release | number | NO | Android iOS | YES | | rightActionValue | TranslateX value for right action to which the row will be shifted after gesture release | number | NO | Android iOS | YES | | stopLeftSwipe | TranslateX value for stop the row to the left (positive number). This number is the stop value corresponding to the leftOpenValue (while the row is swiping in the right direction) | number | NO | Android iOS | YES | | stopRightSwipe | TranslateX value for stop the row to the right (negative number). This number is the stop value corresponding to the rightOpenValue (while the row is swiping in the left direction) | number | NO | Android iOS | YES | | onRowPress | Called when row is pressed. | func | NO | Android iOS | YES | | onRowOpen | Called when row is animating open. Used by the SwipeListView to keep references to open rows. | func | NO | Android iOS | YES | | onRowDidOpen | Called when row has animated open | func | NO | Android iOS | YES | | onRowClose | Called when row is animating closed | func | NO | Android iOS | YES | | onRowDidClose | Called when a swipe row has animated closed | func | NO | Android iOS | YES | | onLeftActionStatusChange | Called once when swipe value crosses the leftActivationValue | func | NO | Android iOS | YES | | onRightActionStatusChange | Called once when swipe value crosses the rightActivationValue | func | NO | Android iOS | YES | | onLeftAction | Called when row shifted to leftActivationValue | func | NO | Android iOS | YES | | onRightAction | Called when row shifted to rightActivationValue | func | NO | Android iOS | YES | | swipeToOpenPercent | What % of the left/right openValue does the user need to swipe past to trigger the row opening. | number | NO | Android iOS | YES | | swipeToClosePercent | What % of the left/right openValue does the user need to swipe past to trigger the row closing. | number | NO | Android iOS | YES | | setScrollEnabled | Used by the SwipeListView to close rows on scroll events. You shouldn't need to use this prop explicitly. | func | NO | Android iOS | YES | | disableLeftSwipe | Disable ability to swipe the row left | bool | NO | Android iOS | YES | | disableRightSwipe | Disable ability to swipe the row right | bool | NO | Android iOS | YES | | recalculateHiddenLayout | Enable hidden row onLayout calculations to run always | bool | NO | Android iOS | YES | | style | Styles for the parent wrapper View of the SwipeRow | object | YES | Android iOS | YES | | preview | Should the row do a slide out preview to show that it is swipeable | bool | NO | Android iOS | YES | | previewDuration | Duration of the slide out preview animation | number | NO | Android iOS | YES | | previewRepeat | Should the animation repeat | bool | NO | Android iOS | YES | | previewRepeatDelay | Delay between each preview repeat in milliseconds | number | NO | Android iOS | YES | | previewOpenValue | TranslateX value for the slide out preview animation | number | NO | Android iOS | YES | | onSwipeValueChange | Callback invoked any time the translateX value of the row changes | func | NO | Android iOS | YES | | swipeGestureBegan | Called when the row is animating swipe | func | NO | Android iOS | YES | | swipeGestureEnded | Called when user has ended their swipe gesture | func | NO | Android iOS | YES | | swipeToOpenVelocityContribution | Describes how much the ending velocity of the gesture affects whether the swipe will result in the item being closed or open. A velocity factor of 0 (the default) means that the velocity will have no bearing on whether the swipe settles on a closed or open position and it'll just take into consideration the swipeToOpenPercent. Ideal values for this prop tend to be between 5 and 15. | number | NO | Android iOS | YES | | shouldItemUpdate | Callback to determine whether component should update | func | NO | Android iOS | YES | | forceCloseToLeftThreshold | TranslateX amount(not value!) threshold that triggers force-closing the row to the Left End (positive number) | number | NO | Android iOS | YES | | forceCloseToRightThreshold | TranslateX amount(not value!) threshold that triggers force-closing the row to the Right End (positive number) | number | NO | Android iOS | YES | | onForceCloseToLeft | Callback invoked when row is force closing to the Left End | func | NO | Android iOS | YES | | onForceCloseToRight | Callback invoked when row is force closing to the Right End | func | NO | Android iOS | YES | | onForceCloseToLeftEnd | Callback invoked when row has finished force closing to the Left End | func | NO | Android iOS | YES | | onForceCloseToRightEnd | Callback invoked when row has finished force closing to the Right End | func | NO | Android iOS | YES | | useNativeDriver | useNativeDriver: true for all animations | bool | NO | Android iOS | YES | | swipeKey | Optional key to identify a standalone row, used in the onSwipeValueChange callback | string | NO | Android iOS | YES | | onPreviewEnd | Callback that runs after row swipe preview is finished | func | NO | Android iOS | YES | ## 遗留问题 - [ ] 属性leftActivationValue在鸿蒙暂时未适配 [issue#4](https://github.com/react-native-oh-library/react-native-swipe-list-view/issues/4) ## 其他 ## 开源协议 本项目基于 [The MIT License (MIT)](https://gitee.com/kunyuan-hongke/react-native-swipe-list-view/blob/master/LICENSE) ，请自由地享受和参与开源。