在普通函数中使用 react navigation.navigate - （不允许使用挂钩，即 useNavigation）？

Question

我正在尝试将导航到屏幕的功能放在另一个模块中并将其导出，但navigation 不起作用。我尝试使用UseNavigation()，但出现错误，即：Unhandled promise rejection: Invariant Violation: Hooks can only be called inside the body of a function component.

有没有办法在正常功能中使用导航，或其他任何东西。

import React, { useState, useEffect, useCallback } from "react";
import { AsyncStorage, Alert } from "react-native";
import { useNavigation } from "react-navigation-hooks";

export const startMixGame = async (categoryIsChosen, withTimer) => {
  const navigation = useNavigation();

  if (categoryIsChosen) {
    if (withTimer) {
      await AsyncStorage.setItem("useTimer", "true");
      navigation.navigate({
        routeName: "MixedQuestions",
        params: {
          categoryId: "1"
        }
      });
    } else if (!withTimer) {
      // console.log("withTimer", withTimer);

      await AsyncStorage.setItem("useTimer", "false");
      navigation.navigate({
        routeName: "NoTimerMixedQuestions",
        params: {
          categoryId: "1"
        }
      });
    }
  }

};

谢谢

Answer 1

是的，使用单例服务来保存对导航的引用，在应用程序的根目录中使用 useEffect 保存单例中的引用，这样您就可以在任何地方使用它。 像这样的：

class NavigationService {
  constructor() {
    this._navigation = null;
  }

  set navigation(nav) {
    this._navigation = nav;
  }

  get navigation() {
    return this._navigation;
  }
}

const navigationService = new NavigationService();

export default navigationService;

在您的主屏幕/视图中

    const HomeScreen = ({navigation}) => {
      useEffect(() => {
        navigationService.navigation = navigation;
      }, [navigation]);
   ....

现在你可以在任何地方这样做

import navigationService from '../services/navigation';

navigationService.navigation.navigate('Screen');

Answer 2

检查这个 https://reactnavigation.org/docs/navigating-without-navigation-prop/

您可以保存对 NavigationContainer 的引用并使用它进行导航。

应用

import AppNavigator from './AppNavigator'
...
render (){
 return (<AppNavigator/>)
}

AppNavigator

import * as React from 'react';
import AppStack from './AppStack';
import {NavigationContainer} from '@react-navigation/native';
import NavigationService from './NavigationService';

const AppNavigator = () => {
    return (
        <NavigationContainer
            ref={NavigationService.instance}
        >
            <AppStack/>
        </NavigationContainer>
    );
};
export default AppNavigator

AppStack

import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();


export default () => {
    return (
        <Stack.Navigator>

             // add all screens here
             <Stack.Screen
                name={'Home'}
                component={HomeCpmponent}
            />

        </Stack.Navigator>
    )
}

import {NavigationContainerRef} from '@react-navigation/native';
import * as React from 'react';
import {boundClass} from 'autobind-decorator';

@boundClass
class NavigationService {
    instance = React.createRef<NavigationContainerRef>();

    dispatch(action) {
        this.instance.current?.dispatch(action)
    }

    getInstance() {
        return this.instance?.current
    }

    canGoBack() {
        return this.getInstance()?.canGoBack()
    }

    navigate(routeName: string, params: any) {
        return this.getInstance()?.navigate(routeName, params)
    }

}

export default new NavigationService()

您可以使用NavigationService.dispatch() 和import {CommonActions, StackActions} from '@react-navigation/native'; 或NavigationService.navigate('home',{id:'test1'}) 或...

Answer 3

实际上，现在我再次看到它，我可以将navigation 作为参数/参数传递，例如：

export const startMixGame = async (categoryIsChosen, navigation, withTimer) => { ...}