1. 程式人生 > >ReactNavtive框架教程(6)(完)

ReactNavtive框架教程(6)(完)

注意:所有圖片放在了百度相簿空間,如果你看不到圖片,請複製圖片URL,然後貼上到位址列中進行檢視。

根據位置查詢

在Xcode中開啟 Info.plist ,右鍵,Add Row,增加一個key。 使用NSLocationWhenInUseUsageDescription 作為鍵名,使用
PropertyFinder would like to use your location to find nearby properties作為鍵值。
這裡寫圖片描述

這個key用於提示使用者允許App使用他們的當前位置。
開啟 SearchPage.js, 找到TouchableHighlight 中渲染 ‘Location’ 按鈕的程式碼,加入下列屬性值:

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

這樣,當點選Location按鈕,會呼叫 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中,這對於曾經在瀏覽器中使用過位置服務的人來說並不陌生。React Native 框架用本地iOS服務重新實現了這個API。
如果當前位置獲取成功,我們將呼叫第一個箭頭函式,否則呼叫第二個箭頭函式,我們簡單顯示錯誤資訊。
因為我們修改了plist檔案,因此我們需要重新啟動App,而不能僅僅是Cmd+R了。請在Xcode中終止App,然後重新編譯執行App。
在使用基於地理定位的搜尋之前,我們需要指定一個Nestoria資料庫中的預設位置。在模擬器選單中,選擇Debug\Location\Custom Location … 然後輸入 55.02的緯度和-1.42的經度。這是一個位於英格蘭北部的海邊小鎮。
這裡寫圖片描述

Ray注:
在我們測試過程中,地理定位查詢有時有效,有時無效,有時候我們授權App使用地理定位後仍然會報許可權錯誤。我們不知道這是為什麼,可能是React
Native自身的問題吧!如果讀者遇到同樣的問題並找出原因,請告知我們。

唉,儘管這裡的房屋價格不像倫敦那麼貴—但也不是我所能承受的:]