react nativeで一人前のiOSアプリ開発者を目指す 第４回 flexを使いこなす！

こんにちは、個別指導塾コミット塾長、AWESOME開発担当の船津です。

今回はreactではまりがちなflexの設定についてお話します。
基本的にcssでのflexbox設定と同じなので、ここで覚えておくとwebアプリでも役に立つかもしれません。
今回はこちらのサイトも参考にさせていただきました。

作るもの

index.ios.js アプリの登録を行います
Layout.js　viewを書いていきます
style.js スタイルをこちらに記述して外部化します

完成図がこちらになります。

flexを使うと画面を比率で分割してレイアウトを作成することができます。
例えばleftColumn:{flex:1},rightColumn:{flex:2}のように指定すると、よくあるブログサイトのような、左カラム33%、右カラム66%のレイアウトを簡単に作成することが出来ます。cssでもそうですが、もうfloatで操作する時代ではないんですね。

今回はまずcontainerで全体を囲みます。このとき、flex:1としておくと、container要素しか存在しないので画面全体に対して100%、つまり画面全体にcontainerが広がってくれます。その後にtopBlock,botomBlockと分けてレイアウトを作っていきます。

• 1,2が属するleftColと3を2:5に分割
• 1,2が属するleftColにflexDirection: ‘column’を指定して縦に並ぶように設定
• 4,5が属するbottomLeftと6,7が属するbottomRightを2:1に分割
• 6,7が属するbottomRightにflexDirection: ‘column’を指定して縦に並ぶように設定

それではファイルを１つずつ見ていきましょう。

index.ios.js

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

var Layout = require('./Layout')

AppRegistry.registerComponent('Layout', () => Layout);

Layout.jsで外枠を作っていきます。

import React, { Component } from 'react';
import {
  Text,
  View
} from 'react-native';
 
var styles = require('./style');
class Layout extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={{backgroundColor:'white'}}>
          ここからtopBlock
        </Text>
        <View style={styles.topBlock}>
          <View style={styles.leftCol}>
            <View style={ [styles.cellOne, styles.base]}>
              <Text>
                1
              </Text>
            </View>
            <View style={ [styles.cellTwo, styles.base]}>
              <Text>
                2
              </Text>
            </View>
          </View>
          <View style={[styles.cellThree, styles.base]}>
            <Text>
              3
            </Text>
          </View>
        </View>
        <Text style={{backgroundColor:'white'}}>
          ここからbottomBlock
        </Text>
        <View style={styles.bottomBlock}>
          <View style={styles.bottomLeft}>
            <View style={[styles.cellFour, styles.base]}>
              <Text>
                4
              </Text>
            </View>
            <View style={[styles.cellFive, styles.base]}>
              <Text>
                5
              </Text>
            </View>
          </View>
          <View style={styles.bottomRight}>
            <View style={[styles.cellSix, styles.base]}>
              <Text>
                6
              </Text>
            </View>
            <View style={[styles.cellSeven, styles.base]}>
              <Text>
                7
              </Text>
            </View>
          </View>
        </View>
      </View>
    );
  }
}
 
module.exports = Layout;

最後にstyle.js

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


var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#95c13a',
    flexDirection: 'column',
    top: 30 ,
    left: 0,
    bottom: 0,
  },
  base: {
    borderColor:'#000',
    borderWidth: 5,
  },
  topBlock: {
    flexDirection: 'row',
    flex: 1
  },
  leftCol: {
    flex: 2
  },
  bottomBlock: {
    flex: 2,
    flexDirection: 'row',
  },
  bottomRight: {
    flex: 2,
    flexDirection: 'column',
  },
  cellOne: {
    flex: 1,
    borderBottomWidth: 5,
  },
  cellTwo: {
    flex: 3,
  },
  cellThree: {
    backgroundColor: '#ff0000',
    flex: 5,
  },
  cellFour: {
    flex:3,
    backgroundColor: '#0000ff'
  },
  cellFive: {
    flex: 6,
    backgroundColor: '#ff00b8'
  },
  cellSix: {
    flex: 1,
    backgroundColor: '#00ffe8'
  },
  cellSeven: {
    flex:1,
    backgroundColor: '#ffff00',
  }
});

module.exports = styles;

flexに指定する値は比率を表現できていれば良いので、1:2の比率にしたい場合は、0.5:1, 1000:2000などと記述しても問題ありません。わかりやすいように整数の比にするのがおすすめですが…

これでレイアウトも簡単に作れますね。
次回はネイティブのAPIを触ってみます。