歡迎光臨
每天分享高質量文章

深入淺出 React Native:使用 JavaScript 構建原生應用(下)

添加組件狀態

每個 React 組件都帶有一個key-value儲存的狀態物件,你必須在組件渲染之前設置其初始狀態。

在 SearchPage.js 中,我們對 SearchPage 類中,render方法前添加以下的代碼。

constructor(props) {

super(props);

this.state = {

searchString: ‘london’

};

}

現在你的組件擁有一個狀態變數:searchString ,且初始值被設置為 london 。

這時候你需要利用起組件中的狀態了。在render方法中,用以下的代碼替換TextInput元素中的內容:

style={styles.searchInput}

value={this.state.searchString}

placeholder=’Search via name or postcode’/>

這一步設置了 TextInput 組件 value 屬性的值,這個值用於把狀態變數 searchString 的當前值作為展示給用戶的文字。我們已經考慮初始值的設定了,但如果用戶編輯這裡的文字會發生什麼呢?

第一步需要建立一個方法來處理事件。在 SearchPage 類中添加以下的代碼:

onSearchTextChanged(event) {

console.log(‘onSearchTextChanged’);

this.setState({ searchString: event.nativeEvent.text });

console.log(this.state.searchString);

}

上面的代碼從 events 中取出了 text 屬性的值,並用於更新組件的狀態。這裡面也添加了一些有用的除錯代碼。

當文字改變時,需要讓這個方法被呼叫,呼叫後的文字會通過 render 函式傳回到組件中。因此我們需要在標簽上添加一個 onChange 屬性,添加後的標簽如下所示:

style={styles.searchInput}

value={this.state.searchString}

onChange={this.onSearchTextChanged.bind(this)}

placeholder=’Search via name or postcode’/>

當用戶更改文本時,會呼叫 onChange 上 的函式;在本例中,則是 onSearchTextChanged 。

註意:你估計會對 bind(this) 陳述句有疑問。在 JavaScript 中,this 這個關鍵字有點不同於大多數其他語言;在 Swift 表示 “自身”。在這種情況中,bind 可以確保在 onSearchTextChanged 方法中, this 可以作為組件實體的取用。有關更多信息,請參見MDN this頁面。

在你再次掃清你的應用程式之前,還有一個步驟:在 return 前添加以下陳述句,打印一條日誌來記錄 render() 函式的呼叫:

console.log(‘SearchPage.render’);

你會從這些日誌陳述句中學到一些很有趣的東西!:]

回到你的模擬器,然後按Cmd + R。您現在應該看到文本輸入的初始值為 “london” ,編輯一下文本,從而在 Xcode 控制臺中產生一些日誌:

註意看上面的截圖,日誌打印的順序看起來有些奇怪:

第一次呼叫 render() 函式用於設置視圖。當文本變化時, onSearchTextChanged 函式被呼叫。之後,通過更新組件的狀態來反映輸入了新的文本,這會觸發另一次 render 。 onSearchTextChanged() 函式也會被呼叫,會將改變的字串打印出來。每當應用程式更新任何 React 組件,將會觸發整個UI層的重新繪製,這會呼叫你所有組件的 render 方法。這是一個好主意,因為這樣做把組件的渲染邏輯,從狀態變化影響UI這一過程中完全解耦出來。

與其他大多數 UI 框架所不同的是,你既不需要在狀態改變的時候去手動更新 UI ,或使用某種型別的系結框架,來創建某種應用程式狀態和它的 UI 表現的關聯;例如,我的文章中講的,通過ReactiveCocoa實現MVVM樣式。

在 React 中,你不再需要擔心 UI 的哪些部分可能受到狀態變化的影響;你的整個應用程式的 UI,都可以簡單地表示為一個函式的狀態。

此時,你可能已經發現了這一概念中一個根本性的缺陷。是的,非常準確——性能!

你肯定不能在 UI 變化時,完全拋棄掉整個 UI 然後重新繪製吧

