javascript 如何通过滑动react native来选择多个项目

我想知道如何在react native中选择多个项目。
这里的想法是我想选择一堆文本ID通过滑动，想象同样的行为，当你想删除多个图像在您的galery在您的手机。

const App =() => {

  const [infos,setInfos] = useState({
    firsttime : true ,
    startId:'',
    selected :[]
    });

const fonction = (id) =>{
    if(infos.firsttime){
         setInfos(prevState => {...prevState , firsttime : false , startId : id})
      }
    else {
         setInfos(prevState => {
               return {
                        ...prevState ,
                         selected : [...prevState.selected , id]
                      }
                  });
         }
                       };

return (
<View>
     <Text  onSomefunction={function.bind(this,1)}>S</Text>
     <Text  onSomefunction={function.bind(this,2)}>T</Text>
     <Text  onSomefunction={function.bind(this,3)}>A</Text>
     <Text  onSomefunction={function.bind(this,4)}>C</Text>
     <Text  onSomefunction={function.bind(this,5)}>K</Text>
</View>

)

}

这里的问题是，如果我在<Pressable/>组件中 Package 文本，即使我使用onPress，我也只能选择第一个项目，因为onPress不识别其他项目上的滑动，我需要类似悬停或类似的东西，检测我的手指是否通过多个项目。例如：如果我按下T并将手指滑到底部，它将选择T，A，C，K。

您提供的代码是一个基本示例，说明了如何使用滑动手势在ReactNative中选择多个项目。其思想是在每个Text组件上使用onSomefunctionprop来触发functionfunction函数，该函数被传递选定项目的id。在functionfunction函数中，您使用状态信息来跟踪是否是第一次选择项目（firsttime）、选定内容的起始ID和选定项的数组。
在初始呈现中，当firsttime为true时，函数将firsttime state设置为false，并将startId state设置为传入的id。在后续选择中，函数将id推送到选定的数组。
您应该添加更多代码来处理滑动手势，以及一种直观地指示哪些项已被选中的方法。
以下示例说明了如何向代码中添加滑动手势以选择多个项目：

import { PanResponder, View } from 'react-native';

const App =() => {
  const [infos,setInfos] = useState({
    firsttime : true ,
    startId:'',
    selected :[]
    });

  // Use PanResponder to handle swipe gestures
  const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: (evt, gestureState) => {
        // Only set pan responder if swipe gesture is greater than 20 pixels
        if (Math.abs(gestureState.dx) > 20) {
          return true;
        }
        return false;
      },
      onPanResponderMove: (evt, gestureState) => {
        // Get the ID of the item being swiped
        const id = evt.currentTarget.getAttribute('data-id');
        // Add or remove item from selected array
        if (gestureState.dx > 0) {
          setInfos(prevState => {
            return {
              ...prevState,
              selected: [...prevState.selected, id],
            };
          });
        } else {
          setInfos(prevState => {
            return {
              ...prevState,
              selected: prevState.selected.filter(item => item !== id),
            };
          });
        }
      },
    })
  ).current;

  return (
    <View style={styles.container}>
      <Text style={styles.text} data-id={1} {...panResponder.panHandlers}>S</Text>
      <Text style={styles.text} data-id={2} {...panResponder.panHandlers}>T</Text>
      <Text style={styles.text} data-id={3} {...panResponder.panHandlers}>A</Text>
      <Text style={styles.text} data-id={4} {...panResponder.panHandlers}>C</Text>
      <Text style={styles.text} data-id={5} {...panResponder.panHandlers}>K</Text>
    </View>
  );
};

在本例中，我使用React Native中的PanResponder模块来处理滑动手势，PanResponder.create（）方法用于创建新的平移响应器，生成的对象使用spread操作符（...）作为 prop 传递给每个Text组件。
我为每个Text组件添加了一个data-id属性，这样就可以在onPanResponderMove函数中访问所选项的ID。在onPanResponderMove函数中，我检查手势的dx值，以确定滑动是向右还是向左，并相应地在所选数组中添加或删除项。
您将需要设置文本组件和容器视图的样式，这只是一个示例。
还需要注意的是，此代码只是一个示例，并不处理所有边缘情况（例如将手势移出文本组件），但它应该给予您了解如何开始在ReactNative中实现滑动手势选择

javascript 如何通过滑动react native来选择多个项目

1条答案

相关问题

热门标签

最新问答