由于反应导航错误而无法运行 React Native 应用程序

Question

我开始制作我的第一个反应原生应用程序，但我一直遇到反应导航的问题。在我的应用程序.js文件中，我包括

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

但我遇到了这个错误：错误消息

在我在这里使用这些导入语句之前：

import { NavigationContainer } from 'react-navigation-stack';
import { createStackNavigator } from 'react-navigation-stack';

但是遇到了这个错误：错误消息

我应该使用哪一个以及如何修复每个错误？

这是我的应用程序.js文件：

import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import profile from './components/Profile';
import messages from './components/Messages';
import home from './components/Home';
import signInScreen from './components/signInScreen';
import signUpScreen from './components/signUpScreen';
const Stack = createStackNavigator();
export default function App() 
{
return (
<NavigationContainer>
<Stack.Navigator initialRouteName= "Sign In" screenOptions={{headerShown: false}}>
<Stack.Screen name="Sign In" component={signInScreen}/>
<Stack.Screen name="Sign Up" component={signUpScreen}/>
<Stack.Screen name="Home" component={home}/>
<Stack.Screen name="Messages" component={messages}/>
<Stack.Screen name="Profile" component={profile}/>
</Stack.Navigator>
</NavigationContainer>
);
}

Answer 1

首先使用此命令安装 react-native-screens

。

npm install react-native-screens

现在像这样更改您的代码

import 'react-native-gesture-handler';
import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { enableScreens } from "react-native-screens";
import profile from './components/Profile';
import messages from './components/Messages';
import home from './components/Home';
import signInScreen from './components/signInScreen';
import signUpScreen from './components/signUpScreen';
const Stack = createStackNavigator();
enableScreens(); //New line added
export default function App() {
return (
<NavigationContainer>
/* spaces removed between the names */
<Stack.Navigator initialRouteName= "SignIn" screenOptions={{headerShown: false}}>
<Stack.Screen name="SignIn" component={signInScreen}/>
<Stack.Screen name="SignUp" component={signUpScreen}/>
<Stack.Screen name="Home" component={home}/>
<Stack.Screen name="Messages" component={messages}/>
<Stack.Screen name="Profile" component={profile}/>
</Stack.Navigator>
</NavigationContainer>
);}

希望这将解决您的问题

Answer 2

我能够通过使用反应导航依赖项来解决我的问题。我收到一些警告，说我的一些依赖项太新了，所以我卸载并重新安装了它们，但我决定尝试从反应导航文档中第三次再次安装 react-navigation：为世博会托管项目安装命令

之后，我的项目开始工作。