react native怎么页面跳转

Question

app.js

...
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Test from './pages/test'
import Login from './pages/login'
...

class Nav extends Component{
  render(){
      return(
          <NavigationContainer>
            <Stack.Navigator initialRouteName="Test" headerMode="none">
              <Stack.Screen name="Test" component={Test} />
              <Stack.Screen name="Login" component={Login} />
              ...
            </Stack.Navigator>
          </NavigationContainer>

      )
    }
}

我有一个专门负责请求的request.js

request.js

import axios from 'axios';
const instance = axios.create({
  baseURL: 'http://192.168.10.10:51000',
});
instance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if(error.response.status === 401){
      /*
        *** 跳转页面
      */
    }
    return Promise.reject(error);
  },
);

我想当服务器返回401状态码的时候跳转到Login页面，该如何操作？

Answer 1

新建一个文件，比如：RootNavigation.js，假设现在这三个文件处于同一级：

import React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
    navigationRef.current?.navigate(name, params);
}

app.js：

import { navigationRef } from './RootNavigation';

// ...

class Nav extends Component{
  render(){
      return(
          <NavigationContainer ref={navigationRef}>
            
          </NavigationContainer>

      )
    }
}

request.js：

import * as RootNavigation from './RootNavigation';

// ...
if(error.response.status === 401){
    RootNavigation.navigate('Login');
}