從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佈局，也就基本搞定了。