Получите координаты <View>при использовании flex

Question

Я следую этому уроку , чтобы создать несколько объектов перетаскивания с зонами перетаскивания.

Зона перетаскивания - это просто определенная высота, заполняющая экран горизонтально

export default class Screen extends Component {
  render() {
    return (
      <View style={styles.mainContainer}>
        <View style={styles.dropZone}>
          <Text style={styles.text}>Drop them here!</Text>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },
  row: {
    flexDirection: "row"
  },  
  dropZone: {
    height: 200,
    backgroundColor: "#00334d"
  }
}

И тогда код для проверки, выпустили ли мы перетаскиваемый объект внутри зоны перетаскивания, очень прост, просто проверяя, превышает ли координата y определенное значение.

isDropArea(gesture) {
  return gesture.moveY < 200;
}

Это очень просто,и он жестко кодирует значение 200 в определении стиля и в функции, которая проверяет, находимся ли мы в области перетаскивания.

Я хочу создать массив зон перетаскивания 2x2.Для этого я помещаю их в View определенной высоты и использую flex, чтобы расширить каждую зону сброса по строкам и столбцам.Я определяю каждую dropZone как 30x30 и justifyContent с помощью «space -round».

<View style={styles.mainContainer}>
  <View style={styles.col}>
    <View style={styles.row}>
      <View style={styles.dropZone} />
      <View style={styles.dropZone} />
    </View>
    <View style={styles.row}>
      <View style={styles.dropZone} />
      <View style={styles.dropZone} />
    </View>
  </View>
</View>


const styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },
  row: {
    flexDirection: "row",
    justifyContent: 'space-around'
  },  
  col: {
    height: 500,
    flexDirection: "column",
    justifyContent: 'space-around'
  },  
  dropZone: {
    height: 30,
    width: 30,
    flexDirection: "row",
    backgroundColor: "#00334d"
  }
})

Хорошо, теперь вопрос.Используя flex, я не указываю координаты каждой зоны перетаскивания, но позволяю рендеру делать это.Я мог бы сделать некоторые математические расчеты и рассчитать эти координаты, получив разрешение экрана и зная, сколько у меня зон перетаскивания и их размер.

Но есть ли способ получить положение этих DropZones, чтобы я могсделать функцию getDropZoneIndex, которая возвращает мне, в какую зону перетаскивания я поместил перетаскиваемый объект?

Answer 1

Да, вы можете получить координаты любого вида в React Native.Существует подпрограмма onLayout (), которая позволяет вам сделать это:

render() {
  return (<View onLayout={this.onLayout}/>);
}

onLayout = (event) => {
  const {x, y, width, height} = event.nativeEvent.layout;
}

Если я не ошибаюсь, координаты x и y этого объекта макета относительно родительского компонента.