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表示元件相對於螢幕的絕對位置。