时间戳

首页 > 解决方案 > 如何在反应组件外部使用反应导航进行导航？

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

问题描述

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

如何在 axios 拦截器中使用导航（反应导航）？

错误：

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)
      },
    )

标签： react-native

解决方案

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

  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>
  );
}

// 根导航.js

import * as React from 'react';

export const navigationRef = React.createRef();

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

推荐阅读