?這就是 React 高明的地方了。每當 UI 渲染出來後,render 方法會傳回一顆視圖渲染樹,並與當前的 UIKit 視圖進行比較。這個稱之為 reconciliation 的過程的輸出是一個簡單的更新串列, React 會將這個串列應用到當前視圖。這意味著,只有實際改變了的部分才會重新繪製。

這個令人拍案叫絕的嶄新概念讓ReactJS變得獨特——virtual-DOM(文件物件模型,一個web文件的視圖樹)和 reconciliation 這些概念——被應用於iOS應用程式。

稍後你可以整理下思路,之後,在剛纔的應用中你仍然有一些工作要做。日誌代碼增加了代碼的繁瑣性,已經不需要了,所以刪除掉日誌代碼。

初始化搜索功能

為了實現搜索功能,你需要處理 “Go” 按鈕的點擊事件,呼叫對應的 API,並提供一個視覺效果,告訴用戶正在做查詢。

在 SearchPage.js 中,在建構式中把初始狀態更新成:

this.state = {

searchString: ‘london’,

isLoading: false

};

新的 isLoading 屬性將會記錄是否有請求正在處理的狀態。

在 render 開始的添加如下邏輯:

var spinner = this.state.isLoading ?

(

hidden=’true’

size=’large’/> ) :

( );

這是一個三元運算子,與 if 陳述句類似,即根據組件 isLoading 的狀態,要麼添加一個 indicator,要麼添加一個空的 view。因為整個組件會不停地更新,所以你自由地混合 JSX 和 JavaSript 代碼。

回到用 JSX 定義搜索界面的地方,在圖片的下麵添加:

{spinner}

給渲染“Go”的 TouchableHighlight 標記添加如下的屬性:

onPress={this.onSearchPressed.bind(this)}

接下來,添加下麵這兩個方法到 SearchPage 類中:

_executeQuery(query) {

console.log(query);

this.setState({ isLoading: true });

}

onSearchPressed() {

var query = urlForQueryAndPage(‘place_name’, this.state.searchString, 1);

this._executeQuery(query);

}

_executeQuery() 之後會進行真實的查詢,現在的話就是簡單輸出一條信息到控制台,並且把 isLoading 設置為對應的值,這樣 UI 就可以顯示新的狀態了。

提示:JavaScript 的類並沒有訪問修飾符,因此沒有 “私有” 的該奶奶。因此常常會發現開發者使用一個下劃線作為方法的前綴,來說明這些方法是私有方法。

當 “Go” 按鈕被點擊時,onSearchPressed() 將會被呼叫,開始查詢。

最後,添加下麵這個工具函式在定義 SearchPage 類的上面:

function urlForQueryAndPage(key, value, pageNumber) {

var data = {

country: ‘uk’,

pretty: ‘1’,

encoding: ‘json’,

listing_type: ‘buy’,

action: ‘search_listings’,

page: pageNumber

};

data[key] = value;

var querystring = Object.keys(data)

.map(key => key + ‘=’ + encodeURIComponent(data[key]))

.join(‘&’);

return ‘http://api.nestoria.co.uk/api?’ + querystring;

};

這個函式並不依賴 SearchPage,因此被定義成了一個獨立的函式,而不是類方法。他首先通過 data 來定義查詢字串所需要的引數,接著將 data 轉換成需要的字串格式,name=value 對,使用 & 符號分割。語法 => 是一個箭頭函式,又一個對 JavaScript 語言的擴展,提供了這個便捷的語法來創建一個匿名函式。

回到模擬器,Cmd+R,重新加載應用,點擊 “Go” 按鈕。你可以看到 activity indicator 顯示出來,再看看 Xcode 的控制台:

activity indicator 渲染了,並且作為請求的 URL 出現在輸出中。把 URL 拷貝到瀏覽器中訪問看看得到的結果。你會看到大量的 JSON 物件。別擔心——你不需要理解它們,之後會使用代碼來解析之。

提示:應用使用了 Nestoria 的 API 來做房產的搜索。API 傳回的 JSON 資料非常的直白。但是你也可以看看文件瞭解更多細節,請求什麼 URL 地址,以及傳回資料的格式。

下一步就是從應用中發出請求。

執行 API 請求

