2. 程式人生 > >React Native佈局詳細指南

React Native佈局詳細指南

阿新 • • 發佈：2019-01-08

本文出自《React Native學習筆記》系列文章。

一款好的APP離不了一個漂亮的佈局，本文章將向大家分享React Native中的佈局方式FlexBox。
在React Native中佈局採用的是FleBox(彈性框)進行佈局。

FlexBox提供了在不同尺寸裝置上都能保持一致的佈局方式。FlexBox是CSS3彈性框佈局規範，目前還處於最終徵求意見稿 (Last Call Working Draft)階段，並不是所有的瀏覽器都支援Flexbox。但大家在做React Native開發時大可不必擔心FlexBox的相容性問題，因為既然React Native選擇用FlexBox佈局，那麼React Native對FlexBox的支援自然會做的很好。

寬和高

在學習FlexBox之前首先要清楚一個概念“寬和高”。一個元件的高度和寬度決定了它在螢幕上的尺寸，也就是大小。

畫素無關

在React Native中尺寸是沒有單位的，它代表了裝置獨立畫素。

<View style={ {width:100,height:100,margin:40,backgroundColor:'gray'}}>
        <Text style={ {fontSize:16,margin:20}}>尺寸</Text>
</View>

上述程式碼，執行在Android上時，View的長和寬被解釋成：100dp 100dp單位是dp，字型被解釋成16sp 單位是sp，執行在iOS上時尺寸單位被解釋稱了pt，這些單位確保了佈局在任何不同dpi的手機螢幕上顯示不會發生改變；

和而不同

值得一提的是，React Native中的FlexBox 和Web CSSS上FlexBox工作方式是一樣的。但有些地方還是有些出入的，如：

React Native中的FlexBox 和Web CSSS上FlexBox的不同之處

  • flexDirection: React Native中預設為flexDirection:'column'，在Web CSS中預設為flex-direction:'row'
  • alignItems: React Native中預設為alignItems:'stretch'，在Web CSS中預設align-items:'flex-start'
  • flex: 相比Web CSS的flex接受多引數，如:flex: 2 2 10%;，但在 React Native中flex只接受一個引數
  • 不支援屬性：align-content，flex-basis，order，flex-basis，flex-flow，flex-grow，flex-shrink

以上是React Native中的FlexBox 和Web CSSS上FlexBox的不同之處，記住這幾點，你可以像在Web CSSS上使用FlexBox一樣，在React Native中使用FlexBox。

Layout Props

Flex in React Native

以下屬性是React Native所支援的Flex屬性。

父檢視屬性(容器屬性)：

  • flexDirection enum(‘row’, ‘column’,‘row-reverse’,‘column-reverse’)
  • flexWrap enum(‘wrap’, ‘nowrap’)
  • justifyContent enum(‘flex-start’, ‘flex-end’, ‘center’, ‘space-between’, ‘space-around’)
  • alignItems enum(‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)

主軸和側軸(橫軸和豎軸)

在學習上述屬性之前，讓我們先了解一個概念：主軸和側軸
主軸和側軸
主軸即水平方向的軸線，可以理解成橫軸，側軸垂直於主軸，可以理解為豎軸。

flexDirection

flexDirection enum('row', 'column','row-reverse','column-reverse')
flexDirection屬性定義了父檢視中的子元素沿橫軸或側軸方片的排列方式。

  • row: 從左向右依次排列
  • row-reverse: 從右向左依次排列
  • column(default): 預設的排列方式，從上向下排列
  • column-reverse: 從下向上排列

Usage:

