الحصول على حجم المكون نفسه React Native

يمكنك استخدام الخاصية "onLayout" حيث يتم استدعاؤها عند تركيب المكون وعند كل تغيير.

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default function App() {
  const [dimensions, setDimensions] = React.useState({
    width: 0,
    height: 0
  });
  const computeSize = event => {
    setDimensions({
      width: event.nativeEvent.layout.width,
      height: event.nativeEvent.layout.height
    });
  };
  return (
    <View style={styles.container} onLayout={computeSize}>
      <Text>Width: {dimensions.width}px</Text>
      <Text>Height: {dimensions.height}px</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderColor: '#000',
    borderWidth: 1,
    padding: 12
  }
});

يمكنك استخدام onLayout event handler بهذه الطريقة للحصول على حجم ال View

function App() {
  const viewRef = useRef(null);

  const getSize = (layout) => {
    const { x, y, width, height } = layout;
  	console.log(x);
    console.log(y);
    console.log(width);
    console.log(height);
  };

  return (
    <View onLayout={(event) => getSize(event.nativeEvent.layout)}>
      <Button title="Get Size" />
    </View>
  );
}