初級前端自學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之前，趕緊充個電吧。