تحديد موقع عنصر - React Native

هناك طريقتين

الأولى : عن طريق إستخدام ال onLayout event ومن خلاله يمكنك الحصول على: 

• الطول
• العرض
• الإحداثي x 
• الإحداثي y 

وذلك كالاتي : 

export default class measure extends Component {
  constructor(props) {
    super(props);
    this.state = {
      measurements: {},
    }
  }


  render() {
    return (
      <View>
        <View 
          onLayout={({ layoutEvent}) => {
            this.setState({
              measurements: layoutEvent.layout
            })
          }}
        >
          <Text>Measure Me</Text>
        </View>

        <View>
          <Text>Width: {this.state.measurements.width}</Text>
          <Text>Height: {this.state.measurements.height}</Text>
          <Text>X: {this.state.measurements.x}</Text>
          <Text>Y: {this.state.measurements.y}</Text>
        </View>
      </View>
    );
  }
}

 الطريقة الثانية: بإستخدام (UIManager و findNodeHandle)

وذلك كالتالي: 

import React, { Component } from 'react';
import {
  Text,
  View,
  TouchableOpacity,
  UIManager,
  findNodeHandle
} from 'react-native';

export default class measure extends Component {
  constructor(props) {
    super(props);
    this.state = {
      measurements: {},
    }
  }

  measure() { // الخطوة الثالثة
    UIManager.measure(findNodeHandle(this.view), (x, y, width, height) => {
      this.setState({
        measurements: {
          x,
          y,
          width,
          height
        }
      })
    })
  }

  render() {
    return (
      <View>
        <View 
          ref={ref => this.view = ref} // الخطوة الأولى
        >
          <Text>Measure Me</Text>
        </View>
        <TouchableOpacity onPress={() => this.measure() // الخطوة الثانية}>
          <Text>Measure With UIManager</Text>
        </TouchableOpacity>
        <View>
          <Text>Width: {this.state.measurements.width}</Text>
          <Text>Height: {this.state.measurements.height}</Text>
          <Text>X: {this.state.measurements.x}</Text>
          <Text>Y: {this.state.measurements.y}</Text>
        </View>
      </View>
    );
  }
}

بالتوفيق إن شاء الله.