如果未经授权,导航是否不适用于react-native?

问题:

我已经在其中创建了一个React Native应用程序,我正在检查是否未经授权。我正在删除异步存储并重定向到登录。为了轻松处理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);
};

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

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

  const AppContainer = createAppContainer(MainNavigator);

  export default AppContainer;

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

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

有人可以帮助我解决此问题吗?谢谢。

wannazhao 回答:如果未经授权,导航是否不适用于react-native?

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,};
  1. 在App容器中为

    创建引用
    <AppContainer
                    ref={navigatorRef => {
                      NavigationService.setNavigator(navigatorRef);
                    }}
                  />
    
  2. 在您的http客户端文件中使用

        import NavigationService from 'path-to-NavigationService.js';
                NavigationService.navigate(NavigationActions.navigate({
                          routeName: 'login'
                        }););
    

expo reference

本文链接:https://www.f2er.com/3161648.html

大家都在问