在普通函数中使用 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

检查这个 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 2

是的，使用保存导航引用的单例服务，在您的应用程序的根目录中使用 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 3

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

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

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

Use react navigation.navigate inside a normal function - (no hooks allowed i.e. useNavigation)?

reactjs

react-native

react-native-navigation

react-navigation