React Native导航未初始化错误求助：多种尝试仍未解决

你遇到的「navigation has not been initialized yet」错误，核心原因是同时混用了两套完全不兼容的React Navigation体系：

• 旧版体系：react-navigation、react-navigation-stack（使用createAppContainer、createStackNavigator）
• 新版体系：@react-navigation/native（使用NavigationContainer、useNavigation）

这两套API无法互通，导致useNavigation找不到新版导航上下文，从而报错。

推荐方案：迁移到新版React Navigation v6（稳定版） #

旧版导航已停止维护，新版API更简洁、性能更好，建议彻底迁移：

1. 卸载旧版依赖 #

npm uninstall react-navigation react-navigation-stack
# 或使用yarn
yarn remove react-navigation react-navigation-stack

2. 安装新版依赖 #

npm install @react-navigation/native @react-navigation/native-stack
# Expo项目额外安装基础依赖
npx expo install react-native-screens react-native-safe-area-context

3. 修改代码 #

app.tsx（移除旧版createAppContainer）

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

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

export default App;

navigator.tsx（改用新版栈导航API）

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

const Stack = createNativeStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator initialRouteName="home">
      <Stack.Screen 
        name="home" 
        component={Index} 
        options={{ headerShown: false }} 
      />
      <Stack.Screen 
        name="addNewGrocery" 
        component={AddNewGrocery} 
        options={{ headerShown: false }} 
      />
    </Stack.Navigator>
  );
};

export default StackNavigator;

AddButton.tsx（保留useNavigation，可添加类型定义）

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

// 定义路由参数列表（可选，提升类型安全性）
type RootStackParamList = {
  home: undefined;
  addNewGrocery: undefined;
};

const AddButton = () => {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();

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

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

// 补充样式（根据你的需求调整）
const styles = StyleSheet.create({
  addButtonContainer: {
    position: 'absolute',
    bottom: 30,
    right: 30,
  },
  addButton: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#2196F3',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 5,
  },
});

export default AddButton;

备选方案：继续使用旧版导航（不推荐） #

如果暂时不想迁移，需完全移除新版导航API，改用旧版的props传递导航方式：

修改Index.tsx（传递navigation props） #

const Index = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Gestão de Compras</Text>
      <LastFiveGrocery />
      <MonthAverageSpend />
      <TotalSpend />
      {/* 传递navigation给AddButton */}
      <AddButton navigation={navigation} />
      <StatusBar
        translucent={false}
        backgroundColor={'rgba(43, 43, 43, 1)'}
        barStyle='light-content' />
    </View>
  );
}

修改AddButton.tsx（移除useNavigation，改用props） #

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

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

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

// 样式部分保留
export default AddButton;

app.tsx保持旧版写法 #

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

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

export default App;

内容的提问来源于stack exchange，提问作者oblinez