触摸按下某个地方的时候，这个地方的视图会变成半透明的，然后露出下面的底色。这个是 TouchableHighlight 组件的功能。比如你可以在某个内容列表里的项目上应用一个这样的组件，按下去的时候会高亮显示，给用户的动作一个回馈。然后你可以绑定一些动作，比如打开详细的内容页面等等。

下面我们在这个列表视图的项目上应用一个 TouchableHighlight 组件 .. 打开 app .. Components .. MovieList.js .. 先在文件的顶部导出这个组件 ... 输入一个 TouchableHighlight .. 然后用这个组件包装一下要高亮显示的东西 .. 这里每个项目的视图是在这个 renderMovieList 方法里面 ..

输入一组 TouchableHighlight .. 保存 .. 列表里的某个项目 ... 它会变成半透明的，然后露出默认的底色 .. 这个颜色我们可以去修改一下 .. 这里，添加一个 underlayColor 属性 .. 它的值是一个颜色，可以使用 rgba 去表示这个颜色 .. 前三位是红，绿，蓝的比例 .. 最后再设置一下不透明度 ..

下面我们再简单的修改一下样式，打开 Styles 下面的 Main.js .. 找到 item 这个样式 .. 把这个 marginBottom 改成 paddingTop .. 保存 ..

再按一下列表里的某个项目 .. 现在这个高亮的效果更自然一些。 在这个组件上面我们可以绑定一些动作 .. 回到编辑器 .. 关掉这个样式 .. 找到 MovieList 里面的使用 TouchableHighlight 组件的地方 .. 先整理一下 ... 然后在上面添加一个 onPress .. 按下去的时候，会执行这个属性指定的动作 ..

用一个箭头函数 .. 先简单的在控制台上输出点东西 .. console.log .. 用一个字符串模板 .. movie.title 输出的是电影的标题 .. 后面加上 被点了 ..

保存 .. 回到模拟器 .. 打开项目的开发菜单 .. 选择 debug in chrome ... 打开浏览器的控制台 ..

然后再按一下列表视图里的某个项目 ... 这样会高亮显示被按的项目 .. 在控制台上会输出被点的电影项目的标题加上被点了这几个字儿 ..

https://facebook.github.io/react-native/docs/touchablehighlight.html#con...