一、 JSX和組件的概念
React的核心機制之一就是虛擬DOM：可以在內存中創(chuàng)建的虛擬DOM元素。React利用虛擬DOM來減少對實際DOM的操作從而提升性能。傳統(tǒng)的創(chuàng)建方式是：
創(chuàng)建虛擬DOM節(jié)點
? ? ? ?但這樣的代碼可讀性并不好，于是React發(fā)明了JSX，利用我們熟悉的HTML語法來創(chuàng)建虛擬DOM：
JSX創(chuàng)建節(jié)點
? ? ? ?在實際開發(fā)中，JSX在產品打包階段都已經(jīng)編譯成純JavaScript，JSX的語法不會帶來任何性能影響。因此，JSX本身并不是什么高深的技術，可以說只是一個比較高級但很直觀的語法糖。
二、View組件中常見的屬性
React Native組件View，其作用等同于iOS中的UIView, Android中的android.view，或是網(wǎng)頁中的<div>標簽，它是所有組件的父組件
Flexbox 彈性布局
Transforms 動畫屬性
backfaceVisibility enum('visible', 'hidden') 定義界面翻轉的時候是否可見
opacity number 設置透明度，取值從0-1；
overflow enum('visible', 'hidden') 設置內容超出容器部分是顯示還是隱藏；
elevation number 高度 設置Z軸，可產生立體效果
三、 View組件運用
下圖就是View的基本運用：
view的基本用法
? ? ? ?在圖中的render函數(shù)中，我們返回了一個頂層的View，然后View中包含著另一個子層的View。
? ? ? ?在頂層的View中的style屬性里面設置了其占滿父控件，內邊距為30，背景顏色為黃色 ；對應子層中的View的style屬性中設置了寬度300，高度50，背景色為紅色。 這是我們熟悉的css寫法。
? ? ? ?運行結果如下：
運行結果.png
? ? ? ?在React Native開發(fā)中，更加推薦我們采用StyleSheet來進行組件的布局，這樣的話，代碼在結構上會更加的清晰、也有利于后期維護。
? ? ? ?下面我們采用StyleSheet來實現(xiàn)一下:
StyleSheet.png
當然，在開發(fā)中會根據(jù)具體情況來靈活運用。
本文主要借鑒旋之華的微信文章以及相關的教學視頻，方便自己查活和復習，如看原文請移步傳送門
? ? ? ?當然，網(wǎng)上會有很多關于混合開發(fā)的文章以及教學視頻，總之，如果想學習，路徑有很多，但筆者建議，最好先系統(tǒng)的跟隨一個人學習，然后后期進階或提升的時候再看其他的，方便查漏補缺，完善知識忙點，
