一、 JSX和組件的概念
React的核心機制之一就是虛擬DOM：可以在內存中創建的虛擬DOM元素。React利用虛擬DOM來減少對實際DOM的操作從而提升性能。傳統的創建方式是：
但這樣的代碼可讀性並不好，於是React發明了JSX，利用我們熟悉的HTML語法來創建虛擬DOM：
在實際開發中，JSX在產品打包階段都已經編譯成純JavaScript，JSX的語法不會帶來任何性能影響。因此，JSX本身並不是什么高深的技術，可以說只是一個比較高級但很直觀的語法糖。
二、 View組件中常見的屬性
React Native組件View，其作用等同於iOS中的UIView, Android中的android.view，或是網頁中的<div>標簽，它是所有組件的父組件。
Flexbox 彈性布局
Transforms 動畫屬性
backfaceVisibility enum('visible', 'hidden') 定義界面翻轉的時候是否可見
backgroundColor color
borderBottomColor color
borderBottomLeftRadius number
borderBottomRightRadius number
borderBottomWidth number
borderColor color
borderLeftColor color
borderLeftWidth number
borderRadius number
borderRightColor color
borderRightWidth number
borderStyle enum('solid', 'dotted', 'dashed')
borderTopColor color
borderTopLeftRadius number
borderTopRightRadius number
borderTopWidth number
borderWidth number
opacity number 設置透明度，取值從0-1；
overflow enum('visible', 'hidden') 設置內容超出容器部分是顯示還是隱藏；
elevation number 高度 設置Z軸，可產生立體效果
三、 View組件運用
下圖就是View的基本運用：
在圖中的render函數中，我們返回了一個頂層的View，然后View中包含着另一個子層的View。
在頂層的View中的style屬性里面設置了其占滿父控件，內邊距為30，背景顏色為黃色 ；對應子層中的View的style屬性中設置了寬度300，高度50，背景色為紅色。 這是我們熟悉的css寫法。
運行結果如下：
在React Native開發中，更加推薦我們采用StyleSheet來進行組件的布局，這樣的話，代碼在結構上會更加的清晰、也有利於后期維護。
下面我們采用StyleSheet來實現一下:
當然，在開發中會根據具體情況來靈活運用。