React Nativeで任意のコンポーネントのサイズを取得する方法

React NativeでUI系のライブラリを使うと、そのライブラリに含まれるコンポーネントのサイズを取得して、そのサイズに合わせてその他のコンポーネントを配置したい、ということがあります。例えば、React Native Element でHeaderを使い、その下にメインのViewを配置する場合などです。

こういった場合にどうしたらいいかというと、サイズを知りたいコンポーネントのonLayout プロパティにコールバック関数を渡して、コールバック関数の引数からサイズを取得すればよいです。

簡単なサンプルを以下に示します。

import React, { Component } from 'react';
import { View } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {height: 0};
  }

  onLayout = (e) => {
    /* コンポーネントの高さを取得し、stateに保存 */
    this.setState({
      height: e.nativeEvent.layout.height
    });
  }

  render() {
    return (
        <View>
          <View 
            onLayout={this.onLayout} /*ここでコールバック関数を渡す*/
            style={{ 
            backgroundColor:'powderblue', 
            position:'absolute', 
            height:130, 
            width:200 }}></View>
          <View style={{ 
            backgroundColor:'steelblue', 
            height:100,
            marginTop:this.state.height, /* 上のコンポーネントの高さの分マージンをとる */
            width:100 
            }}></View>
        </View>
    );
  }
}

実行結果