ReactNative-Navigator组件简单使用

来源：互联网发布：齿轮强度校核软件编辑：程序博客网时间：2024/06/05 20:33

这里写图片描述

主要属性

configureScene function 方法，该为可选的方法进行配置页面切换动画和手势。该会通过路由和路由栈两个参数调用，进行返回一个页面参数配置对象：(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
initialRoute object 参数对象进行设置导航初始化的路由页面。路由是标识导航器渲染标识每一个页面的对象。initialRoute必须为initialRouteStack中的路由。同时initialRoute默认为initialRouteStack中路由栈的最后一项
initialRouteStack [object] 参数对象数组该是一个初始化的路由数组进行初始化。如果initalRoute属性没有设置的话，那么就必须设置initialRouteStack属性，使用该最后一项作为初始路由。如果initalRouteStack属性没有设置的话，该会生成只包含initalRoute值的数组
navigationBar node 该为可选的参数，在页面切换中用来提供一个导航栏
navigator object 该为可选参数，可以从父类导航器中获取导航器对象
onDidFoucs function 该方法已经废弃，我们可以使用navigationContext.addListener(‘didfocus’,callback)方法进行替代。该会在每次页面切换完成或者初始化之后进行调用该方法。该参数为新页面的路由
onWillFocus function 该方法已经废弃，我们可以使用navigationContext.addListener(‘willfocus’,callback)方法进行替代。该会页面每次进行切换之前调用
renderScene function 该为必须调用的方法，该用来渲染每一个路由指定的页面。参数为路由以及导航器对象两个参数，具体是方法如下:(route, navigator) =>
sceneStyle 样式风格，该继承了View视图的所有样式风格。可以参照:点击查看View样式。该设置用于每个页面容器的风格

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    View,    Text,    Navigator,    TouchableOpacity} from 'react-native';class NavigatorG extends Component {    render() {        return (            <Navigator                //路由初始化配置信息, name() component(默认组件)                initialRoute={{name: 'page1'}}                //配置动画                configureScene={this.configureScene}                //渲染场景  (重点)                renderScene={(router, navigator)=> this.renderScene(router, navigator)}            />        )    }    /**                 配置动画     *  - Navigator.SceneConfigs.PushFromRight (default)     *  - Navigator.SceneConfigs.FloatFromRight     *  - Navigator.SceneConfigs.FloatFromLeft     *  - Navigator.SceneConfigs.FloatFromBottom     *  - Navigator.SceneConfigs.FloatFromBottomAndroid     *  - Navigator.SceneConfigs.FadeAndroid     *  - Navigator.SceneConfigs.HorizontalSwipeJump     *  - Navigator.SceneConfigs.HorizontalSwipeJumpFromRight     *  - Navigator.SceneConfigs.VerticalUpSwipeJump     *  - Navigator.SceneConfigs.VerticalDownSwipeJump     */    configureScene() {        return Navigator.SceneConfigs.FloatFromRight    }    /**     *  渲染场景, router(路由) navigator(导航)参数很重要     */    renderScene(router, navigator) {        var Component = null;        switch (router.name) {            case 'page1':                Component = Page1;                break;            case 'page2':                Component = Page2;                break;            default:                Component = Page3;        }        //实质将其封装成组件返回        return <Component navigator={navigator}/>    }}class Page1 extends Component {    goPage2() {        this.props.navigator.push(            {name: 'page2'}        );    }    render() {        return (            <View style={[styles.container, {backgroundColor: 'rgba(34, 65, 66, 0.6)'}]}>                <TouchableOpacity onPress={() => this.goPage2()}>                    <Text>I am Page1</Text>                </TouchableOpacity>            </View>        )    }}class Page2 extends Component {    goPage3() {        this.props.navigator.push({name: 'page3'});    }    render() {        return (            <View style={[styles.container, {backgroundColor: 'green'}]}>                <TouchableOpacity onPress={() => this.goPage3()}>                    <Text >I am Page2</Text>                </TouchableOpacity>            </View>        )    }}class Page3 extends Component {    /**     * getCurrentRoutes()    该进行返回存在的路由列表信息     *jumpBack()             该进行回退操作  但是该不会卸载(删除)当前的页面     *jumpForward()          进行跳转到相当于当前页面的下一个页面     *jumpTo(route)          根据传入的一个路由信息，跳转到一个指定的页面(该页面不会卸载删除)     *push(route)            导航切换到一个新的页面中，新的页面进行压入栈。通过jumpForward()方法可以回退过去     *pop()                  当前页面弹出来，跳转到栈中下一个页面，并且卸载删除掉当前的页面     *replace(route)         只用传入的路由的指定页面进行替换掉当前的页面     *replaceAtIndex(route,index)               传入路由以及位置索引，使用该路由指定的页面跳转到指定位置的页面     *replacePrevious(route)                    传入路由，通过指定路由的页面替换掉前一个页面     *resetTo(route)                            进行导航到新的界面，并且重置整个路由栈     *immediatelyResetRouteStack(routeStack)   该通过一个路由页面数组来进行重置路由栈     *popToRoute(route)                        进行弹出相关页面，跳转到指定路由的页面，弹出来的页面会被卸载删除     *popToTop()                                进行弹出页面，导航到栈中的第一个页面，弹出来的所有页面会被卸载删除     */    test() {        this.props.navigator.jumpBack();    }    render() {        return (            <View style={[styles.container, {backgroundColor: 'red'}]}>                <TouchableOpacity onPress={() => this.test()}>                    <Text>I am Page3</Text>                </TouchableOpacity>            </View>        )    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    }})module.exports = NavigatorG;

0 0