如何在反应组件外部使用反应导航进行导航？

Question

我正在构建一个代码来检查 access_token 或 refresh_token 是否有效。我正在使用 axios 拦截器来检查响应以生成新令牌。

如何在axios拦截器中使用navigation(React Navigation)？

错误：

09:53:55.852 client_log FarmsList:React.FC -> 错误 [错误：无效 挂机电话。钩子只能在函数体内调用 零件。这可能由于以下原因之一发生

     axios.interceptors.response.use(
          (response) => {
            return response
          },
          async (error) => {
            const navigation = useNavigation()
            const originalRequest = error.config
            const accessToken = await getAccessToken()
            const refreshToken = await getRefreshToken()
        if (
          error.response.status === 400 &&
          originalRequest.url === connectTokenUrl &&
          accessToken
        ) {
          removeConnectToken()
          navigation.navigate('SignIn')
          return Promise.reject(error)
        }
    
        if (error.response.status === 401 && !originalRequest._retry) {
          originalRequest._retry = true
          console.log('entrou 401')
          if (!refreshToken) {
            navigation.navigate('SignIn')
            return Promise.reject(error)
          }
    
          const data = {
            grant_type: 'refresh_token',
            client_id: 'xxx',
            refresh_token: refreshToken,
          }
          const formData = new FormData()
          _.forEach(data, (value, key) => {
            formData.append(key, value)
          })
    
          return axios({
            method: 'post',
            url: connectTokenUrl,
            data: formData,
            headers: {'Content-Type': 'multipart/form-data'},
          }).then((response) => {
            const {access_token, refresh_token} = response.data
            connectToken(access_token, refresh_token)
            axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`
            return axios(originalRequest)
          })
        }
        return Promise.reject(error)
      },
    )

Answer 1

有几种方法可以访问导航之外的导航道具。

1. useNavigation 钩子：用于从导航容器下的功能组件访问导航道具的场景。例如：屏幕内的导航按钮。

2. navigationRef：用于在导航外访问导航的场景，用于redux中间件等场景。

您应该在这种情况下使用 navgation ref 并执行您的导航操作。您可以使用 RootNavigation.js 并调用导航操作。

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}

// RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

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

Answer 2

您的导航参数在哪里？如果您可以向我展示更多您的代码（您的完整组件）会有所帮助，您可能会在功能组件之外调用一些钩子