初級前端自學react-native,必備知識點（ES6+ReactJS+flexbox）

咱們在學會搭建react-native環境以後，打開項目根目錄，看到不少個文件，可是最起眼的應該就是那倆js兄弟文件了

咱們一看那名字就知道，咱們接下來的任務就是要弄它們：

 

咱們用編輯器打開項目根目錄下的index.android.js文件，能夠看到有這麼個東西：

 

 

那麼咱們先測試一下，在手機上跑起來。不知道你們還記不記得步驟：

第一步：在項目根目錄下打開兩個git bash.第一個輸入：react-native start        這一步是在啓用服務器

第二步：在第一步成功以後，鏈接手機，開啓開發者模式，在第二個git bash 中輸入：react-native run-android

等待幾分鐘就能夠看到手機上顯示的結果了：

 

大家能夠看到代碼的第12行到第21行，是否是就恰好是咱們這個圖片顯示的內容呢！

咱們能夠把代碼裏Text組件裏面的文字內容任意修改，而後reloadJs，就能夠看到顯示的界面跟着一塊兒變了，是否是很神奇！

 

好了，不開玩笑，咱們首先要弄懂怎麼樣寫出這樣的代碼，咱們還須要補充哪些知識點。

 

若是你沒有接觸過reactJS，咱們首先要掌握的 第一個知識點：reactJS。

而後咱們看到代碼的第一行，得出咱們須要掌握的 第二個知識點：ES6的新語法。

咱們看下面這段代碼：

很明顯這是使用駝峯命名法設置css樣式。

可是咱們看到的justifyContent和alignItems是個什麼東西，咱們隨便一查就知道，這是咱們要學習的第三個知識點：flexbox而局

 

 

咱們下面就來粗講一下這三個知識點，爲何是粗講？

由於咱們只是爲了react-native快速入門打基礎，其餘深層次的東西，咱們用多了就熟了。

 

 

第一個知識點：ES6新特性

 

 

ES6也已經出來了好久，做爲一名前端，咱們應該有了解了很多，下面是ES6最主要的幾個特性

 

let和const

 

let能夠聲明具備塊級做用域的變量，const是用來定義常量的。

for (let i=0; i<5; i++) { console.log('sm') } console.log(i) // Error: i is not defined const fix = {} fix.some = 'sm' console.log(fix.some) // sm fix = new Array(2, 3, 3) // Error: "fix" is read-only

const定義引用類型時，是指引用的地址不可變

arrow function

箭頭函數，箭頭函數能夠簡化匿名函數的寫法，而且能夠將this靜態綁定到對象，而不會因運行上下文的變化而變化：

function Person() { this.name = 'Person' this.hello = () => { console.log(this.name) } } var test = new Person test.hello.bind({name: 'test'})() //Person

這裏在箭頭函數裏，this對象已經靜態綁定到Person這個對象了，不會隨着運行上下文的改變而改變。

函數參數

默認值 Default

function plus(x, y=2333) { console.log(x + y) } plus(4333) // 6666

...形參 Rest

能夠經過...形參將參數轉化爲數組，跟arguments做用相似，只不過箭頭函數內部是取不到arguments的值的

function sum(...values) { let result = 0 for (let val of values) { result += val } return result } console.log(sum(2, 3, 5)) //10 sum(...[2, 3, 5]) //等價於 sum.apply(undefined, [2, 3, 5]) -> 10 //因此能夠直接這樣用 let arr = [45, 23, 4325] sum(...arr) // 等價於 sum.apply(undefined, arr) -> 4393

Destructuring 解構

解構賦值，按照必定的規則從數組和對象中提取值，對變量進行賦值

let [cat, dog] = [ {hello: 'wang'}, {hello: 'miao'} ] console.log(cat.hello) //wang //在取json數據時尤其方便 let jsonData = { supplierId: '2333', name: 'ORZ', code: 6666 } let {supplierId: id, name, code} = jsonData

使用BABEL編譯後變成這樣

'use strict'; var cat = { hello: 'wang' }; var dog = { hello: 'miao' }; console.log(cat.hello); //wang var jsonData = { supplierId: '2333', name: 'ORZ', code: 6666 }; var id = jsonData.supplierId; var name = jsonData.name; var code = jsonData.code;

Template String

這個東西很是有用，在插入大段html內容到文檔中時，顯得很方便

let [cat, dog] = ['sss', 'mmm'] console.log(`My cat's name is ${cat} and my dog's name is ${dog}`)

Class

使用Class語法糖能夠很方便地實現類以及繼承代碼

class Person { constructor(name) { this.name = name } hello() { console.log(`My name is ${this.name}`) } } class Student extends Person { constructor(name, studentNumber) { super(name) this.studentNumber = studentNumber } intro() { this.hello() console.log(`My student Number is ${this.studentNumber}`) } } let student = new Student('hwen', 13) student.intro() //My name is hwen //My student Number is 13

super指代父類的實例（也便是父類的this對象）。子類必須在constructor方法中調用super方法，不然新建實例時會報錯。
這是由於子類沒有本身的this對象，而是繼承父類的this對象，而後對其進行加工。

Modules

