React Native知識1-FlexBox 佈局內容

来源:http://www.cnblogs.com/wujy/archive/2016/09/05/5841685.html
-Advertisement-
Play Games

一：理論知識點 1:什麼是FlexBox佈局? 彈性盒模型（The Flexible Box Module）,又叫Flexbox，意為“彈性佈局”，旨在通過彈性的方式來對齊和分佈容器中內容的空間，使其能適應不同屏幕，為盒裝模型提供最大的靈活性。 Flex佈局主要思想是：讓容器有能力讓其子項目能夠改變 ...


一：理論知識點

1:什麼是FlexBox佈局?

彈性盒模型（The Flexible Box Module）,又叫Flexbox，意為“彈性佈局”，旨在通過彈性的方式來對齊和分佈容器中內容的空間，使其能適應不同屏幕，為盒裝模型提供最大的靈活性。

Flex佈局主要思想是：讓容器有能力讓其子項目能夠改變其寬度、高度（甚至是順序），以最佳方式填充可用空間；

2:Flex佈局基於flex-flow流

容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

項目預設沿主軸排列，單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

 

根據伸縮項目排列方式的不同，主軸和側軸方向也有所變化

3:在React中，Flexbox有6種容器屬性，6種項目屬性。而在React Native中，有4個容器屬性，2個項目屬性，分別是：

容器屬性：flexDirection   flexWrap   justifyContent  alignItems

項目屬性：flex  alignSelf

3.1: flexDirection容器屬性: `row | row-reverse | column | column-reverse`

該屬性決定主軸的方向（即項目的排列方向）。

row：主軸為水平方向，起點在左端。

row-reverse：主軸為水平方向，起點在右端。

column(預設值)：主軸為垂直方向，起點在上沿。

column-reverse：主軸為垂直方向，起點在下沿。

 

3.2:flexWrap容器屬性: `nowrap | wrap | wrap-reverse`

預設情況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

 

3.2.1 nowrap(預設值)：不換行

 

3.2.2 wrap：換行，第一行在上方

 

3.2.3 wrap-reverse：換行，第一行在下方。（和wrap相反）

 

3.3:justifyContent容器屬性:`flex-start | flex-end | center | space-between | space-around`

定義了伸縮項目在主軸線的對齊方式

flex-start(預設值)：伸縮項目向一行的起始位置靠齊。

flex-end：伸縮項目向一行的結束位置靠齊。

center：伸縮項目向一行的中間位置靠齊。

space-between：兩端對齊，項目之間的間隔都相等。

space-around：伸縮項目會平均地分佈在行里，兩端保留一半的空間。

 

3.4:alignItems容器屬性:`flex-start | flex-end | center | baseline | stretch`

定義項目在交叉軸上如何對齊，可以把其想像成側軸（垂直於主軸）的“對齊方式”。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊 。

center：交叉軸的中點對齊。

baseline：項目的第一行文字的基線對齊。

stretch（預設值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

 

3.5:flex項目屬性:

“flex-grow”、“flex-shrink”和“flex-basis”三個屬性的縮寫， 其中第二個和第三個參數（flex-shrink、flex-basis）是可選參數。預設值為“0 1 auto”。

寬度 ＝ 彈性寬度 * ( flexGrow / sum( flexGorw ) )

3.6:alignSelf項目屬性:

“auto | flex-start | flex-end | center | baseline | stretch”

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。

預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。

 

二：代碼實例：

