React Native的useNavigation挂钩是否位于自定义挂钩内？

Question

我正在使用React Navigation的useNavigation钩子：

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

是否可以将此功能移至自定义钩子？我尝试了以下方法：

在使用中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：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。

我知道这是由于useNavigation被隐藏在函数调用中，而不是如何解决它。

我试图这样做的原因是我在React Native和React Native Web项目之间共享代码，但是我需要以不同的方式进行路由。 Expo可以使用不同的文件名来定位不同的平台，例如useCustomNav.native.js（本地）和useCustomNav.web.js（网络）。因此，我需要具有可交换功能来为不同平台进行路由。我无法在useNavigation中使用MyComponent钩子，因为它仅用于本机，对于Web它将出错。

Answer 1

您可以从自定义导航器挂钩返回一个函数，以便导航到所需的路线。

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