From b85094c31bc6652208f6af0ad9ed87eb0a991514 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= Date: Tue, 4 Nov 2025 20:18:18 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#ID51GL]=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9react-native-draggable-flatlist=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- en/react-native-draggable-flatlist.md | 23 +++++++++++++++++------ zh-cn/react-native-draggable-flatlist.md | 24 ++++++++++++++++++------ 2 files changed, 35 insertions(+), 12 deletions(-) diff --git a/en/react-native-draggable-flatlist.md b/en/react-native-draggable-flatlist.md index 87d97581..4f153b2c 100644 --- a/en/react-native-draggable-flatlist.md +++ b/en/react-native-draggable-flatlist.md @@ -41,8 +41,21 @@ import DraggableFlatList, { } from "react-native-draggable-flatlist"; import { Gesture, GestureDetector } from "react-native-gesture-handler"; import { runOnJS } from "react-native-reanimated"; -import { mapIndexToData, Item } from "../utils"; +export function getColor(i: number, numItems: number) { + const multiplier = 255 / (numItems - 1); + const colorVal = i * multiplier; + return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`; +} +const mapIndexToData = (d: any, index: number, arr: any[]) => { + const backgroundColor = getColor(index, arr.length); + return { + text: `${index}`, + key: `key-${backgroundColor}`, + backgroundColor, + }; +} +export type Item = ReturnType; const NUM_ITEMS = 10; const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData); @@ -172,7 +185,7 @@ Check the release version information in the release address of the third-party | onScrollOffsetChange | Called with scroll offset. Stand-in for onScroll. | function | no | all | yes | | onPlaceholderIndexChange | Called when the index of the placeholder changes. | function | no | all | yes | | dragItemOverflow | If true, dragged item follows finger beyond list boundary. | boolean | no | all | yes | -| dragHitSlop | Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area). | Object | no | no | no | +| dragHitSlop | Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area). | Object | no | no | yes | | debug | Enables debug logging and animation debugger. | boolean | no | all | yes | | containerStyle | Style of the main component. | Object | no | all | yes | | simultaneousHandlers | References to other gesture handlers, mainly useful when using this component within a ScrollView. | Object | no | no | no | @@ -186,10 +199,8 @@ Check the release version information in the release address of the third-party - [X] The four properties itemEnteringAnimation, itemExitingAnimation, itemLayoutAnimation, and enableLayoutAnimationExperimental rely on the react-native-reanimated animation library. Since the animation library has not yet implemented this feature, these properties currently have no effect. issue: [issue#2](https://github.com/react-native-oh-library/react-native-draggable-flatlist/issues/2). -## 6. Others - -- [X] The simultaneousHandlers、dragHitSlop source library has no effect. Issue: [issue#1](https://github.com/react-native-oh-library/react-native-draggable-flatlist/issues/1). +- [X] The simultaneousHandlers property relies on the react-native-gesture-handler library. Since the gesture library has not yet implemented this feature, this property currently has no effect. Issue: [issue#1](https://github.com/react-native-oh-library/react-native-draggable-flatlist/issues/1). -## 7. License +## 6. License This project is licensed under [MIT License](https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/LICENSE.txt). diff --git a/zh-cn/react-native-draggable-flatlist.md b/zh-cn/react-native-draggable-flatlist.md index d3ab031b..04e3efd9 100644 --- a/zh-cn/react-native-draggable-flatlist.md +++ b/zh-cn/react-native-draggable-flatlist.md @@ -42,8 +42,21 @@ import DraggableFlatList, { } from "react-native-draggable-flatlist"; import { Gesture, GestureDetector } from "react-native-gesture-handler"; import { runOnJS } from "react-native-reanimated"; -import { mapIndexToData, Item } from "../utils"; +export function getColor(i: number, numItems: number) { + const multiplier = 255 / (numItems - 1); + const colorVal = i * multiplier; + return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`; +} +const mapIndexToData = (d: any, index: number, arr: any[]) => { + const backgroundColor = getColor(index, arr.length); + return { + text: `${index}`, + key: `key-${backgroundColor}`, + backgroundColor, + }; +} +export type Item = ReturnType; const NUM_ITEMS = 10; const initialData: Item[] = [...Array(NUM_ITEMS)].map(mapIndexToData); @@ -173,7 +186,7 @@ const styles = StyleSheet.create({ | onScrollOffsetChange | Called with scroll offset. Stand-in for onScroll. | function | no | all | yes | | onPlaceholderIndexChange | Called when the index of the placeholder changes. | function | no | all | yes | | dragItemOverflow | If true, dragged item follows finger beyond list boundary. | boolean | no | all | yes | -| dragHitSlop | Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area). | Object | no | no | no | +| dragHitSlop | Enables control over what part of the connected view area can be used to begin recognizing the gesture. Numbers need to be non-positive (only possible to reduce responsive area). | Object | no | no | yes | | debug | Enables debug logging and animation debugger. | boolean | no | all | yes | | containerStyle | Style of the main component. | Object | no | all | yes | | simultaneousHandlers | References to other gesture handlers, mainly useful when using this component within a ScrollView. | Object | no | no | no | @@ -187,9 +200,8 @@ const styles = StyleSheet.create({ - [X] itemEnteringAnimation、itemExitingAnimation、itemLayoutAnimation、enableLayoutAnimationExperimental四个属性依赖react-native-remanited动画库，因动画库暂未实现该功能，所以相关属性目前无效果。 问题：[issue#2](https://github.com/react-native-oh-library/react-native-draggable-flatlist/issues/2)。 -## 6. 其他 -- [X] simultaneousHandlers、dragHitSlop源库没有效果。 问题：[issue#1](https://github.com/react-native-oh-library/react-native-draggable-flatlist/issues/1)。 - -## 7. 开源协议 +- [X] simultaneousHandlers属性依赖react-native-gesture-handler手势库，因手势库暂未实现该功能，所以该属性目前无效果。 问题：[issue#1](https://github.com/react-native-oh-library/react-native-draggable-flatlist/issues/1)。 + +## 6. 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/computerjazz/react-native-draggable-flatlist/blob/main/LICENSE.txt)，请自由地享受和参与开源。 \ No newline at end of file -- Gitee