Реагировать на использование крючка useNavigation от Native внутри пользовательского? - PullRequest
Новая
       17

Реагировать на использование крючка useNavigation от Native внутри пользовательского?

1 голос
/ 19 апреля 2020

Я использую useNavigation крючок React Navigation:

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

Я получаю ошибку:

Инвариантное нарушение: недопустимый вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента.

Я понимаю, что это происходит, поскольку useNavigation «скрыт» в вызове функции, но не в том, как это исправить.

Причина, по которой я пытаюсь это сделать, - это я » Я делюсь кодом между проектами React Native и React Native Web, но мне нужно сделать маршрутизацию по-разному. Expo может предназначаться для разных платформ с разными именами файлов, например useCustomNav.native.js для нативных и useCustomNav.web.js для веб-сайтов. Поэтому мне нужно иметь заменяемую функцию для маршрутизации на разные платформы. Я не могу получить хук useNavigation в MyComponent, так как он будет использоваться только для нативного, это будет ошибка для сети.

1 Ответ

0 голосов
/ 19 апреля 2020

Вы можете вернуть функцию из пользовательского обработчика навигатора, чтобы позволить вам перейти к нужному маршруту. 

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