React Native 使用NavigationService定义全局路由

没有注册到 React Navigation的StackNavigator的组件，比如子组件，调用this.props.navigation.navigate的相关方法是无法跳转到相应的页面的，如果想在子组件中跳转到某个页面，可以在父组件把props传递到子组件里面，不过比较繁琐，其实有另一种方法是定义一个全局路由，可以在没有注册到StackNavigator的页面也可以进行路由跳转到其他页面。具体代码如下

NavigationService.js

import {NavigationActions} from 'react-navigation';

let navigator;
function setTopLevelNavigator(navigatorRef) {
    navigator = navigatorRef;
}

function navigate(routeName, params) {
    navigator.dispatch(
        NavigationActions.navigate({
            routeName,
            params
        })
    );
}

function reset(routeName) {
    const resetAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({routeName: routeName})]
    });
    navigator.dispatch(resetAction);
}
function goBack() {
    navigator.dispatch(NavigationActions.back());
}

export default {
    navigate,
    reset,
    goBack,
    setTopLevelNavigator
};

 

App.js

export default class App extends React.Component {
    render() {
        return (
            <AppContainer
                ref={navigatorRef => {
                    NavigationService.setTopLevelNavigator(navigatorRef);
                }}/>
        );
    }
}