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

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

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

我收到错误：

不变违规：无效的挂钩调用。钩子只能在函数组件的主体内部调用。

我知道这种情况发生useNavigation在函数调用中“隐藏”，但不知道如何修复它。

我尝试这样做的原因是我在 React Native 和 React Native Web 项目之间共享代码，但我需要以不同的方式进行路由。Expo 可以针对具有不同文件名的不同平台，例如useCustomNav.native.js本机平台和useCustomNav.web.js网络平台。所以我需要一个可交换的功能来为不同平台进行路由。我无法插入该useNavigation钩子MyComponent，因为它仅用于本机，如果用于网络，则会出错。

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