React Native的View組件和Flexbox的使用

在看view組件以前，咱們先了解下JSX語法，React核心機制之一是虛擬DOM，能夠在內存中建立虛擬的DOM元素，經過對DOM的模擬，最大限度地減小與DOM的交互。
例子：
var btn=document.createElement("BUTTON"); btn.className = 'btn'; var t=document.createTextNode("CLICK ME"); t.className = 't'; btn.appendChild(t)html

可是虛擬DOM可讀性不那麼好，React就發明了JSX，就是咱們熟悉的HTML語法來建立虛擬DOM。實際上在打包階段，JSX已經編譯成javaScript,對性能是無影響的，是很直觀的語法糖。（語法糖（Syntactic sugar），也譯爲糖衣語法，是由英國計算機科學家彼得·約翰·蘭達（Peter J. Landin）發明的一個術語，指計算機語言中添加的某種語法，這種語法對語言的功能並無影響，可是更方便程序員使用。一般來講使用語法糖可以增長程序的可讀性，從而減小程序代碼出錯的機會。）java

class Demo extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }

若是你想了解更多JSX的知識，能夠看http://www.runoob.com/react/react-jsx.html，若是想看一些例子，能夠看這裏https://blog.csdn.net/tianzhw/article/details/78812475；下面咱們一塊兒看下View組件吧。react

View 做爲建立UI時最基礎的組件，View是一個支持Flexbox佈局、樣式、一些觸摸處理、和一些無障礙功能的容器，而且它能夠放到其它的視圖裏，也能夠有任意多個任意類型的子視圖。不論在什麼平臺上，View都會直接對應一個平臺的原生視圖，不管它是UIView、<div></div>仍是android.view.View，是全部組件的父組件。android

View的style屬性

Flexbox...
	ShadowProp#style...
	Transforms...
	backfaceVisibility enum('visible', 'hidden')
	backgroundColor string
	borderColor string
	borderTopColor string
	borderRightColor string
	borderBottomColor string
	borderLeftColor string
	borderRadius number
	borderTopLeftRadius number
	borderTopRightRadius number
	borderBottomLeftRadius number
	borderBottomRightRadius number
	borderStyle enum('solid', 'dotted', 'dashed')
	borderWidth number
	borderTopWidth number
	borderRightWidth number
	borderBottomWidth number
	borderLeftWidth number
	opacity number
	overflow enum('visible', 'hidden')
	android elevation number
	(限Android)使用Android原生的 elevation API來設置視圖的高度（elevation）。
	這樣能夠爲視圖添加一個投影，而且會影響視圖層疊的順序。此屬性僅支持Android5.0及以上版本。

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  View,
  StyleSheet,
} = React;
 
var Demo= React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <View style={styles.box}>
        </View>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  container:{
    flexDirection:'row',      
    padding:20
  },
  box: {
    backgroundColor:'red',
    flex:1
  },
});
AppRegistry.registerComponent('Demo', () => Demo);

Flexbox：
以前的頁面中，界面搭建根據CSS來的，是基於盒子模型，依賴display，position，float屬性，可是對於一些特殊佈局例如垂直居中，這樣的佈局是不方便的。
因此一種全新的針對Web和移動開發的佈局出現了，那就是Flex佈局，能夠簡單、完整、響應式的實現各類佈局，目前瀏覽器都支持，因此如今能夠放心使用。
FlexBox：是彈性盒模型，佈局父盒子和子盒子的關係。在佈局時，要知道主軸和次軸的區別(盒子的排列方向)。想改變項目的排列方向，用的是flexDirection屬性。程序員

flexDirection 值爲：web

row：主軸爲水平方向，起點在左邊。
column(默認值)：主軸爲垂直方向，起點在上邊。
（在React Native中主要使用上面兩種）
row-reverse：主軸爲水平方向，起點在右邊。
column-reverse：主軸爲垂直方向，起點在下邊。

justify-content屬性:定義了項目在主軸上的對齊方式。
具體對齊方式與軸的方向有關。 值爲：react-native

flex-start（默認值）：左對齊
flex-end：右對齊
flex-end：右對齊
center：居中center：居中
space-between：兩端對齊，項目之間的間隔都相等。space-between：兩端對齊，項目之間的間隔都相等。
space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。 space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

alignItems 定義項目在交叉軸上如何對齊，能夠把其想像成側軸（垂直於主軸）的「對齊方式」,值爲：瀏覽器

flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

flexWrap 默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。app

nowrap(默認值)：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。（和wrap相反）

flex 屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。根據父盒子的大小來計算子盒子的寬度。比例的方式動態計算大小。
寬度=彈性寬度（父盒子）*（flex-grow/sum(flex-grow)）svg

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

參考網站：
https://www.jianshu.com/p/64cf6966d5fa
https://www.jianshu.com/p/31248003f375

本文同步分享在博客「zoepriselife316」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。