《React Native移动开发实战》一一3.2 完善搜索框功能——TextInput组件

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

                        {() => {

22 Alert.alert('搜索内容 ' + this.state.searchText,

                           null, null);

23 }}>

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);

13 }}>

14

                        {() => {

15 Alert.alert('搜索内容 ' + this.state.searchText,

                           null, null);

16 }}>

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所示。