<View style={ {flexDirection:'row-reverse',backgroundColor:"darkgray",marginTop:20}}>
    <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>1</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>2</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>3</Text>
  </View>
  <View style={ {width:40,height:40,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>4</Text>
  </View>
  </View>

flexDirection

flexWrap

flexWrap enum('wrap', 'nowrap')
flexWrap屬性定義了子元素在父檢視內是否允許多行排列，預設為nowrap。

  • nowrap flex的元素只排列在一行上，可能導致溢位。
  • wrap flex的元素在一行排列不下時，就進行多行排列。

Usage:

<View 		 style={ {flexWrap:'wrap',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

flexWrap

justifyContent

justifyContent enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
justifyContent屬性定義了瀏覽器如何分配順著父容器主軸的彈性（flex）元素之間及其周圍的空間，預設為flex-start。

  • flex-start(default) 從行首開始排列。每行第一個彈性元素與行首對齊，同時所有後續的彈性元素與前一個對齊。
  • flex-end 從行尾開始排列。每行最後一個彈性元素與行尾對齊，其他元素將與後一個對齊。
  • center 伸縮元素向每行中點排列。每行第一個元素到行首的距離將與每行最後一個元素到行尾的距離相同。
  • space-between 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最後一個元素與行尾對齊。
  • space-around 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最後一個元素到行尾的距離將會是相鄰元素之間距離的一半。

Usage:

<View 		 style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

justifyContent

alignItems

alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
alignItems屬性以與justify-content相同的方式在側軸方向上將當前行上的彈性元素對齊，預設為stretch。

  • flex-start 元素向側軸起點對齊。
  • flex-end 元素向側軸終點對齊。
  • center 元素在側軸居中。如果元素在側軸上的高度高於其容器，那麼在兩個方向上溢位距離相同。
  • stretch 彈性元素被在側軸方向被拉伸到與容器相同的高度或寬度。

Usage:

<View 		 style={ {justifyContent:'center',flexDirection:'row',backgroundColor:"darkgray",marginTop:20}}>
···
</View>

alignItems

子檢視屬性

  • alignSelf enum(‘auto’, ‘flex-start’, ‘flex-end’, ‘center’, ‘stretch’)
  • flex number

alignSelf

alignSelf enum('auto', 'flex-start', 'flex-end', 'center', 'stretch')
alignSelf屬性以屬性定義了flex容器內被選中專案的對齊方式。注意：alignSelf 屬性可重寫靈活容器的 alignItems 屬性。

  • auto(default) 元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 “stretch”。
  • stretch 元素被拉伸以適應容器。
  • center 元素位於容器的中心。
  • flex-start 元素位於容器的開頭。
  • flex-end 元素位於容器的結尾。

Usage:

<View style={ {alignSelf:'baseline',width:60,height:	20,backgroundColor:"darkcyan",margin:5}}>
   <Text style={ {fontSize:16}}>1</Text>
</View>
...

alignItems

flex

flex number
flex 屬性定義了一個可伸縮元素的能力，預設為0。

Usage:

<View style={ {flexDirection:'row',height:40, backgroundColor:"darkgray",marginTop:20}}>
  <View style={ {flex:1,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:1</Text>
  </View>
  <View style={ {flex:2,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:2</Text>
  </View>
  <View style={ {flex:3,backgroundColor:"darkcyan",margin:5}}>
    <Text style={ {fontSize:16}}>flex:3</Text>
  </View>          
</View>

flex

其他佈局 in React Native

以下屬性是React Native所支援的除Flex以外的其它佈局屬性。

檢視邊框

  • borderBottomWidth number 底部邊框寬度
  • borderLeftWidth number 左邊框寬度
  • borderRightWidth number 右邊框寬度
  • borderTopWidth number 頂部邊框寬度
  • borderWidth number 邊框寬度
  • border<Bottom|Left|Right|Top>Color 個方向邊框的顏色
  • borderColor 邊框顏色

尺寸

  • width number
  • height number

外邊距

  • margin number 外邊距
  • marginBottom number 下外邊距
  • marginHorizontal number 左右外邊距
  • marginLeft number 左外邊距
  • marginRight number 右外邊距
  • marginTop number 上外邊距
  • marginVertical number 上下外邊距

內邊距

  • padding number 內邊距
  • paddingBottom number 下內邊距
  • paddingHorizontal number 左右內邊距
  • paddingLeft number 做內邊距
  • paddingRight number 右內邊距
  • paddingTop number 上內邊距
  • paddingVertical number 上下內邊距

邊緣

  • left number 屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
  • right number 屬性規定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移
  • top number 屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
  • bottom number 屬性規定元素的底部邊緣。該屬性定義了一個定位元素的下外邊距邊界與其包含塊下邊界之間的偏移。

定位(position)

position enum(‘absolute’, ‘relative’)屬性設定元素的定位方式，為將要定位的元素定義定位規則。

  • absolute：生成絕對定位的元素，元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。
  • relative：生成相對定位的元素，相對於其正常位置進行定位。因此，“left:20” 會向元素的 LEFT 位置新增 20 畫素。

參考

A Complete Guide to Flexbox
Using CSS flexible boxes
Layout with Flexbox
Layout Props

About

本文出自《React Native學習筆記》系列文章。
瞭解更多，可以關注我的GitHub
@https://crazycodeboy.github.io/

推薦閱讀

相關推薦

React Native佈局詳細指南

本文出自《React Native學習筆記》系列文章。 一款好的APP離不了一個漂亮的佈局，本文章將向大家分享React Native中的佈局方式FlexBox。 在React Native中佈局採用的是FleBox(彈性框)進行佈局。 FlexBox提供了在不同尺寸裝置上都能保持一

React Native佈局詳解

一、Flexbox 佈局 Flex有兩個屬性：Container  和 Item flex是Flexible Box的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性。採用flex佈局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為fl

React Native iOS詳細打包步驟（2018.04更新）

1.在自己專案的ios資料夾下新建一個資料夾取名bundle（ps:ios資料夾和node_modules資料夾在同一級目錄下，這個bundle資料夾名稱隨意取，後面要用到，但是記得在相應地方改一下就好了） 2.為了方便，將打包命令寫到專案package.json檔案裡，

[深入剖析React Native]熱更新之react-native-pushy使用指南(IOS)

本文使用RN版本：0.33.0 準備工作 首先你應該有一個基於React Native開發的應用，我們把具有package.json的目錄叫做你的”應用根目錄”。 如果你還沒有初始化應用，請參閱開始使用React Native。 所以我們也假

React Native佈局實踐：開發京東客戶端首頁（四）——首頁功能按鈕及控制元件封裝

從我寫第一篇React Native文章以來，我們幾乎是把所有的程式碼都放在一個js檔案中實現的，隨著工程複雜度的增加，各種自定義控制元件的程式碼就和業務邏輯程式碼耦合嚴重，這篇文章就來解決這一問題，讓我們一起來學習控制元件封裝的方法。1.明確需求首頁功能按鈕由一個圖片、一行

React Native Mac配置指南

步驟 按照React Native官網步驟一步步安裝，記錄如下 1.安裝Homebrew （按照官網 在命令終端輸入命令即可） 2.安裝nvm（node version manager），即Node.js的安裝下載器。 （1）命令終端->git clone https

[深入剖析React Native]熱更新之react-native-pushy使用指南(Android)

本文使用RN版本：0.33.0 準備工作 首先你應該有一個基於React Native開發的應用，我們把具有package.json的目錄叫做你的”應用根目錄”。 如果你還沒有初始化應用，請參閱開始使用React Native。 所以我們也假

React Native佈局水平和豎直折行

在react 佈局中如果填充的view過多時，view會不會自動折行呢？ 我們在view中添加了12個Text，只顯示了5個，其他的view沒有顯示出來，說明view沒有自動換行功能 如何使view

React Native 佈局

這篇部落格稍微講解下React-Native中的佈局。比較簡單。RN的而佈局是用css中的flexbox佈局，所以佈局起來與android傳統的佈局樣式有點像。接下來就結合圖片一起來看看。 常用屬性講解 RN的flexbox主要有以下幾個屬性alignItems，alignSelf，flex，flexDir

React Native佈局篇

1 基礎類view的樣式引數分類 基礎類view的樣式引數主要是負責UI佈局，進行UI佈局有多種技術方案，各自的思想和應用場景也不盡相同：有最常見的座標系佈局［對應下文1.4］、有類似IOS中constraint佈局[對應下文1.1~1.2]、有web中使用的

react-native佈局和樣式設定

react-native學習交流QQ群：806870562const styles = StyleSheet.create({ // 樣式名稱 nameStyle: { // 方向：預設縱向column，橫向row flexDirection: colu

React Native 佈局詳解

一、概述一款優秀的APP離不開一個漂亮的UI，一個漂亮的UI又是由各種佈局組合而成，因此APP的開發過程中，佈局的實現是很重要的一部分。在React Native(以下簡稱RN)開發中，RN為我們提供了FlexBox(彈性框)進行佈局，FlexBox功能十分強大，它提供了在不

React Native 效能優化指南【全網最全，值得收藏】

2020 年談 React Native，在日新月異的前端圈，可能算比較另類了。文章動筆之前我也猶豫過，但是想到寫技術文章又不是趕時髦，啥新潮寫啥，所以還是動筆寫了這篇 React Native 效能優化的文章。 本文談到的 React Native 效能優化，還沒到修改 React Native 原始碼

【獨家】React Native 版本升級指南

前言 React Native 作為一款跨端框架，有一個最讓人頭疼的問題，那就是版本更新。尤其是遇到大版本更新，JavaScript、iOS 和 Android 三端的配置構建檔案都有非常大的變動，有時候三者的配置檔案又互相耦合在一起，往往牽一髮而動全身。 本文假定 React Native 升級的主導者

給所有開發者的React Native詳細入門指南

目錄 前言 從最開始開始接觸 React Native（以下簡稱 RN），到寫下第一篇博文後，就再也沒有寫過相關的文章了，隨著微信小程式的正式釋出，其實也又一次將一個概念推到公眾面前，那就是全棧式前端，這是個什麼概念呢？大概意思就是一個人可以同時寫 Android、i

史上最詳細Windows版本搭建安裝React Native環境配置

gin windows系統 adl 搭建環境 tools 想要 變量 rep home 說在前面的話: 感謝同事金曉冰傾情奉獻本環境搭建教程 之前我們已經講解了React Native的OS X系統的環境搭建以及配置，鑒於各大群裏有很多人反應在Windows環境搭建出現各種

React JS和React-Native學習指南

cno example part div roman javascrip add pull tree 自己在學習React-Native過程中整理的一份學習指南，包含 教程、開源app和資源網站等，還在不斷更新中。歡迎pull requests！ React-Native學

React Native 專案整合 CodePush 全然指南

作者 | 錢凱 杏仁移動開發project師，前嵌入式project師。關注大前端技術新潮流。 本文使用的環境： [email protected] React [email protected]

(簡單詳細)React Native獲取手機當前經緯度，(通過高德地圖介面)獲取當前地理位置

要獲取手機的當前地理位置，首先要獲得經緯度，然後通過逆地理編碼獲得位置資訊 地理編碼/逆地理編碼 API 是通過 HTTP/HTTPS 協議訪問遠端服務的介面，提供結構化地址與經緯度之間的相互轉化的能力。 1.AndroidManifest.xml加入許可權 <uses-per

最詳細React Native環境配置及專案初始化(2018-10-14)

注意配環境一定要全程使用穩定VPN工具，否則會浪費大量時間！！！相信我 一.截止到專案初始化之前也就是執行這條命令之前都按官網的方法就可以 https://reactnative.cn/docs/getting-started.html react-native ini