0

I'm trying to select multiple elements inside the pan component. I seacrhed a lot and now I can get the scrool coordinates, but with this x and y coordinate values I can't understand which one is selected.

HourComponent.js (so simple just one text)

<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

constructor(props) {
    super(props);
    const panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      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'},
        {isSelected: false, hourText: '10:40'},
        {isSelected: false, hourText: '11:00'},
        {isSelected: false, hourText: '11:20'},
        {isSelected: false, hourText: '11:40'},
        {isSelected: false, hourText: '12:00'},
        {isSelected: false, hourText: '12:20'},
        {isSelected: false, hourText: '12:40'},
      ],     
      panResponder,
    };
  }

In render section

<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

My problem is how to get selected component.I can't make it with coordinates .Thank you

I can't get the selected values ,just can get coordiantes I'm still having this problem

4

0 回答 0