LoginSignup
60

More than 5 years have passed since last update.

posted at

React Nativeのデザイン - Stylesheet/Flexbox (part2)

昨日の続きでFlexboxを説明します。flex, flexDirection, flexWrapは昨日のエントリを参照してください。

Flexbox

下記のコンポーネントを前提とします。


var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

justifyContentプロパティ

親コンポーント内の子コンポーネントの配置を決めます。

flex-start(デフォルト)

子コンポーネントを先頭から配置します。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'blue',
    justifyContent: 'flex-start' //追加
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

スクリーンショット 2015-12-05 14.14.46.png

flex-end

子コンポーネントを後ろから配置します。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'flex-end'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

スクリーンショット 2015-12-05 14.17.13.png

center

子コンポーネントを真ん中に配置します。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

スクリーンショット 2015-12-05 14.19.27.png

space-between

子コンポーネントを先頭と最後に配置し、均等なスペースを他の子コンポーネントの間に挟みます。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'space-between'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

スクリーンショット 2015-12-05 14.20.20.png

space-around

各子コンポーネントの均等なスペースを先頭の前、最後の後に加えた配置です。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent:  'space-around',
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

スクリーンショット 2015-12-05 14.21.28.png

alignItems

stretch(デフォルト)

子コンポーネントを伸ばして配置します。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'stretch'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

スクリーンショット 2015-12-05 14.31.00.png

flex-start

子コンポーネントを先頭から配置します。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'flex-start'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

スクリーンショット 2015-12-05 14.27.54.png

flex-end

子コンポーネントを後ろに配置します。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'flex-end'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

スクリーンショット 2015-12-05 14.28.58.png

center

子コンポーネントを真ん中に配置します。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center'
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

スクリーンショット 2015-12-05 14.29.44.png

alignSelf

alignSelfはalignItemsで配置したものを子コンポーネント側で上書きします。
したがって、alignItemsと同じ値を設定します。

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'flex-start', 
  },
  item1: {
    backgroundColor: 'gray',
    padding: 20,
    alignSelf: 'flex-end' //追加
  },
  item2: {
    backgroundColor: 'orange',
    padding: 20
  },
  item3: {
    backgroundColor: 'pink',
    padding: 20
  }
});

このように全体をalignItems: 'flex-start'で定義したものをItem1のみflex-endにしたい場合に`alignSelf: 'flex-end'をItem1に指定します。

スクリーンショット 2015-12-05 14.34.26.png

以上、React Nativeのスタイルシートで悩むポイントのFlexboxについて動きを見てきました。
明日は、開発していく上で必要不可欠なFluxアーキテクチャを見ていきます。

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
What you can do with signing up
60