# Layout 概念

## Mobile 佈局遇到的問題

* [Support Different Screen Sizes](https://developer.android.com/training/multiscreen/screensizes.html)
* [Support Different Pixel Densities](https://developer.android.com/training/multiscreen/screendensities.html)

![](https://3741471281-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LfNCl0-2Tz7pwP50Mpi%2F-LfNCnnzv40pXJQqOOjK%2F-LfNCowxeVR3-jUR-Her%2F%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7%202018-06-06%20%E4%B8%8B%E5%8D%8810.02.57.png?generation=1558405665823080\&alt=media)隨著手機螢幕裝置的進步，我們可以在同樣螢幕大小底下，有著越來越來高的解析度，隨之而來的是PixelDensity(dp , device independent pixel ) 越來越高，然後總格數越來越少。除了圖片外，其他Layout 上盡量避免寫定格狀數值，使`percentage` 或者是`flex` 比例的方式

## Layout 原則

* 若要全螢幕或是item要跟螢幕等寬或高，盡量避免寫定width, height 的單位值，而是利用percentage 或 flex 的方式

```javascript
const styles = StyleSheet.create({
    fullscreen: {
        width: 640,
        height: 960
    }
})
```

* 除非動態的style值，盡量避免在 style 中放置未經styleSheet 建立的物件

```javascript
render(){
  return (
    <View style={ { width: 600, height: 600 } }>
  )
}
```

* 將版面與顏色＋字型大小分離，方便重複利用

```javascript
const styles = StyleSheet.create({
    title: {
        fontSize: 22,
        color: 'white'
    },
    subTitle: {
        color: 'red'
    },
    text: {
        marginHorizontal: 20,
    }
})

...

render(){
    return (
        <View>
            <Text style={[styles.title, styles.text]}>{'Hello world'}></Text>
            <Text style={[styles.subTitle, styles.text]}>{'my name is react-native'}></Text>
        </View>
    )
}
```

## 常用Flexbox 設定值

* Primary and secondary axis
  * Column 的主軸為Vertical 所以設定`justify-content: 'center'`會是垂直置中
  * Row 的主軸為Horizontal 所以設定`justify-content: 'center'`會是水平置中
* `flexDirection: 'column'`
* `flexDirection: 'row'`
* `justifyContent: 'flex-start|center|flex-end'`
* `alignItems: 'flex-start|center|flex-end'`
* `alignSelf: 'flex-start|center|flex-end'`
* `flex: 1`

## 把畫面撐開與 parent 同高

ReactNative 預設Flexbox的direction 為 `column`

| parent 的 flexDirection 為 column | parent 的 flexDirection 為 row時 |
| ------------------------------- | ----------------------------- |
| child 設置flex: 1 把高度撐得parent同高   | flex: 1 把寬度撐得與parent 同寬       |