react native，如何在网络请求中跳转页面

如何解决react native，如何在网络请求中跳转页面

我想在服务器返回401状态码时跳转到登录页面，我应该在哪里设置

我的 app.js：

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


const Stack = createStackNavigator();
class App 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>

      )
    }
}

export default App ;

我有一个 request.js 来处理所有请求

每个页面都会使用这个 axios 实例来发送请求

例如

/pages/test

import {test} from './request.js'
import React,{Component} from 'react';

export default class Test extends Component {
  componentDidMount(){
    test()
  }
}

请求.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){
      /*
        *** jump page
      */
    }
    return Promise.reject(error);
  },);

export function test() {
  return instance.get('/test');
}

解决方法

首先，新建一个名为RootNavigation.js的文件：

import React from 'react';

export const navigationRef = React.createRef();

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

然后，在app.js中导入，然后在app.js的NavigationContainer中添加ref={navigationRef}

import { navigationRef } from './RootNavigation';

// ...

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

      )
    }
}

最后像这样修改request.js

import * as RootNavigation from './RootNavigation';

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

完成，有效