(RN笔记)react-navigation 6.x 5.x及以下全局路由

需求：子组件跳转页面 或者需要根据接口的返回来跳转页面 虽然可以把this.props.navigation传过来 但是用多了就很麻烦 而且我也没有集成 redux 传递自己的navigation prop 

我的解决方案 可以通过ref访问根目录，将其传递给我们用来导航的NavigationService。

操作：

先定义一个 NavigationService.js 文件

6.x

import { CommonActions, StackActions } from "@react-navigation/native";
let navigator;
function setTopLevelNavigator(navigatorRef) {
  navigator = navigatorRef;
}

function navigate(routeName, params = {}) {
  navigator.dispatch(
    CommonActions.navigate({
      name: routeName,
      params: params,
    })
  );
}

function reset(routeName, params = {}) {
  navigator.dispatch(
    CommonActions.reset({
      index: 0,
      routes: [
        {
          name: routeName,
          params: params,
        },
      ],
    })
  );
}
function replace(routeName, params = {}) {
  navigator.dispatch(StackActions.replace(routeName, params));
}
function goBack() {
  navigator.dispatch(CommonActions.goBack());
}

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

5.x及以下

import { CommonActions, StackActions } from '@react-navigation/native';
//5.x以下import { NavigationActions ,StackActions} from 'react-navigation';

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

function navigate (routeName, params = {}) {
    navigator.dispatch(
        CommonActions.navigate({
            name: routeName,
            params: params
        })
    );
}

function reset (routeName) {
    navigator.dispatch(
        StackActions.replace(routeName)
    )
    // 5.x以下
    // const resetAction = StackActions.reset({
    //     index: 0,
    //     actions: [NavigationActions.navigate({ routeName })]
    //   });
    //   navigation.dispatch(resetAction);
}


function goBack () {
    navigator.dispatch(CommonActions.back());
}

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

App.js 

添加ref={navigatorRef => {
      NavigationService.setTopLevelNavigator(navigatorRef);
    }}

// App.js
 
import NavigationService from './src/utils/NavigationService'
 
 
class App extends React.Component {  
 
// ...
 
  render() {       
    return (      
      <NavigationContainer ref={navigatorRef => {
      NavigationService.setTopLevelNavigator(navigatorRef);
    }}>
      <Stack.Navigator>
        <Stack.Screen name="index" component={index} />
        <Stack.Screen name="Three" component={ThreeScreen} />
        <Stack.Screen name="Four" component={FourScreen} />
      </Stack.Navigator>
    </NavigationContainer>
    );
  }
}

使用

import NavigationService from './NavigationService'

//跳转 
NavigationService.navigate('Login');
//重置
NavigationService.reset('Login');