我正在学习react native，但是我在导航方面遇到了困难，它返回了导航尚未初始化的错误。
我找了一些教程，我尝试了一些其他的方法，我去了react原生导航文档，尽管看起来不可思议，但它和文档中的一样...甚至没有GPT聊天哈哈 这对我没有帮助。
有本地人经验的人能给予个火吗？
app.tsx:

import { NavigationContainer } from '@react-navigation/native';
import { createAppContainer } from 'react-navigation';
import StackNavigator from './app/index/navigator';

const AppContainer = createAppContainer(StackNavigator);

const App = () => {
  return (
    <NavigationContainer>
      <AppContainer />
    </NavigationContainer>
  );
}

export default App;

navigator.tsx?

import { createStackNavigator } from 'react-navigation-stack';
import Index from '.';
import AddNewGrocery from '../components/addNewGrocery'

const StackNavigator = createStackNavigator({
  home: { screen: Index, navigationOptions: { headerShown: false } },
  addNewGrocery: { screen: AddNewGrocery, navigationOptions: { headerShown: false } },
});

export default StackNavigator;

index.tsx:

const Index = () => {
  return (
      
    <View style={styles.container}>

      <Text style={styles.title}>Gestão de Compras</Text>

      <LastFiveGrocery />

      <MonthAverageSpend />

      <TotalSpend />

      <AddButton />

      <StatusBar
        translucent={false}
        backgroundColor={'rgba(43, 43, 43, 1)'}
        barStyle='light-content' />
    </View>
  );
}

AddButton.tsx:

import React from 'react';
import { StyleSheet, View, TouchableOpacity } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useNavigation } from '@react-navigation/native';

const AddButton = () => {

  const navigation = useNavigation();

  const handleAddButtonPress = () => {
    navigation.navigate('addNewGrocery' as never);
  }

  return (
    <TouchableOpacity style={styles.addButtonContainer} onPress={handleAddButtonPress}>
      <View style={styles.addButton}>
        <Ionicons name="ios-add" size={36} color="white" />
      </View>
    </TouchableOpacity>
  );
}

我已经试过这样使用它了：
添加按钮：

const { navigate } = useNavigation<StackNavigationProp<ParamListBase>>();

  const handleAddButtonPress = () => {
    navigate('addNewGrocery');
  }

我也试过这样使用它：
导航员：

const StackNavigator = createAppContainer(createStackNavigator({
  Home: { screen: Index },
  addNewGrocery: AddNewGrocery,
}));

app.tsx:

import StackNavigator from './app/index/navigator';

const App = () => {
  return (
      <StackNavigator />
  );
}

export default App;