《React Native移动开发实战》一一3.7 二级页面的跳转—

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

（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    }

在使用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    });

为了实现“返回”按钮功能，除了本书前面介绍的Button和TouchableHighlight组件，这里使用了一个类似TouchableHighlight的新组件TouchableOpacity。TouchableOpacity同样用于封装组件，使其可以正确响应触摸操作。除此之外，React Native的Touchable*组件还有TouchableNativeFeedback以及TouchableWithoutFeedback，它们到底有什么区别呢？
? TouchableHighlight：单击该组件后，该组件的不透明度会降低同时会看到相应的颜色（视图变暗或者变亮）。
? TouchableOpacity：单击该组件后，封装的组件的不透明度会降低。这个过程并不会真正改变组件层级，大部分情况下很容易添加到应用中而不会带来副作用。
? TouchableNativeFeedback：只支持Android平台，在Android平台上该组件可以使用原生平台的状态资源来显示触摸状态变化。
? TouchableWithoutFeedback：单击该组件后，该组件没有任何反应和变化，所以不推荐使用。
此时，重新加载应用，然后单击图3.30中的“返回”按钮可以返回到首页了。
?提示：更多页面间的跳转和动画内容限于篇幅，这里不再一一详细介绍，感兴趣的读者可以自己修改代码体验效果。