還是 SearchPage.js 檔案中,更新建構式中的初始 state 添加一個message 變數:

this.state = {

searchString: ‘london’,

isLoading: false,

message: ”

};

在 render 內部,將下麵的代碼添加到 UI 的底部:

{this.state.message}

你需要使用這個為用戶展示多種信息。

在 SearchPage 類內部,將以下代碼添加到 _executeQuery() 底部:

fetch(query)

.then(response => response.json())

.then(json => this._handleResponse(json.response))

.catch(error =>

this.setState({

isLoading: false,

message: ‘Something bad happened ‘ + error

}));

這裡使用了 fetch 函式,它是 Web API 的一部分。和 XMLHttpRequest 相比,它提供了更加先進的 API。異步響應會傳回一個 promise,成功的話會轉化 JSON 並且為它提供了一個你將要添加的方法。

最後一步是將下麵的函式添加到 SearchPage:

_handleResponse(response) {

this.setState({ isLoading: false , message: ” });

if (response.application_response_code.substr(0, 1) === ‘1’) {

console.log(‘Properties found: ‘ + response.listings.length);

} else {

this.setState({ message: ‘Location not recognized; please try again.’});

}

}

如果查詢成功,這個方法會清除掉正在加載標識並且記錄下查詢到屬性的個數。

註意:Nestoria 有很多種傳回碼具備潛在的用途。比如,202 和 200 會傳回最佳位置串列。當你創建完一個應用,為什麼不處理一下這些,可以為用戶呈現一個可選串列。

儲存專案,然後在模擬器中按下 Cmd+R,嘗試搜索 ‘london’;你會在日誌信息中看到 20 properties were found。然後隨便嘗試搜索一個不存在的位置,比如 ‘narnia’,你會得到下麵的問候語。

是時候看一下這20個房屋所對應的真實的地方,比如倫敦!

結果顯示

創建一個新的檔案,命名為 SearchResults.js,然後加上下麵這段代碼:

‘use strict’;

var React = require(‘react-native’);

var {

StyleSheet,

Image,

View,

TouchableHighlight,

ListView,

Text,

Component

} = React;

你肯定註意到啦,這裡用到了 require 陳述句將 react-native 模塊引入其中,還有一個重構賦值陳述句。

接著就是加入搜索結果的組件:

class SearchResults extends Component {

constructor(props) {

super(props);

var dataSource = new ListView.DataSource(

{rowHasChanged: (r1, r2) => r1.guid !== r2.guid});

this.state = {

dataSource: dataSource.cloneWithRows(this.props.listings)

};

}

renderRow(rowData, sectionID, rowID) {

return (

underlayColor=’#dddddd’>

{rowData.title}

);

}

render() {

return (

dataSource={this.state.dataSource}

renderRow={this.renderRow.bind(this)}/>

);

}

}

上述的代碼里用到了一個特定的組件 – ListView – 它能將資料一行行地呈現出來,並放置在一個可滾動的容器內,和 UITableView 很相似。通過 ListView.DataSource 將 ListView 的資料引入,還有一個函式來顯示每一行UI。

在構建資料源的同時,你還需要一個函式用來比較每兩行之間是否重覆。 為了確認串列資料的變化,在 reconciliation 過程中ListView 就會使用到這個函式。在這個實體中,由 Nestoria API 傳回的房屋資料都有一個guid 屬性,它就是用來測試資料變化的。

現在將模塊匯出的代碼添加至檔案末尾:

module.exports = SearchResults;

將下麵這段代碼加到 SearchPage.js 較前的位置,不過要在 require 陳述句的後面哦:

var SearchResults = require(‘./SearchResults’);

這樣我們就能在 SearchPage 類中使用剛剛加上的 SearchResults 類。

還要把 _handleResponse 方法中的 console.log 陳述句改成下麵這樣:

this.props.navigator.push({

title: ‘Results’,

component: SearchResults,

passProps: {listings: response.listings}

});

SearchResults 組件通過上面的代碼傳入串列里。在這裡用的是 push方法確保搜索結果全部推進導航棧中,這樣你就可以通過 ‘Back’ 按鈕傳回到根頁面。

