LoginSignup
27

More than 5 years have passed since last update.

ReactNativeにおけるレイアウトの基礎(Flexbox)

Last updated at Posted at 2017-06-16

ReactNativeのtutorialの内容を図解で理解するためのメモ。
https://facebook.github.io/react-native/docs/flexbox.html

flexDirextion

ポイント

  • 内包するコンポーネントが並ぶ方向
  • プライマリ軸(primary axis)

イメージとしては下記の図を参照。

axis.png

justifyContent

ポイント

  • primary axisにおけるレイアウト
  • 内包コンポーネント間のレイアウトを定義するspace-aroundspace-betweenを指定できる

alignItems

ポイント

  • secondary axisにおけるレイアウト
  • 内包するコンポーネント群の列(または行)をどの位置に配置するかを指定する

サンプル

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

export default class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-around',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

設定まとめ

表にまとめると下記のようなレイアウト

プロパティ 説明
flexDirection column primary axisは縦方向。内包コンポーネントが縦に並ぶ。
justifyContent space-around 内包コンポーネントの周囲のスペースを均一にする。
alignItems center 横方向において中央揃え

実際の画面

結果的に下記画像のようなレイアウトになる。
図1.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
27