在ES6以前，模塊化的解決方案通常有兩種：CommonJS(服務器端)和AMD(瀏覽器端，如require.js，可是在此以前，其實我也沒用過它們)，、

須要注意的是大括號裏的變量名需與模塊裏export的接口名稱相同，引入其餘模塊的默認值(default)能夠直接寫在大括號外

//some.js export defalut 'worker' export function sm() { return 'do something' } export const time = 1000*60*60 //index.js import people, { sm as something, time } from './some' let work = something() console.log(`${people} ${work} for ${time / (1000 * 60)} min`) //worker do something for 60 min

 

詳情-阮一峯的電子書：http://es6.ruanyifeng.com/#docs/intro

 

 

 

第二個知識點：reactJs

 

既然你敢說學react-native，應該不至於沒了解過reactJS吧。

 

這已是一個很是流行的框架，你們必定都有去了解一些相關知識，其實做爲react-native入門，瞭解一些就夠用了。

 

React是由ReactJS與React Native組成，其中ReactJS是Facebook開源的一個前端框架，React Native 是ReactJS思想在native上的體現！

JSX並非一門新的語言，僅僅是個語法糖，容許開發者在JavaScript中書寫HTML語法。，最後每一個HTML標籤都轉化爲JavaScript代碼來運行。

其實咱們須要掌握的東西很少，你只要能寫出這個就夠了，so easy!

整個代碼的邏輯就是：

經過構建一個一個HelloMessage的組件，

組件的內容爲一個h1標籤，h1標籤裏輸出hello+HelloMessage的name屬性值+！我是wushaoxion

並將HelloMessage插入到id爲example的div中。

輸出的結果爲：hello ReactJs! 我是wushaoxion

 

若是你想了解更多，或者你徹底沒接觸過reactJs，能夠去看看阮一峯的博客：http://www.ruanyifeng.com/blog/2015/03/react.html

 

 

 

 

 

 

第三個知識點：flexbox佈局

 

這是最簡單的一個內容了。可是我卻很很差意思的放在了最後面。

 

 

flexbox是Flexible Box的縮寫，彈性盒子佈局主流的瀏覽器都支持。flexbox佈局是伸縮容器(container)和伸縮項目(item)組成

Flexbox佈局的主體思想是元素能夠改變大小以適應可用空間，當可用空間變大，Flex元素將伸展大小以填充可用空間，當Flex元素超出可用空間時將自動縮小。總之，Flex元素是可讓你的佈局根據瀏覽器的大小變化進行自動伸縮。

伸縮容器有主軸和交叉軸組成！主軸既能夠是水平軸，也能夠是垂直軸

 

flexbox目前還處於草稿狀態，全部在使用flexbox佈局的時候，須要加上各個瀏覽器的私有前綴，即-webkit -moz -ms -o等

 

可是在作移動端頁面的時候，這也是一個很不錯的佈局方式

伸縮容器的屬性

 

1.display 

display:flex | inline-flex   塊級伸縮容器行內級伸縮容器

 

2.flex-direction

指定主軸的方向 flex-direction:row（默認值）| row-reverse | column | column-reverse

 

3.flex-wrap

伸縮容器在主軸線方向空間不足的狀況下，是否換行以及該如何換行flex-wrap:nowrap（默認值） | wrap | wrap-reverse

 

4.flex-flow

是flex-direction和flex-wrap的縮寫版本，它同時定義了伸縮容器的主軸和側軸， row

 

5.justify-content 

用來定義伸縮項目在主軸線的對齊方式，語法爲：justify-content:flex-start（默認值）| flex-end | center | space-between | space-around

 

6.align-items

用來定義伸縮項目在交叉軸上的對齊方式，語法爲：align-items:flex-start（默認值）| flex-end | center | baseline | stretch

 

7.align-content

用來調整伸縮項目出現換行後在交叉軸上的對齊方式，語法爲：align-content:flex-start | flex-end | center | space-between | space-around | stretch（默認值）

 

咱們暫且沒必要要了解太多，明白在RN中怎麼使用就能夠了

 

RN目前主要支持flexbox的以下6個屬性：

 

1.alignItems

用來定義伸縮項目在交叉軸上的對齊方式，語法爲：alignItems:flex-start（默認值）| flex-end | center | stretch

 

2.alignSelf 

用來設置單獨的伸縮項目在交叉軸上的對齊方式，會覆蓋默認的對齊方式，其語法爲：alignSelf:auto | flex-start | flex-end | center | stretch(伸縮項目在交叉軸方向佔滿伸縮容器，若是交叉軸爲垂直方向的話，只有在不設置高度的狀況下才能看到效果)

 

3.flex

是flex-grow flex-shrink flex-basis這三個屬性的縮寫，其語法爲：flex:none | flex-grow flex-shrink flex-basis，其中第二個和第三個參數爲可選參數，默認值爲：0 1 auto

 

4.flexDirection

指定主軸的方向 flex-direction:row| row-reverse | column（默認值）| column-reverse

 

5.flexWrap

 

6.justifyContent

 

若是你想學習關於flexbox更多的內容：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

 

 

以上這些都是react-native入門必備知識點，在計劃學習react-native以前，趕忙充個電吧。