回到模擬器,按下 Cmd+R 掃清頁面,然後試試看我們的搜索。估計你會得到類似下麵這樣的結果:

耶!你的搜索實現了呢,不過這搜索結果頁面的顏值也太低了,不要擔心,接下來給它化化妝。

可點擊樣式

這些 React Native 的原生代碼現在應該理解起來輕車熟路了,所以本教程將會加快速度。

在 SearchResults.js 中,destructuring 宣告後面添加以下陳述句來定義樣式:

var styles = StyleSheet.create({

thumb: {

width: 80,

height: 80,

marginRight: 10

},

textContainer: {

flex: 1

},

separator: {

height: 1,

backgroundColor: ‘#dddddd’

},

price: {

fontSize: 25,

fontWeight: ‘bold’,

color: ‘#48BBEC’

},

title: {

fontSize: 20,

color: ‘#656565’

},

rowContainer: {

flexDirection: ‘row’,

padding: 10

}

});

這些定義了每一行的樣式。

接下來修改 renderRow() 如下:

renderRow(rowData, sectionID, rowID) {

var price = rowData.price_formatted.split(‘ ‘)[0];

return (

this.rowPressed(rowData.guid)}

underlayColor=’#dddddd’>

£{price}

numberOfLines={1}>{rowData.title}

);

}

這個操作修改了傳回的價格,將已經格式了化的”300000 GBP”中的GBP後綴刪除。然後它通過你已經很熟悉的技術來渲染每一行的 UI 。這一次,通過一個 URL 來提供縮略圖的資料, React Native 負責在主執行緒之外解碼這些資料。

同時要註意 TouchableHighlight 組件中 onPress屬性後使用的箭頭函式;它用於捕獲每一行的 guid。

最後一步,給類添加一個方法來處理按下操作:

rowPressed(propertyGuid) {

var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];

}

該方法通過用戶觸發的屬性來定位。目前該方法沒有做任何事,你可以稍後處理。現在,是時候欣賞你的大作了。

回到模擬器,按下 Cmd + R 查看結果:

看起來好多了——儘管你會懷疑是否任何人都能承受住在倫敦的代價!

是時候嚮應用程式添加最後一個視圖了。

房產詳情視圖

添加一個新的檔案 PropertyView.js 到專案中,在檔案的頂部添加如下代碼:

‘use strict’;

var React = require(‘react-native’);

var {

StyleSheet,

Image,

View,

Text,

Component

} = React;

信手拈來了吧!

接著添加如下樣式:

var styles = StyleSheet.create({

container: {

marginTop: 65

},

heading: {

backgroundColor: ‘#F8F8F8’,

},

separator: {

height: 1,

backgroundColor: ‘#DDDDDD’

},

image: {

width: 400,

height: 300

},

price: {

fontSize: 25,

fontWeight: ‘bold’,

margin: 5,

color: ‘#48BBEC’

},

title: {

fontSize: 20,

margin: 5,

color: ‘#656565’

},

description: {

fontSize: 18,

margin: 5,

color: ‘#656565’

}

});

然後加上組件本身:

class PropertyView extends Component {

render() {

var property = this.props.property;

var stats = property.bedroom_number + ‘ bed ‘ + property.property_type;

if (property.bathroom_number) {

stats += ‘, ‘ + property.bathroom_number + ‘ ‘ + (property.bathroom_number > 1

? ‘bathrooms’ : ‘bathroom’);

}

var price = property.price_formatted.split(‘ ‘)[0];

return (

source={{uri: property.img_url}} />

£{price}

{property.title}

{stats}

{property.summary}

);

}

}

render() 前面部分對資料進行了處理,與通常的情況一樣,API 傳回的資料良莠不齊,往往有些欄位是缺失的。這段代碼通過一些簡單的邏輯,讓資料更加地規整一些。

render 剩餘的部分就非常直接了。它就是一個簡單的這個狀態不可變狀態的函式。

最後在檔案的末尾加上如下的 export:

module.exports = PropertyView;

