ローディング中

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

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

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

作るもの

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

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

スクリーンショット 2016-07-05 12.26.18

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’を指定して縦に並ぶように設定

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

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を触ってみます。

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.