React Native flexプロパティ、段組配置、固定要素配置方法

#Style プロパティについて

CSSライクなプロパティ群ではありますが、CSSとは異なる場合もあります。

- flex:number　という記述
- position:'fixed'がない


などなど。
そこで、flexプロパティを解説するとともに、段組や固定要素の配置方法を書いていきたいと思います。

#flexプロパティについて
サンプルコードなどをみているとflex:1という記述がよく見受けられます。
flexプロパティは画面上に対する要素のflexDirection方向の大きさの比率となります。

```js:
import {StyleSheet} from 'react-native';

const style = StyleSheet.create({
  container:{
    marginTop:20,
    flex:1,
    //flexDirection:'column' ##defaultValue
  }
});
```

上記の場合に、画面上にflex:1の要素を追加していくと挙動は下記のようになります。

<img width="200" alt="flex.gif" src="https://qiita-image-store.s3.amazonaws.com/0/121851/ff28892f-9165-f301-248f-6c6b4808e271.gif" >

１つしか要素がないときは、画面目一杯に要素が広がります。
２つ以上の要素があるときは、要素の大きさは均等割になります。これは追加される要素のflexの値が等しいためです。

続いて、

- 最初はflex:1
- 次はflex:2
- 次はflex:3
- 次は・・・・

というように要素を追加していくと挙動は下記のようになります。


<img width="200" alt="flex.gif" src="https://qiita-image-store.s3.amazonaws.com/0/121851/22c87e92-1cee-e303-d54a-374a3c5858fc.gif" >

すると次は均等割ではなくなります。これは２つ要素がある場合は、1:2の比率で、３つ要素がある場合は1:2:3の比率で・・・といった具合に表示されているためです。

```js:
flexDirection:'row'
```

の場合の挙動は下記のようになります。この時も最初のgifアニメーションと同様にflex:1の要素を追加しています。

<img width="200" alt="flex.gif" src="https://qiita-image-store.s3.amazonaws.com/0/121851/8159381f-021e-0056-c72b-4118f3a32ea9.gif" >

以上のようにflexプロパティはflexDirectionに対する比率を決めるプロパティです。
flexプロパティには小数も使用することができますが、基本的な仕様は同じです。


#flexを利用した配置方法でヘッダー、フッター、サイドバーを置く

flexを利用した配置方法を使うことで、段組的に配置させることができます。
具体的には

<img width="200" alt="flex.gif" src="https://qiita-image-store.s3.amazonaws.com/0/121851/8184aad2-8105-127f-fd4b-4f49fb6eb36f.gif" >


```html:
    <View style={{flex:1}}>

        {/*ヘッダー（赤）*/}
        <View style={[{flex:0.3},header]}>
          <Text style={textStyle}>
            This is Header
          </Text>
        </View>

        {/*メインコンテンツ*/}
        <View style={{flex:2, flexDirection:'row'}}>
          
　　　　　　　　　　　　　　　　　　　　{/*スクロール領域（白）*/}
          <View style={{flex:5}}>
            <ListView
              dataSource={this.state.dataSource}
              renderRow={
                rowData =>
                  (<Text style={{marginLeft:20}}>
                    {rowData.message}
                  </Text>)
              }
            />
          </View>

          {/*サイドエリア（紫）*/}
          <View style={[{flex:1},side]}>
            <Text style={textStyle}>
              This is sidebar
            </Text>
          </View>

        </View>

        {/*フッター（青緑）*/}
        <View style={[{flex:0.5},footer]}>
            <Text style={textStyle}>This is Footer</Text>
        </View>

      </View>
```
flex関係のプロパティは外出しして書いています。
この場合は、
ヘッダー：メインコンテンツ：フッターのflexプロパティの値は 0.3:2:0.5 なのでこの比率が縦方向長さの比率となります。

続いて、メインコンテンツではflexDirection:'row'が指定されているため、メインコンテンツ内のflexプロパティの比率は横方向の比率となります。よって、メインコンテンツは横方向に
スクロール領域：サイドバー　＝　５：１　となります。
　　
このようにしてflexプロパティを利用することで比率で配置することができます。

#固定配置について

React Nativeでは、positionプロパティのプロパティ値は'absolute'と'relative'しか扱うことができず、'fixed'を扱うことができません。
しかし、どれだけ画面上におおきな要素を表示させてもスクロールできない仕様のため、固定要素の表示は簡単に行えます。
スクロールをさせるためにはScrollViewコンポーネントかListViewコンポーネントを使います。

```js:
      <View style={{flex:1}}>
          <View style={{
              width:100,
              height:100,
              margin:20,
              top:10,
              backgroundColor:'blue',
              position:'absolute'
            }} />
          <ScrollView>
            {this._renderBox()}
          </ScrollView>
          <View style={{
              width:100,
              height:100,
              margin:20,
              backgroundColor:'red',
              position:'absolute',
              top:300
            }} />
      </View>
```

<img width="200" alt="flex.gif" src="https://qiita-image-store.s3.amazonaws.com/0/121851/6ee39a03-5d1b-0428-04be-e56d510dd894.gif" >

この画像では黒い四角があるレイヤーがScrollViewを実装した領域。赤い四角と青い四角がスクロールを実装していないコンポーネントです。
赤と青の四角のようにスクロールを実装しないでスクロール可能領域上に配置することで固定要素を実現できます。


以上です。
間違い等ございましたらご指摘頂けますと幸いです。