react-hooks - React Native 的 useNavigation Hook 在自定义 Hook 内？

Question

我正在使用 React Navigation 的 useNavigation 钩子(Hook):

在 MyComponent.js 中:

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

const MyComponent = () => {
    const navigation = useNavigation();
    const handleNav = () => {
        navigation.navigate("about");
    };
    return(
        <TouchableOpacity onPress={handleNav}>
            <Text>About</Text>
        </TouchableOpacity>
    )
}

有没有办法将此功能移至自定义 Hook ？我尝试了以下方法:

在使用CustomNav.js中:

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

const useCustomNav = ({ to }) => {
  const navigation = useNavigation();
  navigation.navigate(to);
  return null;
};

export default useCustomNav;

在 MyComponent.js 中:

import useCustomNav from './useCustomNav';

const MyComponent = () => {
    const handleNav = () => {
        useCustomNav("about");
    };
    return(
        <TouchableOpacity onPress={handleNav}>
            <Text>About</Text>
        </TouchableOpacity>
    )
}

我收到一个错误:

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.

我知道这是因为 useNavigation 被“隐藏”在一个函数调用中，但不知道如何修复它。

我尝试这样做的原因是我在 React Native 和 React Native Web 项目之间共享代码，但我需要以不同的方式进行路由。 Expo 可以针对具有不同文件名的不同平台，例如 useCustomNav.native.js 用于本地，useCustomNav.web.js 用于 web。所以我需要有一个可交换的功能来路由不同的平台。我不能在 MyComponent 中使用 useNavigation Hook ，因为它只会用于 native ，它会在 web 上出错。

Answer 1

您可以从自定义导航器 Hook 返回一个函数，让您导航到您想要的路线。

const useCustomNav = () => {
  const navigation = useNavigation();

  const goTo = to => navigation.navigate(to);

  return {goTo};
};

像这样使用它:

const MyComponent = () => {
    const navigator = useCustomNav();

    const handleNav = () => {
        navigator.goTo("about");
    };

    return(
        <TouchableOpacity onPress={handleNav}>
            <Text>About</Text>
        </TouchableOpacity>
    )
}