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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類