1：簡單佈局

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class ReactNativeProject extends Component {
  render() {
    return (
      <View style={styles.container}>
      <View style={styles.viewItem1}>
      </View>
      <View style={styles.viewItem2}>
      </View>
      <View style={styles.viewItem3}>
      </View>
      <View style={{flex:2,backgroundColor:'#bbceee',flexDirection:'row'}}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  viewItem1:{
    flex:1,
    flexDirection:'row',
    height:50,
    backgroundColor:'#FF33CC'
  },
  viewItem2:{
    flex:1,
    flexDirection:'row',
    height:50,
    marginTop:15,
    backgroundColor:'#00FFFF'
  },
  viewItem3:{
    flex:1,
    flexDirection:'row',
    height:50,
    backgroundColor:'#CCBBFF'
  },
});

AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

效果圖：

說明：return返回只能是一個對象，所以在最外層包含的一個View,裡面放置四個View,並對它們進行佈局；

最後一個View的flex屬性讓它比起其它的權重要大，所以高度會是其它的對應倍數值，上面還分開兩種寫法，一種是在下麵用樣式屬性編寫，另一個是直接在佈局裡面寫樣式，註意它們的差別，建議分開寫；裡面四個子View我們都讓它以flexDirection為row方式進行排列；

2:佈局屬性運用：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class ReactNativeProject extends Component {
  render() {
    return (
      <View style={styles.container}>

      <View style={styles.viewItem1}>
          <View style={{flex:1,height:40,backgroundColor:'red'}}></View>
          <View style={{flex:1,height:40,backgroundColor:'blue',alignSelf:'center'}}></View>
          <View style={{flex:1,height:40,backgroundColor:'red',alignSelf:'flex-end'}}></View>
      </View>

      <View style={styles.viewItem2}>
          <View style={styles.viewItem2Child1}>
          </View>
          <View style={styles.viewItem2Child2}>
          </View>
      </View>

      <View style={styles.viewItem3}>
          <View style={styles.viewItem3Child1}>
          </View>
          <View style={styles.viewItem3Child2}>
          </View>
          <View style={styles.viewItem3Child3}>
          </View>
      </View>

      <View style={{flex:2,backgroundColor:'#bbceee',flexDirection:'row'}}>
          <View style={{flex:1,height:100,flexDirection:'row',justifyContent:'center',marginTop:30}}>
            <View style={{width:100,backgroundColor:'red'}}></View>
            <View style={{width:70,backgroundColor:'blue'}}></View>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  viewItem1:{
    flex:1,
    flexDirection:'row',
    height:50,
    backgroundColor:'#FF33CC'
  },
  viewItem2:{
    flex:1,
    flexDirection:'row',
    height:50,
    marginTop:15,
    backgroundColor:'#00FFFF',

    flexWrap:'wrap'
  },
  viewItem2Child1:
  {
    width:200,
    height:30,
    backgroundColor:'green'
  },
  viewItem2Child2:
  {
    width:200,
    height:30,
    backgroundColor:'red'
  },
  viewItem3:{
    flex:1,
    flexDirection:'row',
    height:50,
    backgroundColor:'#CCBBFF'
  },
  viewItem3Child1:{
    flex:1,
    backgroundColor:'#00ffbb'
  },
  viewItem3Child2:{
    flex:1,
    backgroundColor:'#aabbdd'
  },
  viewItem3Child3:
  {
    flex:1,
    backgroundColor:'#0000ff'
  }
});

AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

在實例1的基礎上，對其它屬性進一步運用；效果圖如下：

第一個View包含三個View,主要是實現針對alignSelf屬性的運用；

第二個View包含二個View,兩個View的寬度之合大於屏幕寬度，主要是實現針對flexWrap屬性的運用；

第三個View包含三個View,主要是針對flex的運用

第四個View包含有兩個View,主要是針對justifyContent跟屬性marginTop的運用；

三：其它知識點：

1：獲取當前屏幕的寬度、高度、解析度

import Dimensions from 'Dimensions';

var { width, height, scale } = Dimensions.get('window');

render() {
  return (
    <View>
      <Text>
        屏幕的寬度：{width + '\n'}
        屏幕的高度：{height + '\n'}
        屏幕的解析度：{scale + '\n'}
      </Text>
    </View>
  );
}

2：預設寬度

我們都知道塊級標簽如果不設置寬度，通常都是獨占一行的，在React Native中的組件中需要設置flexDirection：'row'，才能在同一行顯示，flex的元素如果不設置寬度，都會百分之百的占滿父容器。

3：水平、垂直居中

當alignItems、justifyContent傳center時與flexDirection的關係：

 

想理解這個很簡單，看我上班講的alignItems、justifyContent，心裡想著主軸和次軸就可以理解，justifyContent是主軸方向居中，而alignItems是次軸方向居中，flexDirection預設為column，所以誤區會認為alignItems為水平居中，justifyContent為垂直居中。

4:padding和margin

margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。在CSS中padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離，下麵這張是CSS的效果圖，只是名字不一樣（marginTop），原理都是一樣；

5：關於樣式

（1）普通內聯樣式:{{}},第一層｛｝是表達式，第二層｛｝是js對象；

                  <View style={{fontSize:40, width:80,}}> </View>

    （2）調用樣式表:{樣式類.屬性}

                  <View style={styles.container}></View>

    （3）樣式表和內聯樣式共存:{[]}

                  <View style={[styles.container, {fontSize:40, width:80}]}>

    （4）多個樣式表:{[樣式類1， 樣式類2]}

                  <View style={[styles.container, styles.color]}>

6：React Native樣式屬性列表

"alignItems",

"alignSelf",

"backfaceVisibility",

"backgroundColor",

"borderBottomColor",

"borderBottomLeftRadius",

"borderBottomRightRadius",

"borderBottomWidth",

"borderColor",

"borderLeftColor",

"borderLeftWidth",

"borderRadius",

"borderRightColor",

"borderRightWidth",

"borderStyle",

"borderTopColor",

"borderTopLeftRadius",

"borderTopRightRadius",

"borderTopWidth",

"borderWidth",

"bottom",

"color",

"flex",

"flexDirection",

"flexWrap",

"fontFamily",

"fontSize",

"fontStyle",

"fontWeight",

"height",

"justifyContent",

"left",

"letterSpacing",

"lineHeight",

"margin",

"marginBottom",

"marginHorizontal",

"marginLeft",

"marginRight",

"marginTop",

"marginVertical",

"opacity",

"overflow",

"padding",

"paddingBottom",

"paddingHorizontal",

"paddingLeft",

"paddingRight",

"paddingTop",

"paddingVertical",

"position",

"resizeMode",

"right",

"rotation",

"scaleX",

"scaleY",

"shadowColor",

"shadowOffset",

"shadowOpacity",

"shadowRadius",

"textAlign",

"textDecorationColor",

"textDecorationLine",

"textDecorationStyle",

"tintColor",

"top",

"transform",

"transformMatrix",

"translateX",

"translateY",

"width",

"writingDirection"

四：問題

1：當出現下麵這張圖一般是JS代碼出錯了，要麼是樣式或者佈局不正確引起；


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Swift - UIView的無損截圖
    Swift - UIView的無損截圖 效果 源碼 使用 ...
  • ListView和Adapter數據適配器的簡單介紹
    ListView 顯示大量相同格式數據 常用屬性: listSelector listView每項在選中、按下等不同狀態時的Drawable divider ListView每項間的間隔Drawable dividerHeight ListView每項間間隔的間隔高度 常用方法： setAdapte ...
  • Android逆向入門A篇：環境配置
    系列開篇，準備將方向由安卓開發轉向移動安全，首先需要瞭解的就是Android的逆向工程。 現在簡要介紹初級階段需要的工具以及如何獲取並正確配置他們 如果在資源獲取方面遇到困難，留下郵箱我會將所有東西打包發給你 JRE，JDK，SDK，NDK 關於這些工具包的配置不做贅述。 apktool apkto ...
  • 安卓中資料庫的搭建與使用
    大家好，前幾天我寫了一篇關於ormlite資料庫的使用方法，對於資料庫的使用是很方便，搭建起來也非常簡單，因為底層的關於資料庫的SQL語言都已經封裝成了方法，所以對於規避錯誤與使用都是很便捷，但是對於剛開始接觸資料庫的同學們來說，沒有弄清楚原理直接就使用，對於接受方面顯然是弊大於利的，所以今天我就帶 ...
  • Gradle project sync failed
    在Android Studio中運行APP時出現了以下錯誤： 解決的辦法是點擊：tools ->Android->sync project with gradles files！ ...
  • Xamarin.Android 入門之：xamarin使用webserver和html交互
    一、引言 如今，Android+html5開發已經成為最流行的開發模式。 Android 中可以通過webview來實現和js的交互，在程式中調用js代碼，只需要將webview控制項的支持js的屬性設置為true Android（Java）與JavaScript（HTML）交互有四種情況： 1） A ...
  • Android5.0 TimePicker，DatePicker恢覆成低版本滾動模式
    新版中的TimePicker DatePicker是不支持使用遙控器的, 恢覆成低版本滾動模式只需要是xml文件加上一句即可: 本文為博主原創文章，轉載請註明出處 http://www.cnblogs.com/rencm/p/5842798.html ...
  • Android Json處理框架
    1、Android 中的Json解析工具fastjson 、序列化、反序列化 2、Android Gson的使用總結 3、Android-JSONTool 一個簡易的Json框架類，小到只有一個類 有時為了簡化代碼的大小，儘可能的壓縮apk的大小。就不能再使用大而全的框架了。 ...
一周排行
    -Advertisement-
    Play Games
  • C#自定義控制項—指示燈
    前言 推薦一款基於.NET 8、WPF、Prism.DryIoc、MVVM設計模式、Blazor以及MySQL資料庫構建的企業級工作流系統的WPF客戶端框架-AIStudio.Wpf.AClient 6.0。 項目介紹 框架採用了 Prism 框架來實現 MVVM 模式，不僅簡化了 MVVM 的典型 ...
  • WPF 保姆級教程怎麼實現一個樹形菜單
    先看一下效果吧: 我們直接通過改造一下原版的TreeView來實現上面這個效果 我們先創建一個普通的TreeView 代碼很簡單: <TreeView> <TreeViewItem Header="人事部"/> <TreeViewItem Header="技術部"> <TreeViewItem He ...
  • 2024 年學習人工智慧的免費認證課程
    1. 生成式 AI 簡介 https://imp.i384100.net/LXYmq3 2. Python 語言 https://imp.i384100.net/5gmXXo 3. 統計和 R https://youtu.be/ANMuuq502rE?si=hw9GT6JVzMhRvBbF 4. 數 ...
  • 必應每日壁紙API封裝
    本文為大家介紹下.NET解壓/壓縮zip文件。雖然解壓縮不是啥核心技術，但壓縮性能以及進度處理還是需要關註下，針對使用較多的zip開源組件驗證，給大家提供個技術選型參考 之前在《.NET WebSocket高併發通信阻塞問題 - 唐宋元明清2188 - 博客園 (cnblogs.com)》講過，團隊 ...
  • C#自定義控制項—旋轉按鈕
    之前寫過兩篇關於Roslyn源生成器生成源代碼的用例,今天使用Roslyn的代碼修複器CodeFixProvider實現一個cs文件頭部註釋的功能, 代碼修複器會同時涉及到CodeFixProvider和DiagnosticAnalyzer, 實現FileHeaderAnalyzer 首先我們知道修 ...
  • 不可不知的WPF幾何圖形（Geometry）
    在軟體行業，經常會聽到一句話“文不如表，表不如圖”說明瞭圖形在軟體應用中的重要性。同樣在WPF開發中，為了程式美觀或者業務需要，經常會用到各種個樣的圖形。今天以一些簡單的小例子，簡述WPF開發中幾何圖形（Geometry）相關內容，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 可測試，可維護，可移植：上位機軟體分層設計的重要性
    在 C# 中使用 RabbitMQ 通過簡訊發送重置後的密碼到用戶的手機號上，你可以按照以下步驟進行 1.安裝 RabbitMQ 客戶端庫 首先，確保你已經安裝了 RabbitMQ 客戶端庫。你可以通過 NuGet 包管理器來安裝： dotnet add package RabbitMQ.Clien ...
  • 第19篇 Protocol Buffers 編譯器生成proto文件
    1.下載 Protocol Buffers 編譯器（protoc） 前往 Protocol Buffers GitHub Releases 頁面。在 "Assets" 下找到適合您系統的壓縮文件，通常為 protoc-{version}-win32.zip 或 protoc-{version}-wi ...
  • dotnet 讀 WPF 源代碼筆記 從 WM_POINTER 消息到 Touch 事件
    簡介 在現代微服務架構中，服務發現（Service Discovery）是一項關鍵功能。它允許微服務動態地找到彼此，而無需依賴硬編碼的地址。以前如果你搜 .NET Service Discovery，大概率會搜到一大堆 Eureka，Consul 等的文章。現在微軟為我們帶來了一個官方的包：Micr ...
  • .NET Core搭配Vue開源彈幕效果，實現一個評論小項目。好玩！
    ZY樹洞 前言 ZY樹洞是一個基於.NET Core開發的簡單的評論系統，主要用於大家分享自己心中的感悟、經驗、心得、想法等。 好了，不賣關子了，這個項目其實是上班無聊的時候寫的，為什麼要寫這個項目呢？因為我單純的想吐槽一下工作中的不滿而已。 項目介紹 項目很簡單，主要功能就是提供一個簡單的評論系統 ...
所有分類