Reactjs 未经授权的导航不适用于react native？

问题：

我已经在其中创建了一个react本机应用程序，我正在检查是否未经授权我正在删除异步存储并重定向到登录。为了方便地处理Axios，我创建了一个HTTP客户端文件，如下所示

import axios from "axios";
import { AsyncStorage } from "react-native";
import { NavigationActions } from 'react-navigation';

// TODO: Replace this with actual JWT token from Keycloak
axios.defaults.headers.post["Content-Type"] = "application/json";



// Create axios instance for api calls
var instance = null;

export const setAuth = async () => {
  const token = await AsyncStorage.getItem("jwt");
  instance = axios.create({
    baseURL: "",
    timeout: 150000,
    headers: {
      Authorization: "Bearer " + token,
      "Content-Type": "application/json"
    }
  });
  instance.interceptors.response.use(
    function(response) {
      return response;
    },
    async function(error) {
      console.log(error);
      if (error.response.status) {
          if (error.response.status === 401) {
            AsyncStorage.removeItem('jwt')
            AsyncStorage.removeItem("user");
            NavigationActions.navigate({
              routeName: 'login'
            });
          } else {
            return error;
          }
        }
    }
  );
};

export const Get = (route, data) => {
  function getData() {
    return instance.get(
      route,
      data == null ? { data: {} } : { data: JSON.stringify(data) }
    );
  }
  if (instance) return getData();
  return setAuth().then(getData);
};

export const Post = (route, data) => {
  function postData() {
    return instance.post(route, JSON.stringify(data));
  }
  if (instance) return postData();
  return setAuth().then(postData);
};

import React from "react";
// import Login from "./src/components/Login/Login";
// import Register from "./src/components/Register/Register";
import Route from "./src/route";
import { Provider } from "react-redux";
import { createLogicMiddleware } from "redux-logic";
import { createStore, applyMiddleware, compose } from "redux";
import NavigationService from "./src/services/navigationService";

import reducers from "./src/reducers";
import services from "./src/services";

const logicMiddleware = createLogicMiddleware(services, {});

const middleware = applyMiddleware(logicMiddleware);

const composeEnhancers = compose;

const enhancer = composeEnhancers(middleware);

let store = createStore(reducers, enhancer);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Route
          // ref={navigatorRef => {
          //   NavigationService.setNavigator(navigatorRef);
          // }}
        ></Route>
      </Provider>
    );
  }
}

我正在redux逻辑函数中访问此HTTP客户端文件。所以这是在组件之外。我现在面临的问题是，它正在删除异步存储，但导航似乎无法正常工作

我是如何创建路线的

import React, { Component } from "react";
import { createAppContainer } from "react-navigation";
// import { createStackNavigator } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createStackNavigator } from "react-navigation-stack";
import IonIcon from "react-native-vector-icons/Ionicons";
import { Image } from "react-native";

import LoginScreen from "./components/Login/Login";
import HomeScreen from "./components/Home/Home";
import SettingsScreen from "./components/Settings/Settings";
import FinesScreen from "./components/Fines/Fines"
import ChangePassword from "./components/Changepassword/Changepassword";

const SettingsTab = createStackNavigator(
    {
      settings: { screen: SettingsScreen },
      changePassword: { screen: ChangePassword }
    },
    {
      initialRouteName: "settings",
      headerMode: "none"
    },
    (navigationOptions = {
      headerMode: "none"
    })
  );

  const TabNav = createBottomTabNavigator(
    {
      home: {
        screen: HomeScreen,

        navigationOptions: {
          tabBarLabel: false,
          tabBarIcon: () => (
            <Image source={require("../assets/invalid-name.png")} />
          )
        }
      },
      fines: {
        screen: FinesScreen,
        navigationOptions: {
          tabBarLabel: false,
          headerMode: "none",
          tabBarIcon: () => (
            <Image source={require("../assets/icon-service-fines.jpg")} />
          )
        }
      },
      settings: {
        screen: SettingsTab,
        navigationOptions: {
          tabBarLabel: false,
          headerMode: "none",
          tabBarIcon: () => <Image source={require("../assets/settings.png")} />
        }
      }
    },
    {
      tabBarPosition: "bottom",
      swipeEnabled: true,
      animationEnabled: true,
      tabBarOptions: {
        activeTintColor: "#FFFFFF",
        inactiveTintColor: "#F8F8F8",
        borderTopColor: "transparent",
        style: {
          backgroundColor: "#fffff",
          borderTopColor: "transparent",
          paddingTop: 0
        },
        indicatorStyle: {
          borderBottomColor: "#87B56A",
          borderBottomWidth: 2
        },
        tabStyle: {
          justifyContent: "center"
        }
      }
    }
  );

  const MainNavigator = createStackNavigator(
    {
      login: { screen: LoginScreen },
      tab: { screen: TabNav }
    },
    {
      initialRouteName: "login",
      headerMode: "none"
    },
    (navigationOptions = {
      headerMode: "none"
    })
  );

  const AppContainer = createAppContainer(MainNavigator);

  export default AppContainer;

