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

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

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

作るもの

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

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

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

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

Instagram Feed

Load More

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →