為了實現搜索功能,我們需要處理Go按鈕點擊事件,創建對應的API請求,顯示網絡請求的狀態。
打開SearchPage.js, 在constructor方法中修改state的初始化代碼:
~~~
this.state = {
searchString: 'london',
isLoading: false
};
~~~
isLoading 屬性用于表示查詢是否正在進行。
在render方法最上面增加:
~~~
var spinner = this.state.isLoading ?
( <ActivityIndicatorIOS
hidden='true'
size='large'/> ) :
( <View/>);
~~~
這里用了一個三目運算,這是一個if語句的簡化形式。如果isLoading為true,顯示一個網絡指示器,否則顯示一個空的view。
在return語句中,在Image下增加:
~~~
{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屬性為true,剩下的功能我們留到后面完成。
> 注意: 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類,因此被定義為函數而不是方法。它首先將key\value參數以鍵值對形式放到了data集合中,然后將data集合轉換成以&符分隔的“鍵=值”形式。=>語法是箭頭函數的寫法,一種創建匿名函數簡潔寫法,具體請參考[recent addition to the JavaScript language](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)?。
回到模擬器,按下 Cmd+R 重啟App,然后點擊‘Go’ 按鈕。你將看到網絡指示器開始轉動。同時控制臺將輸出:

網絡指示器顯示,同時要請求的URL也打印出來了。拷貝并粘貼URL到Safari,查看搜索結果。你將看到一堆JSON對象。我們將用代碼解析這些JSON對象。
> 注意: 這個App使用?[Nestoria API 來查找房子](http://www.nestoria.co.uk/help/api)。查找結果以JSON格式返回。官方文檔中列出了所有請求的URL規范及響應格式。