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

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中的“返回”按钮可以返回到首页了。?提示：更多页面间的跳转和动画内容限于篇幅，这里不再一一详细介绍，感兴趣的读者可以自己修改代码体验效果。

相关资源：七夕情人节表白HTML源码(两款)