React Nativeの公式ドキュメントを和訳してみる 6 - Height and Width

注意

当記事はReact Native 0.51の公式ドキュメントの独自和訳です。間違いなどあればご指摘ください。

バージョン0.51のドキュメントに準拠します。

参照リンク先は基本的に元サイトです。リンク先サイトを和訳したらそのページに差し替えます。

本家サイトではシミュレータがあり、コードを編集しながら実行でき便利です。

Facebook社に無断なので怒られたら消します。

元サイト
facebook.github.io

コンポーネントの高さと幅によってスクリーン上で描画される大きさが決まります。

固定次元 (Fixed Dimensions)

コンポーネントの次元を設定する一番単純な方法は、styleに固定値でwidthとheightを追加する事です。React Nativeのすべての次元は単位がなく、独立した階層のピクセルで表されます。

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

export default class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

// Create React Native App使ってたらこの行はとばす
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

この方法での次元の設定は、普通スクリーンサイズに関わらずコンポーネントを常に正確に同じサイズで描画する際に使われます。

フレックス次元 (Flex Dimensions)

コンポーネントのstyleでflexを使うと、描画可能なスペースを基準にコンポーネントが動的に拡大・縮小します。通常はflex: 1を使います。これは、コンポーネントを描画域全体に広げます。同じ親コンポーネントを持つコンポーネントが複数ある場合、それぞれのコンポーネントは等幅で分割されます。flexの値が大きくなるほど、兄弟要素と比較してコンポーネントの占める場所の割合は大きくなります。

親コンポーネントのサイズが0でなければ、コンポーネントは描画域全体に広がります。もし親コンポーネントに固定値のwidth,heightやflexが設定されていない場合、親コンポーネントは0次元となりflexがついた子要素は表示されません。

export default class FlexDimensionsBasics extends Component {
  render() {
    return (
      // 親Viewから`flex: 1` を外すとどうなるでしょう？
      // 親要素は次元を持たなくなるため、子要素は広がることができません。
      //  `flex: 1`の代わりに`height: 300`を追加するとどうなるでしょうか?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
}

// Create React Native App使ってたらこの行は飛ばす
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

コンポーネントのサイズを調整できるようになったら、次のステップはスクリーン上でどのようにレイアウトするかを学びましょう。