React Native 使用 PanResponder API 获取 Touched 组件

如何解决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 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?