RN7_React-Native實戰(1)

環境搭建(windows)

參考：http://www.open-open.com/lib/view/open1451012403948.html

按照他的搭下來似乎沒什么問題。

在里面幾個關鍵點：

1、下載的AwesomPRoject沒有local配置文件，需要在android項目里面拽一個過來。

2、我們的手機和筆記本需要連接到同一個網絡中

3、我們需要先用cmd打開react的調試服務

然后再去打開網頁http://localhost:8081/index.android.bundle?platform=android

看看是否服務已經開啟。開啟成功如下：

4、去運行項目。react-native run-android

5、出現連接不上js bundle的情況

這是后我們要去搖一搖手機，然后去dev setting中去設置host的ip和端口地址

Eg:192.168.2.12:8081.

然后再去reload就可以了。

一些必要的插件

需要安裝react-native的命令行工具：

在cmd中執行：

npm install -g react-native-cli

然后我們就可以

開始實戰

參考：

react官網：http://facebook.github.io/react-native/docs/network.html#content

厲害的中文翻譯：http://reactnative.cn/docs/0.41/network.html#content

實戰前準備：從這里開始我們就依照react-native官網中的教學開始進行實戰！我用npm init新建項目老失敗，所以索性就用官網給的那個AwesomeProject項目作為實戰的項目進行代碼編寫和運行。至于編譯器用的是Atom。在Atom上寫代碼，然后用實時用真機去看效果。具體就是這樣的。那開始吧.

props

他是組件里面的屬性參數。

簡單例子：

分析：

ES6 中, 除了var還多了兩種聲明, 一是 const, 一是 let。

const ：聲明一個常量.

Let：聲明一個變量.

var ：聲明的作用域為函數內。

Let vs var

Var有個bug：

作用域是函數體的全部：

for(var i=0;i<10;i++){

     var a = 'a';

}

console.log(a);

明明已經跳出 for 循環了，卻還可以訪問到 for 循環內定義的變量 a ，甚至連 i 都可以被放訪問到。

而let則解決了這個bug，let聲明的變量的作用域只是外層塊，而不是整個外層函數。

Porps的訪問

分析：

這里我們創建了另外一個組件Greeting，Greeting組件所呈現的效果是一個text標簽。項目里面通過AppRegistry.registerComponent來確定組件的調用入口。

State 

Props是通過父控件設置的一個固定的變量，而state是一個可變的數據。

Style

封裝屬性

我們可以通過名為style的組件屬性進行屬性的封裝。

Width和height

Flex

這個和andori中gravity即權重值相似。

Flexbox 

這是style提供了考慮到不同屏幕大小的布局，提供了flex盒子模型來對立面的內容進行設置。

TextInput

這個控件允許用戶輸入文字，當內容改變的時候會調用onChangeText方法 ，當提交的時候會調用onSubmitEditing 方法。

分析：

這里我們在內容改變的時候去調用onchangText的回調方法，作為state來說，使用this.setState方法，會觸發異步修改狀態，狀態改變的同時，會重新執行一次willUpdate，render等流程。

ScrollView

這里的scrollView和安卓的使用差不多的樣子。

ListView

Fetch

通過它來實現網絡的URL數據的訪問。

參數1：訪問的URL；

參數2：定制HTTP請求一些參數。

注意：網絡請求天然是一種異步操作（同樣的還有asyncstorage，無論在語法層面怎么折騰，它們的異步本質是無法變更的。）

Fetch api的使用：

分析：

首先是構造請求的URL，然后將URL傳遞給全局的fetch()方法，它會立刻返回一個Promise，當Promise被通過，它會返回一個Response對象，通過該對象的json()方法可以將結果作為JSON對象返回。 response.json()同樣會返回一個Promise對象，因此在我們的例子中可以繼續鏈接一個then()方法。

Promise對象：

代表了未來某個將要發生的事件（通常是一個異步操作）。它可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。

Navigator

從你添加第二個頁面開始，就得考慮如何管理多個頁面間的跳轉了。

導航器正是為此而生。它可以管理多個頁面間的跳轉，也包含了一些常見的過渡動畫，包括水平翻頁、垂直彈出等等。

Scene

場景簡單來說其實就是一個全屏的React組件。

一個簡單的場景：

導入：

使用Navigator

首先要做的是渲染一個Navigator組件，然后通過此組件的renderScene屬性方法來渲染其他場景。

這個有點復雜：參看http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B/2

比較好理解。

遇到的bug

1、

剛下載的react項目在node_modules中沒有相關配置文件，需要在目錄下npm install下。

在npm install時又報錯了：沒有找到git，應該是環境變量里面沒有配置git，于是去環境變量中配置git：

最后再去npm install就搞定了。