ローディング中

ホームページ・デザイン制作のAWESOME | 加古川・姫路・明石

react nativeで一人前のiOSアプリ開発者を目指す 第４回 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’を指定して縦に並ぶように設定

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

index.ios.js

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';
 
var Layout = require('./Layout')
 
AppRegistry.registerComponent('Layout', () => Layout);

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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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

SyntaxHighlighterについて
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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を触ってみます。

More from my site

関連記事

JS/Swift

react-native開発用IDEのDECOを使ってみた

JS/Swift

【Swift】webviewを使ってサイトを表示するだけのアプリを作る

JS/Swift

react-nativeでiOSアプリ開発　第15回　react-native drawerもscrollable-tab-viewもreact-native-router-fluxも使いたかった

最新記事

WEB制作

台湾法人設立のお知らせ

コンテンツ制作/運用

YouTube動画作成に必要な機材や機能を徹底解説

SNS

クリエイタースタジオでInstagramを予約投稿しよう。

ホームページ・デザイン制作のご相談・ご依頼は

079-451-5881

CONTACT US
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 3E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.