タイトル通り、React Native で開発中のアプリで、ある特定の要素の高さを取得したかったのでその手順をまとめ。
実装には下記の記事を参考にさせていただきました。
React Nativeで任意のコンポーネントのサイズを取得する方法 – Qiita
https://qiita.com/karadaharu/items/07364597387e988c2648
で、要素の高さを取得するには onLayout プロパティを使います。
サンプルコードは下記のとおりです。
getHeight = e => {
console.log(`height: ${e.nativeEvent.layout.height}`);
}
<View onLayout={this.getHeight}>
......
</View>
高さを取得したい要素に onLayout プロパティで getHeight() 関数を指定しています。
あとは、getHeight() 関数内で、e から要素の高さを取得します。
サンプルコードでは、取り合えず console.log() で値を確認しているだけですが、実際には state に保存した方が後々扱いやすいと思います。
なお、今回は使っていませんが、他にも要素の幅を取得したり、要素の x、y を取得することもできるようでした。
使い方は下記のとおりです。
// 要素の幅を取得 e.nativeEvent.layout.width // 要素の高さを取得 e.nativeEvent.layout.height // x 座標を取得 e.nativeEvent.layout.x // y 座標を取得 e.nativeEvent.layout.y
処理としては以上です！
以上、React Native で特定のコンポーネントの高さを取得する方法についてでした。
ご参考になれば幸いです。
