從web移動端布局到react native布局

標籤：

在web移動端通常會有這樣的需求，實現上中下三欄布局（上下導覽列位置固定，中間部分內容超出可滾動），如所示：

實現方法如下：

HTML結構：

<div class=‘container‘>    <div class=‘header‘></div>    <div class=‘content‘></div>    <div class=‘footer‘></div></div>

 

首先可以利用fixed或者absolute定位，實現簡單。

現在介紹另外一種方法——利用-wekkit-box/flex，實現上下兩欄固定高度，中間高度自適應的布局。

CSS代碼如下：

使用-webkit-box：

.container{    width: 100%;    height: 100%;    display: -webkit-box;    -webkit-box-orient: vertical;}.header{    height: 200px;    background-color: red;}.content{    -webkit-box-flex: 1;    overflow: auto;}.footer{    height: 200px;    background-color: blue;    }

 

使用flex：

.container{    width: 100%;    height: 100%;    display: flex;    flex-direction: column;}.header{    height: 200px;    background-color: red;}.content{    flex: 1;    overflow: auto;}.footer{    height: 200px;    background-color: blue;}

實際應用中應該將以上兩种放在一起寫，這裡只是為了下文而將新舊兩種寫法分開。 

 

在react native中，實現樣式只是CSS中的一個小子集，其中就使用flex的布局

實現的思路和上面也是相同的，不過由於react native中對於View組件而言，overflow屬性只有‘visible‘和‘hidden‘兩個值（ 預設是‘hidden‘ ），並沒有可滾動的屬性，因此中間內容部分需要使用"ScrollView"滾動容器

組件渲染：

render(){  return(    <View style={styles.container}>        <View style={styles.header}></View>        <ScrollView style={styles.content}>        </ScrollView>        <View style={styles.footer}></View>    </View>  );}        

樣式：

const styles = StyleSheet.create({  container: {  　　flex: 1,
　　　flexDirection: ‘column‘  },  header: {      height: 100,      backgroundColor: ‘red‘,  },  content: {      flex: 1,  },  footer: {      height: 100,      backgroundColor: ‘blue‘,  }});

 效果：

 

react native最基礎的布局就實現了。

由於react native中布局方法基本就這兩種： flex和absolute布局，掌握了flex布局，也就基本搞定了。

 

從web移動端布局到react native布局