Question

问题：

我已经在其中创建了一个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,
        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;

我像这样在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>
    );
  }
}

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

Answer 1

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

在App容器中为

创建引用

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

在您的http客户端文件中使用

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

expo reference

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

1 个答案: