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

程式碼星空發表於2019-01-06
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

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

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

react native 包學不包會系列--react native開發基礎知識
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 當子元件內容溢位父元件的時候，是否需要換行 取值：

相關文章