ReactNative Navigator 页面跳转

最新推荐文章于 2021-08-18 16:14:45 发布

Carlos.Guo

最新推荐文章于 2021-08-18 16:14:45 发布

阅读量588

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ReactNative 文章标签： Navigator 页面跳转

本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/73648276

ReactNative 专栏收录该内容

18 篇文章

订阅专栏

本文介绍使用 React Native 的 Navigator 组件实现页面跳转的方法。包括设置路由对象、配置场景渲染及渲染场景三个步骤，通过实例展示了从一个页面跳转到另一个页面的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactNative Navigator 页面跳转

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
} from 'react-native';
import {Navigator} from "react-native-deprecated-custom-components"

/*** Navigator 跳转
 * 导航器通过路由对象router来分辨不同的场景，每一个路由对象都对应一个页面组件
 * 开发者设置什么，导航器显示什么，若以router是导航其中重要的一个对象
 *
 * 三步操作实现导航功能：
 *
 * 1、设置路由对象（告诉导航器 我要显示那个页面）
 *  创建路由对象，对象的内容自定义，但是必须包含 该场景需要展示的页面组件
 *
 *  2、场景渲染设置（告诉导航器我要什么养的页面跳转结果）
 *
 *  3、渲染场景（告诉导航器如何渲染界面）
 *  利用第一步设置的路由对象进行渲染场景
 */

//定义 第一个页面
//     firstPage 一个button 点击进入下一集页面
let FirstPage = React.createClass({
    //按钮onPress事件处理方法
    pressPush: function () {
        //退出下一级页面
        let nextRoute = {
            component: SeconPage
        }
        this.props.navigator.push(nextRoute);
    },
    render: function () {
        return (
            <View style={[styles.flex, {backgroundColor: "yellow"}]}>
                <TouchableOpacity
                    style={styles.btn}
                    onPress={this.pressPush}>
                    <Text>点击下一级页面</Text>

                </TouchableOpacity>
            </View>
        );

    }

});

//定义第二个页面
// SeconPage 一个button 点击返回上一级页面

let SeconPage = React.createClass({
    pressPop: function () {
        //返回上级页面
        this.props.navigator.pop();
    },
    render: function () {
        return (
            <View style={[styles.flex, {backgroundColor: "cyan"}]}>
                <TouchableOpacity
                    style={styles.btn}
                    onPress={this.pressPop}
                >
                    <Text>点击跳回去</Text>
                </TouchableOpacity>
            </View>
        );
    }
});


let MyNavigator = React.createClass({
    render: function () {
        let rootRoute = {
            component: FirstPage
        };
        return (
            <Navigator
                /*
                 第一步：
                 initialRoute
                 这个制定了默认的页面，也就是启动app之后看到页面的第一屏
                 对象的属性是自定义的，这个对象中的内容会在renderScene方法处理
                 注意：必须包含的属性 即component,表示需要渲染的页面组件

                 */
                initialRoute={rootRoute}
                /**
                 * 第二步
                 * configureScene
                 * 场景渲染的配置
                 */
                configureScene={(route) => {
                    return Navigator.SceneConfigs.PushFromRight;
                }}
                /**
                 * 第三步
                 * renderScene
                 * 渲染场景
                 *
                 * 参数： route（第一步创建并设置给导航器路由对象）navigator（导航器）
                 * 实现：给需要显示的组件设置属性
                 */
                renderScene={(route, navigator) => {
                    //从route对象中回去页面组件
                    let Component = route.component;
                    return (
                        <Component
                            navigator={navigator}
                            route={route}
                        />
                    );
                }}
            />
        );
    }
});

let styles = StyleSheet.create({
    flex: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    },
    btn: {
        width: 150,
        height: 30,
        borderColor: "#0089FF",
        borderRadius: 3,
        borderWidth: 1,
        justifyContent: "center",
        alignItems: "center"
    }
});

module.exports = MyNavigator;