react native 包學不包會系列--react native開發基礎知識

git

關於git的具體使用，能夠查看個人另一篇比較詳細的git實用記錄

jsx

jsx它不是一種新的開發語言，它是一種語法方案: 一種能在javascript中直接書寫html標籤的語法糖，因此它本質上仍是js，是js的一種優雅語法糖 固然並非必需要學習jsx你才能夠開始React Native，jsx是爲構造React元素方法React.createElement(component, props, ...children)設計的語法糖。 比方說JSX代碼：

<Elem color="red" info="hello">Hello!<Elem/>
複製代碼

用標準的React語法寫出來應該是：

React.creatElement({
  Elem,
  {
    color:red,
    info:"hello"
  },
  "Hello!"
});
複製代碼

可是以個人使用經驗，jsx在定義html這種樹形結構時，簡單明瞭，極大地提升了咱們的開發與維護效率。就是一個能夠事半功倍的東西，花點時間學學，何樂不爲呢。而強大的babel就爲咱們作了這個jsx的語法糖解析工做，若是想要看jsx與js的語法轉換，能夠看這邊
關於jsx的具體用法，看這裏
具體的使用方法我這邊就說了，其實很簡單，對前端來講也是很快上手，就說幾個在使用過程當中要注意的點：

• 用戶自定義的組件首字母必須大寫，一個組件只能有一個頂層對象，無論在react仍是react native中毅然
• 若是是在react項目中， 自定義標籤必須在react的做用範圍內
• 可使用符號【.】來調用子組件
• 組件的開始標籤和閉合標籤之間的內容是一個特殊的props——props.children，組件嵌套中的全部內容也都是props.children

flexbox

各位前端開發，應該都知道佈局對網頁開發的重要性，而如雷貫耳的盒子模型，讓咱們來回顧一下：

css的盒子模型，依賴於postion、float、以及display三者來進行佈局，可是對於一些經常使用可是特殊的佈局好比垂直居中，實現起來就不夠優雅了。（若是你對盒子佈局如何解決各類佈局要求有興趣，看 這裏）而flexbox，即彈性盒子佈局，即便容器與容器元素的大小未知或者動態性的，均可以控制他們的佈局。flexbox佈局的主要思想就是讓容器有能力讓其子元素可以改變其寬度，高度，順序，以你想要的最佳方式在空間中佈局，這使得flexbox佈局可以很靈活地使用全部類型的設備於屏幕大小。而React Native的佈局基礎就是flexbox佈局，不只使得ui開發更加簡便，也很好地解決了ios與按照的屏幕適配問題

react native 實現的flexbox布是會跟web佈局有所細微的不一樣，好比flex-direction 的默認值是column不是row，align-ITEM的默認值是stretch而非flex-start，還有flex只能指定一個數字值。可是沒有關係，這些不是很大的學習障礙

讓咱們來了解下flexbox的屬性值： 父元素的屬性： 父元素不用設置display：flex，第一步就跟web不一樣了哈，由於默認都是display:flex flexDirection: column(默認值)、 row、 row-reverse flexWrap 當子組件內容溢出父組件的時候，是否須要換行 取值：