import React，{Component}来自“React”；
从“react navigation”导入{createAppContainer}；
//从“反应导航”导入{createStackNavigator}；
从“反应导航选项卡”导入{CreateBoottomTabNavigator}；
从“反应导航堆栈”导入{createStackNavigator}；
从“反应本机向量图标/Ionicons”导入IonIcon；
从“react native”导入{Image}；
从“/components/Login/Login”导入登录筛选；
从“/components/Home/Home”导入主屏幕；
从“/components/Settings/Settings”导入设置屏幕；
从“/components/Fines/Fines”导入FinesScreen
从“/components/ChangePassword/ChangePassword”导入ChangePassword；
const SettingsTab=createStackNavigator(
{
设置：{屏幕：设置屏幕}，
更改密码：{屏幕：更改密码}
},
{
initialRouteName：“设置”，
headerMode：“无”
},
（导航选项={
headerMode：“无”
})
);
const TabNav=createBottomTabNavigator(
{
主页：{
屏幕：主屏幕，
导航选项：{
tabBarLabel:false，
tabBarIcon:（）=>(
)
}
},
罚款：{
屏幕：精细屏幕，
导航选项：{
tabBarLabel:false，
headerMode:“无”，
tabBarIcon:（）=>(
)
}
},
设置：{
屏幕：设置Stab，
导航选项：{
tabBarLabel:false，
headerMode:“无”，
tabBarIcon:（）=>
}
}
},
{
tabbar位置：“底部”，
是的，
animationEnabled：没错，
选项卡选项：{
activeTintColor:#FFFFFF“，
InactiveIntColor:#F8F8“，
borderTopColor:“透明”，
风格：{
背景颜色：“fffff”，
borderTopColor:“透明”，
paddingTop:0
},
指标类型：{
边框底部颜色：#87B56A“，
边框宽度：2
},
标签样式：{
为内容辩护：“中心”
}
}
}
);
const MainNavigator=createStackNavigator(
{
登录：{screen:LoginScreen}，
选项卡：{screen:TabNav}
},
{
initialRouteName:“登录”，
headerMode：“无”
},
（导航选项={
headerMode：“无”
})
);
const AppContainer=createAppContainer（MainNavigator）；
导出默认AppContainer；

我在app.js文件中这样使用了它

import axios from "axios";
import { AsyncStorage } from "react-native";
import { NavigationActions } from 'react-navigation';

// TODO: Replace this with actual JWT token from Keycloak
axios.defaults.headers.post["Content-Type"] = "application/json";



// Create axios instance for api calls
var instance = null;

export const setAuth = async () => {
  const token = await AsyncStorage.getItem("jwt");
  instance = axios.create({
    baseURL: "",
    timeout: 150000,
    headers: {
      Authorization: "Bearer " + token,
      "Content-Type": "application/json"
    }
  });
  instance.interceptors.response.use(
    function(response) {
      return response;
    },
    async function(error) {
      console.log(error);
      if (error.response.status) {
          if (error.response.status === 401) {
            AsyncStorage.removeItem('jwt')
            AsyncStorage.removeItem("user");
            NavigationActions.navigate({
              routeName: 'login'
            });
          } else {
            return error;
          }
        }
    }
  );
};

export const Get = (route, data) => {
  function getData() {
    return instance.get(
      route,
      data == null ? { data: {} } : { data: JSON.stringify(data) }
    );
  }
  if (instance) return getData();
  return setAuth().then(getData);
};

export const Post = (route, data) => {
  function postData() {
    return instance.post(route, JSON.stringify(data));
  }
  if (instance) return postData();
  return setAuth().then(postData);
};

import React from "react";
// import Login from "./src/components/Login/Login";
// import Register from "./src/components/Register/Register";
import Route from "./src/route";
import { Provider } from "react-redux";
import { createLogicMiddleware } from "redux-logic";
import { createStore, applyMiddleware, compose } from "redux";
import NavigationService from "./src/services/navigationService";

import reducers from "./src/reducers";
import services from "./src/services";

const logicMiddleware = createLogicMiddleware(services, {});

const middleware = applyMiddleware(logicMiddleware);

const composeEnhancers = compose;

const enhancer = composeEnhancers(middleware);

let store = createStore(reducers, enhancer);

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Route
          // ref={navigatorRef => {
          //   NavigationService.setNavigator(navigatorRef);
          // }}
        ></Route>
      </Provider>
    );
  }
}

从“React”导入React；
//从“/src/components/Login/Login”导入登录名；
//从“/src/components/Register/Register”导入寄存器；
从“/src/Route”导入路由；
从“react redux”导入{Provider}；
从“redux逻辑”导入{createLogicMiddleware}；
从“redux”导入{createStore，applyMiddleware，compose}；
从“/src/services/NavigationService”导入导航服务；
从“/src/reducers”导入减速机；
从“/src/services”导入服务；
const logicMiddleware=createLogicMiddleware（服务，{}）；
const middleware=applyMiddleware（逻辑中间件）；
const composeinhancers=合成；
const enhancer=composenhancers（中间件）；
let store=createStore（还原器、增强器）；
导出默认类App扩展React.Component{
render（）{
返回(
{
//NavigationService.setNavigator（navigatorRef）；
// }}
>
);
}
}

---

有人能帮我解决这个问题吗？多谢各位

NavigationActions返回可以使用navigation.dispatch（）方法发送到路由器的对象

您可以通过多种方式实现解决方案。在这里，我要解释没有道具

首先，您需要创建一个服务

        let _navigator;

        function setNavigator(navRef) {
          _navigator = navRef;
        }

        function navigate(navAction) {
          _navigator.dispatch( 
             navAction
          );
        }

        // add other navigation functions that you need and export them

        export default {
          navigate,
          setNavigator,
        };

应用内容器为创建引用

<AppContainer
                ref={navigatorRef => {
                  NavigationService.setNavigator(navigatorRef);
                }}
              />

---

问题在于，我没有像您提到的那样直接创建应用程序容器。我以不同的方式创建navigator对象，然后像这样创建应用程序容器<代码>常量AppContainer=createAppContainer（MainNavigator）；导出默认AppContainer然后我像这样访问app.js文件。我将APPcontainer作为路由导入app.js文件，并像这样使用app.js文件。

你能帮我解决这个问题吗？提前谢谢