3.2 完善搜索框功能——TextInput组件
重构代码完毕后，就可以“轻装上阵”，更快更好地为应用添加新功能了。按照之前首页结构的划分，先来看看搜索框。搜索框分为输入框和搜索按钮两部分，如图3.6所示。
图3.6 搜索框的结构
用户在输入框输入要搜索的关键字后，单击“搜索”按钮，即可按照输入框中的关键字进行搜索。
3.2.1 搜索提示框
为了实现这样的效果，可以使用TextInput组件的onChangeText()方法。当输入框内容变化时会调用此回调函数，改变后的文本内容作为参数传递，然后使用this.state.searchText保存此时的输入结果。修改app.js代码如下：
01 export default class app extends Component {
02 constructor(props) {
03 super(props);
04 this.state = {
05 searchText: '', // 保存当前输入的文本
06 // 这里省略了没有修改的代码
07 };
08 }
09
10 // 这里省略了没有修改的代码
11
12 render() {
13 return (
14
15 // 这里省略了没有修改的代码
16
17
18 onChangeText={(text) => {
19 this.setState({searchText: text});
20 }}>
21
24
25 // 这里省略了没有修改的代码
26
27 );
28 }
29
30 // 这里省略了没有修改的代码
31 }
重新加载应用，输入要搜索的内容，例如Abc，单击“搜索”按钮，此时提示框将显示输入框刚才输入的Abc，效果如图3.7所示。
图3.7 完善搜索框的功能
3.2.2 调试搜索结果
除了使用提示框查看搜索内容的方法之外，这里再介绍另一种高效的调试方法，即使用console.log将日志打印到终端控制台上。修改app.js代码如下：
01 export default class app extends Component {
02 // 这里省略了没有修改的代码
03
04 render() {
05 return (
06
07 // 这里省略了没有修改的代码
08
09
10 onChangeText={(text) => {
11 this.setState({searchText: text});
12 console.log('输入的内容是 ' + this.state.
searchText);
AI 代码解读
13 }}>
14
17
18 // 这里省略了没有修改的代码
19
20 );
21 }
22
23 // 这里省略了没有修改的代码
24 }
然后打开React Native调试选项中的Debug JS Remotely选项，选择Chrome浏览器中的Console，效果如图3.8所示。
图3.8 React Native调试的终端控制台
此时，再次输入搜索内容，例如Abc，在终端控制台中将会打印出详细日志如下：
输入的内容是 A
输入的内容是 Ab
输入的内容是 Abc
实现了完整的搜索功能之后，接下来再美化搜索框的样式。
3.2.3 优化搜索框样式
现在的输入框是直角的长方形，但是为了美观，通常应用输入框的边角都是带有一定弧度的，类似如图3.9所示的效果。
为了实现圆角边框的效果，给TextInput组件的样式添加新的属性borderWidth和borderRadius，修改app.js代码如下：
01 const styles = StyleSheet.create({
02 // 这里省略了没有修改的代码
04 input: {
05 flex: 1,
06 borderColor: 'gray',
07 borderWidth: 2,
08 borderRadius: 10
09 },
10 // 这里省略了没有修改的代码
11 });
重新加载应用后，美化后的搜索框效果如图3.10所示。