傳回到 SearchResults.js 檔案,在頂部,require React 的下麵,添加一個新的 require 陳述句。

var PropertyView = require(‘./PropertyView’);

接下來更新 rowPassed(),添加跳轉到新加入的 PropertyView:

rowPressed(propertyGuid) {

var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];

this.props.navigator.push({

title: “Property”,

component: PropertyView,

passProps: {property: property}

});

}

你知道的:回到模擬器,Cmd + R,一路通過搜索點擊一行到房產詳情界面:

物廉價美——看上去很不錯哦!

應用即將完成,最後一步是允許用戶搜索附近的房產。

地理位置搜索

在 Xcode 中,打開 Info.plist 添加一個新的 key,在編輯器內部單擊滑鼠右鍵並且選擇 Add Row。使用NSLocationWhenInUseUsageDescription 作為 key 名並且使用下麵的值:

PropertyFinder would like to use your location to find nearby properties

下麵是當你添加了新的 key 後,所得到的屬性串列:

你將把這個關鍵的細節提示呈現給用戶,方便他們請求訪問當前位置。

打開 SearchPage.js,找到用於渲染 Location 按鈕的TouchableHighlight,然後為其添加下麵的屬性值:

onPress={this.onLocationPressed.bind(this)}

當你用手指輕點這個按鈕,會呼叫 onLocationPressed —— 接下來會定義這個方法。

將下麵的代碼添加到 SearchPage 類中:

onLocationPressed() {

navigator.geolocation.getCurrentPosition(

location => {

var search = location.coords.latitude + ‘,’ + location.coords.longitude;

this.setState({ searchString: search });

var query = urlForQueryAndPage(‘centre_point’, search, 1);

this._executeQuery(query);

},

error => {

this.setState({

message: ‘There was a problem with obtaining your location: ‘ + error

});

});

}

通過 navigator.geolocation 檢索當前位置;這是一個 Web API 所定義的接口,所以對於每個在瀏覽器中使用 location 服務的用戶來說這個接口都應該是一致的。React Native 框架借助原生的 iOS location 服務提供了自身的 API 實現。

如果當前位置很容易獲取到,你將呼叫第一個箭頭函式;這會向Nestoria 發送一個 query。如果出現錯誤則會得到一個基本的出錯信息。

因為你已經改變了屬性串列,你需要重新啟動這個應用以看到更改。抱歉,這次不可以 Cmd+R。請中斷 Xcode 中的應用,然後創建和運行專案。

在使用基於位置的搜索前,你需要指定一個被 Nestoria 資料庫改寫的位置。在模擬器選單中,選擇 Debug\Location\Custom Location … 然後輸入 55.02 維度和 -1.42 經度,這個坐標是英格蘭北部的一個景色優美的海邊小鎮,我經常在那給家裡打電話。

警示:我們可以正常地使用位置搜索功能,不過可能有部分同學不能使用(在訪問時傳回 access denied 錯誤)—— 我們尚不確定其原因,可能是 React Native 的問題?如果誰遇到了同樣的問題並且已經結果,煩請告訴我們。這裡沒有倫敦那樣值得炫耀 —— 不過更加經濟!:]

下一步行動?

完成了第一個 React Native 應用呢,恭喜你!你可以下載本教程的完整代碼,親自來試試看。

如果已經接觸過 Web 開發了,你會發現使用 JavaScript 和 React 來定義與原生 UI 相連接的接口和導航是多麼地容易。而如果你曾經開發過原生 App,我相信在使用 React Native 的過程里你會感受到它種種好處:快速的應用迭代,JavaScript 的引入以及清晰地使用 CSS 定義樣式。

也許下次做 App 的時候,你可以試試這個框架?或者說,你依然堅持使用 Swift 或者 Objective-C?無論之後你的選擇是怎麼樣的,我都希望讀完這篇文章的你有所收穫,還能把這些收穫融入到你的專案當中是最好的啦。


原文出處:Colin Eberhardt

譯文出處:前端外刊評論

鏈接:http://zhuanlan.zhihu.com/FrontendMagazine/19996445



赞(0)

分享創造快樂