react native导航navigator

看到好多人在做导航的时候，都是一个组件里面放一个navigation，这样感觉好繁琐，于是自己总结了一套，只需要在RN界面入口的地方用一次，然后，里面的子组件，都不需要在用导航组件来实现导航了。

不多BB,直接上代码：

import React, {Component} from "react";
import {Navigator, AsyncStorage} from "react-native";
import Reading from "../tiantian/container/read/reading";

export default class YunTianZhiHui extends Component {
    constructor(props) {
        super(props);
        global.orgGid = this.props.orgGid;//参数做全局保存
        global.passportGid = this.props.passportGid;//
    }
    render() {
        let defaultName = 'Reading';
        let defaultComponent = Reading;
        return (
            <Navigator
                initialRoute={{ name: defaultName, component: defaultComponent,params:{orgGid:this.props.orgGid,passportGid:this.props.passportGid}}}
                configureScene={(route,routeStack) => {               
                        return Navigator.SceneConfigs.FloatFromRight;
              }}
                interactivePopGestureEnabled={false}
                renderScene={(route, navigator) => {
                let Component = route.component;
                return <Component {...route.params} navigator={navigator} />
              }}/>
        );
    }
}

就是这样，Reading为根组件。YunTianZhiHui 为入口文件。在入口给根组件设置一个导航，那么根组件和根组件的子组件，都具有导航navigator了，就可以用它来实现导航了。这里的组件，指的是每一个视图组件。
下面看一看reading中怎么用navigator：

import React, {Component} from 'react';
import {
    ...
    Navigator,
    ...
} from 'react-native';
export default class Reading extends Component {
    
    //跳转到搜索页面
    navigatorToSearch = () => {
        this.props.navigator.push({
            component: Search,//下一个视图组件名称
            params: {//传递相关的参数
                orgGid: this.props.orgGid,
                passportGid: this.props.passportGid,
            }
        })
    }

//返回上一个页面
 navigatorToBack = () => {
        const {navigator} = this.props;
        if (navigator && navigator.getCurrentRoutes().length > 1) {
            navigator.pop();
        }    
    }

} 

没错 this.props.navigator，这直接拿来使用，在下一个Search页面也可以直接拿来使用，因为在入口文件YunTianZhiHui这个类中的
<Component {...route.params} navigator={navigator} />，已经为子类（姑且就叫子类吧，一时不知道叫什么名字）页面的每一个页面指定了属性navigator。