由于react导航错误，无法运行React Native App。

Question

我开始制作我的第一个反应式原生应用，但我一直在用反应式导航遇到问题。在我的app.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';

但是遇到了这个错误 错误信息

我应该用哪个，如何解决每个错误？

这是我的App.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的依赖关系来解决我的问题。我收到了一些警告，说我的一些依赖关系太新了，所以我卸载并重新安装了它们，但我决定再次尝试从 react-navigation 文档中安装 react-navigation，这是第三次。安装Expo管理项目的命令

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