react-native 獲取組件的寬度和高度

react-native 獲取組件的尺寸有兩種方式，第一種方式使用元素自身的onLayout屬性去獲取，但是這種方式有一個局限性，就是只有在初次渲染的時候才會觸發這個函數，而且此種方法獲取的是組件相對於父組件的位置坐標。如果我們需要隨時都可以去獲取組件的尺寸或者相對於屏幕的位置坐標時，這種方式並不適合。

那么這里我們就來看下第二種方式，使用react-native中的findNodeHandle和UIManager來獲取組件的尺寸：

import {
    findNodeHandle,
    UIManager
} from 'react-native';

layout(ref) {
        const handle = findNodeHandle(ref);
        
        return new Promise((resolve) => {
            UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
                resolve({
                    x,
                    y,
                    width,
                    height,
                    pageX,
                    pageY
                });
            });
        });
 }
          

 

這里我們聲明了一個名叫layout的函數，當我們需要獲取組件的寬度和高度或者位置信息時，就可以通過調用這個函數去獲取。我們可以看到layout這個函數接受一個ref參數，這個參數表示組件的實例，傳入組件的實例后，然后通過findNodeHandle方法獲取組件節點。

UIManager.measure接受兩個參數，第一個參數是通過findNodeHandle獲取的組件節點，第二個參數是獲取成功的回調，回調有6個參數：

x，y表示組件的相對位置，width，height表示組件的寬度和高度，pageX，pageY表示組件相對於屏幕的絕對位置。