ReactNative-Navigator组件简单使用

主要属性

• 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;