Dimensionsは、デバイスの画面幅などの情報を取得するReact NativeのAPIだ。

取得するときは以下のgetメソッドを使う。

1
Dimensions.get('window')

このメソッドを実行すると、横幅・高さ・倍率と3つの画面情報を取得できるので、ES6で導入された展開構文を使用して各値を取得する。

1
const { width, height, scale } = Dimensions.get('window');

サンプルコード

取得した画面情報を表示するデモを用意した。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from 'react';
import { View, Text, Dimensions } from 'react-native';
 
export default class App extends Component {
  render() {
    const { width, height, scale } = Dimensions.get('window');
 
    return (
      <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
      }}>
        <Text>{"幅: " + width}</Text>
        <Text>{"高さ: " + height}</Text>
        <Text>{"倍率: " + scale}</Text>
      </View>
    );
  }
}

このアプリを実行すると、デバイスの画面情報が以下のように表示される。