下面我们去给搜索历史项目的前面添加一个删除按钮，按一下这个按钮可以删除掉当前这条搜索记录。先去找一下按钮 .. 在 iconfinder.com 上面可以找到一些小图标 .. 这里找到一个删除按钮 .. 打开它 .. 点击 base 64 .. 复制里面的代码 ..

回到编辑器 .. 打开 app/Assets 下面的 Icons.js .. 添加一个新的属性 .. 名字是 delete .. 它的值就是刚才复制的代码 ..

保存 .. 再打开 SearchForm.js .. 先在文件的头部导入包含小图标的模块 . . 导入进来名字是 icons . 位置是上一级目录下面的 Assets 下面的 Icons.js ..

找到显示搜索列表项目的方法 .. renderSearchHistoryList .. 在这个 View 组件里面，再添加一个组 TouchableHighlight 组件 .. 可以用它当成按钮用 .. 设置一下颜色 ... 还有这个 onPress 属性的值，也就是按下去的时候要执行的动作 .. 先用一个空白的箭头函数 ..

在它里面可以包装一个 Image 组件 .. 设置一下 source 属性 .. uri 可以使用一个小图标 .. icons.delete .. 这个图标就是一开始我们添加的那个删除小图标 .. 再给它设置一个样式 .. 名字是 styles.deleteIcon ..

打开 app/Styles/Main.js .. 在这里去添加一个样式 .. 名字是 deleteIcon .. 设置一下宽度 .. 添加一个 width 属性 .. 值设置成 20 .. 再用一个 height 设置一下高度 .. 同样设置成 20 .. 添加一个 margin .. 外边距 .. 设置成 10 .. 再给它一个 opactiy .. 把它的不透明度设置成 0.6 ..

保存 ... 再保存一下 SearchForm.js ... 现在，每个搜索历史项目的前面都会有一个删除按钮 .. 再按一下它，还不能做任何的事情 .. 在下面的视频里，我们去给它添加一个删除功能。