3.7 二级页面的跳转——TouchableOpacity组件
理解了Navigator的基本用法之后，下一步，添加一个新的组件，以便实现二级页面跳转的效果。
（1）添加新的文件detail.js，并在该文件中创建detail组件，代码如下：
01 import React, {Component} from 'react';
02 import {StyleSheet, View, Text} from 'react-native';
03
04 export default class detail extends React.Component {
05 render() {
06 return (
07 <View style={styles.container}>
08 <Text style={styles.text}>
09 详情页面
10 </Text>
11 </View>
12 );
13 }
14 }
15
16 const styles = StyleSheet.create({
17 container: {
18 flex: 1,backgroundColor: 'gray',
19 justifyContent: 'center',
20 alignItems: 'center'
21 },
22 text: {
23 fontSize: 20
24 }
25 });
AI 代码解读
（2）在首页中修改按钮响应，添加跳转到下一个页面的入口。修改home.js中_renderRow的代码如下：
01 export default class home extends React.Component {
02 // 这里省略了没有修改的代码
03
04 _renderRow = (rowData, sectionID, rowID) => {
05 return (
06 <TouchableHighlight onPress={() => {
07 const {navigator} = this.props; // 从props获取navigator
08 if (navigator) {
09 navigator.push({name: 'detail', component: Detail});
10 }
11 }}>
12 <View style={styles.row}>
13 <Image source={rowData.image}
14 style={styles.productImage}></Image>
15 <View style={styles.productText}>
16 <Text style={styles.productTitle}>{rowData.title}
</Text>
17 <Text style={styles.productSubTitle}>{rowData.
subTitle}</Text>
18 </View>
19 </View>
20 </TouchableHighlight>
21 );
22 }
23 }
AI 代码解读
在使用this.props.navigator获取Navigator之后，可以使用Navigator的如下接口来进行场景的切换。
? push(route)：跳转到新的场景，并且将场景入栈。
? pop：跳转到上一个场景，并且将当前场景出栈。
? popToRoute(route)：pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景都将会被卸载。
? popToTop()：pop到栈中的第一个场景，卸载其他的所有场景。
? replace(route)：用一个新的路由替换掉当前场景。
? replaceAtIndex(route, index)：替换指定序号的路由场景。
? replacePrevious(route)：替换上一个场景。
? 其他方法：jumpBack()、jumpForward()、jumpTo(route)以及resetTo(route)等。
此时重新加载应用，然后单击商品列表，这样就可以跳转到下一个页面了，如图3.29所示。
图3.29 二级详情页面
（3）那么如何返回到上一个页面呢？答案就是使用Navigator的pop()方法。修改detail.js代码如下：
01 import React, {Component} from 'react';
02 import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';
03
04 export default class detail extends React.Component {
05 render() {
06 return (
07 <View style={styles.container}>
08 <TouchableOpacity onPress={this._pressBackButton.bind
(this)}>
09 <Text style={styles.back}>返回</Text>
10 </TouchableOpacity>
11 <Text style={styles.text}>
12 详情页面
13 </Text>
14 </View>
15 );
16 }
17
18 _pressBackButton() {
19 const {navigator} = this.props;
20 if (navigator) {
21 navigator.pop();
22 }
23 }
24 }
25
26 const styles = StyleSheet.create({
27 // 这里省略了没有修改的代码
28 back: {
29 fontSize: 20,
30 color: 'blue'
31 }
32 });
AI 代码解读
为了实现“返回”按钮功能，除了本书前面介绍的Button和TouchableHighlight组件，这里使用了一个类似TouchableHighlight的新组件TouchableOpacity。TouchableOpacity同样用于封装组件，使其可以正确响应触摸操作。除此之外，React Native的Touchable*组件还有TouchableNativeFeedback以及TouchableWithoutFeedback，它们到底有什么区别呢？
? TouchableHighlight：单击该组件后，该组件的不透明度会降低同时会看到相应的颜色（视图变暗或者变亮）。
? TouchableOpacity：单击该组件后，封装的组件的不透明度会降低。这个过程并不会真正改变组件层级，大部分情况下很容易添加到应用中而不会带来副作用。
? TouchableNativeFeedback：只支持Android平台，在Android平台上该组件可以使用原生平台的状态资源来显示触摸状态变化。
? TouchableWithoutFeedback：单击该组件后，该组件没有任何反应和变化，所以不推荐使用。
此时，重新加载应用，然后单击图3.30中的“返回”按钮可以返回到首页了。
?提示：更多页面间的跳转和动画内容限于篇幅，这里不再一一详细介绍，感兴趣的读者可以自己修改代码体验效果。
