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

?

轉載于:https://www.cnblogs.com/zhenwen/p/5828035.html

總結

以上是生活随笔為你收集整理的从web移动端布局到react native布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。