《React Native移动开发实战》一一3.7 二级页面的跳转——TouchableOpacity组件-阿里云开发者社区

开发者社区> 华章出版社> 正文
登录阅读全文

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

简介: 本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第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所示。
image

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
最新文章
相关文章
展开
官网链接