牛骨文教育服务平台(让学习变的简单)

为了实现搜索功能,我们需要处理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类,因此被定义为函数而不是方法。它首先将keyvalue参数以键值对形式放到了data集合中,然后将data集合转换成以&符分隔的“键=值”形式。=>语法是箭头函数的写法,一种创建匿名函数简洁写法,具体请参考recent addition to the JavaScript language 。

回到模拟器,按下 Cmd+R 重启App,然后点击‘Go’ 按钮。你将看到网络指示器开始转动。同时控制台将输出:

网络指示器显示,同时要请求的URL也打印出来了。拷贝并粘贴URL到Safari,查看搜索结果。你将看到一堆JSON对象。我们将用代码解析这些JSON对象。

注意: 这个App使用 Nestoria API 来查找房子。查找结果以JSON格式返回。官方文档中列出了所有请求的URL规范及响应格式。