尝试从没有导航道具的组件导航

Question

我正在处理我的身份验证，当我尝试处理自动注销时我遇到了一些问题，我编写了在到期时间后注销所需的功能但是当我想在之后导航回登录屏幕时由于我正在处理的组件（没有导航道具），我无法注销，我使用了文档但仍然没有用！这是我的代码

import { useSelector } from "react-redux";
import RootNavigation from "./ShopNavigation";
import { NavigationActions } from "@react-navigation/native";
import { createNavigationContainerRef } from "@react-navigation/native";

export const navigationRef = createNavigationContainerRef();

const NavigationContainer = (props) => {
  const isAuth = useSelector((state) => !!state.auth.token);
  function navigate(name) {
    if (navigationRef.isReady()) {
      navigationRef.navigate(name);
    }
  }
  useEffect(() => {
    if (!isAuth) {
      navigate("Login");
    }
  }, [isAuth]);

  return <RootNavigation />;
};

export default NavigationContainer;

这是App.js

import { StatusBar } from "expo-status-bar";
import { StyleSheet } from "react-native";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import AppLoading from "expo-app-loading";
import * as Font from "expo-font";
import productsReducer from "./store/reducers/products";
import { composeWithDevTools } from "redux-devtools-extension";
import RootNavigation from "./navigation/ShopNavigation";
import cartReducer from "./store/reducers/cart";
import { useState } from "react";
import ordersReducer from "./store/reducers/orders";
import AuthReducer from "./store/reducers/Auth";
import ReduxThunk from "redux-thunk";
import NavigationContainer from "./navigation/NavigationContainer";

const rootReducer = combineReducers({
  products: productsReducer,
  cart: cartReducer,
  orders: ordersReducer,
  auth: AuthReducer,
});

const store = createStore(
  rootReducer,
  applyMiddleware(ReduxThunk),
  composeWithDevTools()
);

const fetchFonts = () => {
  return Font.loadAsync({
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
  });
};

export default function App() {
  const [fontLoaded, setfontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setfontLoaded(true)}
        onError={console.warn}
      />
    );
  }
  return (
    <Provider store={store}>
      <NavigationContainer />
    </Provider>
  );
}

Answer 1

您可以为此目的使用 useNavigation 挂钩。

import { useNavigation } from '@react-navigation/native';

function View() {
  const navigation = useNavigation();

  return (
    ...
  );
}

我们可以照常使用，例如

navigation.navigate("...")

尝试从没有导航道具的组件导航

Trying to navigate from a component that doesn't have the navigation props

react-native

redux

react-props

react-navigation-v6