From 01c4a3fbce16841d826eb640f1f9a47c27acd570 Mon Sep 17 00:00:00 2001 From: feng Date: Fri, 31 May 2024 11:43:13 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#I9TPCB]=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0react-native-swipe-list-view.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-swipe-list-view.md | 352 +++++++++++++------------- zh-cn/react-native-swipe-list-view.md | 10 +- 2 files changed, 184 insertions(+), 178 deletions(-) diff --git a/1224/react-native-swipe-list-view.md b/1224/react-native-swipe-list-view.md index fd527986..2308f0c6 100644 --- a/1224/react-native-swipe-list-view.md +++ b/1224/react-native-swipe-list-view.md @@ -13,20 +13,24 @@ ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-swipe-list-view Releases](https://github.com/react-native-oh-library/react-native-swipe-list-view/releases/)，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： +> [!TIP] # 处替换为 tgz 包的路径 + -#### **npm** +#### **npm** ```bash -npm install --save react-native-swipe-list-view@3.2.9 +npm install --save react-native-swipe-list-view@file:# ``` #### **yarn** ```bash -yarn add react-native-swipe-list-view@3.2.9 +yarn add react-native-swipe-list-view@file:# ``` @@ -36,7 +40,7 @@ yarn add react-native-swipe-list-view@3.2.9 ```tsx import { SwipeListView } from 'react-native-swipe-list-view'; -//... note: your data array objects MUST contain a key property +//... 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 @@ -70,129 +74,129 @@ render() { 完整使用案例如下： ```jsx -import React, { useState } from 'react'; +import React, { useState } from "react"; import { - StyleSheet, - Text, - TouchableOpacity, - TouchableHighlight, - View, -} from 'react-native'; + StyleSheet, + Text, + TouchableOpacity, + TouchableHighlight, + View, +} from "react-native"; -import { SwipeListView } from 'react-native-swipe-list-view'; +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 [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, - }, + 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, + }, }); ``` @@ -236,61 +240,59 @@ const styles = StyleSheet.create({ # `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 | - - +| 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 | ## 遗留问题 diff --git a/zh-cn/react-native-swipe-list-view.md b/zh-cn/react-native-swipe-list-view.md index 9244fe9d..2308f0c6 100644 --- a/zh-cn/react-native-swipe-list-view.md +++ b/zh-cn/react-native-swipe-list-view.md @@ -13,20 +13,24 @@ ## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-swipe-list-view Releases](https://github.com/react-native-oh-library/react-native-swipe-list-view/releases/)，并下载适用版本的 tgz 包。 + 进入到工程目录并输入以下命令： +> [!TIP] # 处替换为 tgz 包的路径 + -#### **npm** +#### **npm** ```bash -npm install --save react-native-swipe-list-view@3.2.9 +npm install --save react-native-swipe-list-view@file:# ``` #### **yarn** ```bash -yarn add react-native-swipe-list-view@3.2.9 +yarn add react-native-swipe-list-view@file:# ``` -- Gitee