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: 1009 },10 // 这里省略了没有修改的代码11 });
重新加载应用后，美化后的搜索框效果如图3.10所示。
相关资源：React-Native进阶_7.TextInput实现搜索功能