React Native 使用 PanResponder API 获取 Touched 组件

问题描述

我正在尝试选择平移组件内的多个元素。我搜索了很多，现在我可以得到滚动坐标，但是有了这个 x 和 y 坐标值，我无法理解选择了哪个。

HourComponent.js（如此简单只有一个文本）

<View
  height={35}
  marginVertical={8}
  width={Dimensions.get("window").width / 3 }
  borderRadius={10}
  alignItems="center"
  justifyContent="center"
  bg={this.props.isSelected ? "green" : "#F0F2F6"}
  marginHorizontal={6}
>
  <Text>{this.props.hourText}</Text>
</View>;

构造函数

constructor(props) {
    super(props);
    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt,gestureState) => true,onMoveShouldSetPanResponder: (evt,onPanResponderMove: (event,gesture) => {
        var witdh = 110;// I find that with console.log,the component Box sizes
        var height = 30;
        var x = gesture.moveX / witdh;
        var y = gesture.moveY / height;
        console.log('gesture.moveY',gesture.moveY);
         console.log('x: ' + x + ' y: ' + y);
      },});
    this.state = {    
      hours: [
        {isSelected: false,hourText: '10:00'},{isSelected: false,hourText: '10:20'},hourText: '10:40'},hourText: '11:00'},hourText: '11:20'},hourText: '11:40'},hourText: '12:00'},hourText: '12:20'},hourText: '12:40'},],panResponder,};
  }

在渲染部分

<Box
  flex={1}
  mt={20}
  alignItems={"flex-start"}
  justifyContent={"center"}
  flexDirection={"row"}
  flexWrap={"wrap"}
  flexDirection="row"
>
  {this.state.hours.map((hours,index) => {
    return (
      <View
        style={{
          backgroundColor: "red",}}
        {...this.state.panResponder.panHandlers}
      >
        <TouchableOpacity
          style={{ backgroundColor: "blue" }}
          onPress={() => {
            this.hourSelect(hours,index);
          }}
        >
          <HoursComponent
            hoursText={hours.hoursText}
            isSelected={hours.isSelected}
            hours={hours}
          />
        </TouchableOpacity>
      </View>
    );
  })}
</Box>;

Render Result

Console logs

我的问题是如何获取选定的组件。我无法使用坐标来制作它。谢谢

我无法获得选定的值，只能获得坐标我还是有这个问题

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

panresponder react-native