看到好多人在做導(dǎo)航的時(shí)候，都是一個(gè)組件里面放一個(gè)navigation，這樣感覺(jué)好繁瑣，于是自己總結(jié)了一套，只需要在RN界面入口的地方用一次，然后，里面的子組件，都不需要在用導(dǎo)航組件來(lái)實(shí)現(xiàn)導(dǎo)航了。

不多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;//參數(shù)做全局保存
        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 為入口文件。在入口給根組件設(shè)置一個(gè)導(dǎo)航，那么根組件和根組件的子組件，都具有導(dǎo)航navigator了，就可以用它來(lái)實(shí)現(xiàn)導(dǎo)航了。這里的組件，指的是每一個(gè)視圖組件。
下面看一看reading中怎么用navigator：

import React, {Component} from 'react';
import {
    ...
    Navigator,
    ...
} from 'react-native';
export default class Reading extends Component {
    
    //跳轉(zhuǎn)到搜索頁(yè)面
    navigatorToSearch = () => {
        this.props.navigator.push({
            component: Search,//下一個(gè)視圖組件名稱
            params: {//傳遞相關(guān)的參數(shù)
                orgGid: this.props.orgGid,
                passportGid: this.props.passportGid,
            }
        })
    }

//返回上一個(gè)頁(yè)面
 navigatorToBack = () => {
        const {navigator} = this.props;
        if (navigator && navigator.getCurrentRoutes().length > 1) {
            navigator.pop();
        }    
    }

} 

沒(méi)錯(cuò) this.props.navigator，這直接拿來(lái)使用，在下一個(gè)Search頁(yè)面也可以直接拿來(lái)使用，因?yàn)樵谌肟谖募unTianZhiHui這個(gè)類中的
<Component {...route.params} navigator={navigator} />，已經(jīng)為子類（姑且就叫子類吧，一時(shí)不知道叫什么名字）頁(yè)面的每一個(gè)頁(yè)面指定了屬性navigator。