React Native 开发系列2 实现搜索

react-native | Comments

一个语言学习的app里,随处都需要调用API来完成各种任务,搜索单词、获取最新的帖子、同步数据,第二篇就准备开始实现最基本的查词功能。

目录

  1. 项目搭建 – 底部导航栏及搜索
  2. 实现搜索 – 调用API及自定义组件
  3. 登录注册 – 使用cookies

1. 使用fetch调用API

上一篇中,已经在首页放置了一个搜索框,通过自定义onChangeText={this.setSearchText.bind(this)},我们可以实现在搜索框中有文字变化时,触发我们的函数执行搜索。 拿到输入的文字后,就需要调用API来查词并显示结果。

React Native里提供了Fetch API来发起网络请求,类似浏览器里面的XMLHttpRequest或者说更多人熟悉jquery。 详细的使用方法可以参考Mozilla提供的Fetch API使用指南

App中搜索单词的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
fetch("https://souka.io/vocab/entry/?word="+query, {
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
})
.then((response) => response.json())
.then((data) => {
  this.setState({searchResult: data});
})
.catch((error) => {
  console.warn(error);
});

我的服务器的API需要使用json方式调用,所以声明了一下header,获取到搜索结果后通过this.setState({searchResult: data})通知UI进行渲染。

2. 使用自定义组件

React Native或者说React最吸引人的一点,在我看来就是可以自定义组件,通过把UI分解成可以重用的组件层级,组合不同的组件来完成UI的开发。使用props实现组件间传递数据,state来触发更新,的确是一个适合用来写用户界面的JS框架。

组件化就类似把html里面的一个<div class="ComponentName">...</div>变成<Component>...</Component>, 除了和html里一样可以写针对这个组件的样式外,component上也会提供一些hook函数来完成在被加载、状态更新时需要执行的代码,

上面拿到搜索结果后,下一步就就是把结果渲染出来。可以先用一个简单的ListView来实现,不过在使用React开发过程中,这种时候就应该考虑一下,这个功能是不是应该写一个通用的组件来完成,这样以后有同样的需求就能重用代码,也方便对这个组件做一些样式的修改,而不是把代码都放在一个文件中。虽然这里的功能并不是很复杂,一个ListView就能搞定,我还是写了一个SearchResult来展示搜索结果。

Home中import组件后,放在SearchBar下面,组件里面可以通过props拿到搜索结果,当搜索结果有变化时,组件也会自动更新。

1
<SearchResult dataSource={this.state.searchResult} />

现在已经可以搜索单词了

完整的代码见GitHub day2

Comments