React Native 无法读取未定义的属性调度

Question

我在本机反应中遇到此错误 导航器.调度 当 NavigationService.navigate("Dashboard"); 时无法读取未定义的属性分派

我已将代码从反应导航 4 迁移到反应导航 6

这是我现在的代码 应用程序.js

import React, { useEffect } from 'react';
import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';
import NavigationService from "./navigation/NavigationService";
import Navigator from "./navigation/Navigator";
import store from './helpers/store'
import AlertsSwitcher from './components/AlertsSwitcher';
import { createNavigationContainerRef } from '@react-navigation/native';


const navigationRef = createNavigationContainerRef();
export default function App() {
    
    return (
        <Provider store={store}>
            <NavigationContainer>            
                <Navigator  ref={navigationRef => {
                setTimeout(() => {
                    NavigationService.setTopLevelNavigator(navigationRef)
                }, 1000);
            }}/>
            </NavigationContainer>
            <AlertsSwitcher />
        </Provider>
    );
}

aviationService.js

import { CommonActions, StackActions } from '@react-navigation/native';
var navigator;
export function navigate(routeName, params) {
    const action = CommonActions.navigate({ name: routeName, params });
    navigator.dispatch(action);
}

function setTopLevelNavigator(navigatorRef) {
    
    console.warn(navigator)
    navigator = navigatorRef;
}

function popToTop() {
    if (navigator) {
        const action = StackActions.popToTop();
        navigator.dispatch(action);
    }
}

export default {
    navigate,
    setTopLevelNavigator,
    popToTop
};

Navigator.js

import React, { forwardRef } from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator, DrawerItemList } from '@react-navigation/drawer';
import { SafeAreaView, View, Pressable } from 'react-native';
import { Button } from 'galio-framework';
import theme from '../theme';
import { useDispatch } from 'react-redux';
import { logout } from '../actions/auth';
import LoginScreen from '../screens/LoginScreen';
import OrdersScreen from '../screens/OrdersScreen';
import OrderScreen from '../screens/OrderScreen';
import QRScannerScreen from '../screens/QRScannerScreen';
import SubStatusScreen from '../screens/SubStatusScreen';
import WelcomeScreen from '../screens/WelcomeScreen';
import QRCollectScreen from '../screens/QRCollectScreen';
import OrderSheetActionScreen from '../screens/OrderSheetActionScreen';
import QROrderSheetScanner from '../screens/QROrderSheetScanner';
import WithdrawalsScreen from '../screens/WithdrawalsScreen';
import AvailableWithdrawalsScreen from '../screens/AvailableWithdrawalsScreen';
import AvailableWithdrawalsDetailScreen from '../screens/AvailableWithdrawalsDetailScreen';
import QRWithdrawalsScreen from '../screens/QRWithdrawalsScreen';
import CollectActionScreen from '../screens/CollectActionScreen';
import TestScreen from '../screens/TestScreen';
import MissingOrdersScreen from '../screens/MissingOrdersScreen.js';
import MissingOrderScreen from '../screens/MissingOrderScreen.js';
import OrderManualCollect from '../screens/OrderManualCollect';
import { createNavigatorFactory } from '@react-navigation/native';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const defaultNavigationOptions = {
    headerStyle: {
        backgroundColor: '#FF8300',
    },
    headerTintColor: '#FFFFFF',
    headerTitleStyle: {
        fontWeight: 'normal',
    },
};

const WelcomeStack = () => (
    <Stack.Navigator screenOptions={defaultNavigationOptions}>
        <Stack.Screen name="Dashboard" component={WelcomeScreen} />
    </Stack.Navigator>
);

const QRStack = () => (
    <Stack.Navigator screenOptions={defaultNavigationOptions}>
        <Stack.Screen name="QR" component={QRScannerScreen} />
    </Stack.Navigator>
);
...

....

const SideBarNavigator = ({ navigation }) => {
    const dispatch = useDispatch();
    return (
        <Drawer.Navigator
            drawerContent={(props) => (
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItemList {...props} />
                <Pressable
                    onPress={async () => {
                    // Realiza las acciones necesarias para cerrar sesión aquí
                    await dispatch(logout());
                    
                    // Navegar a la pantalla "Auth" después de cerrar sesión
                    navigation.navigate('Auth');
                    }}
                >
                    <Button
                    color={theme.COLORS.INFO}
                    textStyle={{ color: '#FFFFFF' }}
                    >
                    Cerrar sesión
                    </Button>
                </Pressable>
            </SafeAreaView>
        )}
        >
        <Drawer.Screen name="Dashboard" component={WelcomeStack} options={{ drawerLabel: 'Inicio' }} />
        <Drawer.Screen name="Deliver" component={QRStack} options={{ drawerLabel: 'Repartir' }} />
        <Drawer.Screen name="Orders" component={OrdersNavigator} options={{ drawerLabel: 'Mis entregas' }} />
        <Drawer.Screen name="Collect" component={QRCollectNavigator} options={{ drawerLabel: 'Colectar' }} />
        <Drawer.Screen name="AvailableWithdrawalOrders" component={AvailableWithdrawalsNavigator} options={{ drawerLabel: 'Retiros disponibles' }} />
        <Drawer.Screen name="CollectedOrders" component={CollectedOrdersNavigator} options={{ drawerLabel: 'Mis retiros' }} />
        <Drawer.Screen name="TestScreen" component={TestScreenNavigator} options={{ drawerLabel: '' }} />
        </Drawer.Navigator>
    );
};

const AuthStack = () => (
    <Stack.Navigator screenOptions={defaultNavigationOptions}>
        <Stack.Screen name="Login" component={LoginScreen} />
    </Stack.Navigator>
);

const SideViewsStack = () => (
    <Stack.Navigator screenOptions={defaultNavigationOptions}>
        <Stack.Screen name="Order" component={OrderScreen} />
    </Stack.Navigator>
);

const MainNavigator = React.forwardRef((props, ref) => {
    return (
        <Stack.Navigator headerShown={false}>
            <Stack.Screen name="Auth" component={AuthStack} />
            <Stack.Screen name="SideViews" component={SideViewsStack} />
            <Stack.Screen name="SideBar" component={SideBarNavigator}/>
        </Stack.Navigator>
    );
});


export default MainNavigator;

我尝试在 React 中的屏幕之间导航`

Answer 1

var navigator;
export function navigate(routeName, params) {
    const action = CommonActions.navigate({ name: routeName, params });
    navigator.dispatch(action);
}

这部分看起来很奇怪，

var navigator is equal to undefined

在这种情况下

CommonActions 也没有导航 fn

从'@react-navigation/native'导入{CommonActions}；

navigation.dispatch(
  CommonActions.navigate({
    name: 'Profile',
    params: {},
  })
);

您需要使用 navigationRef 或将 navigation 对象传递给函数以 dispatch CommonActions.navigate