React 原生导航的纱线错误："Module not found: Can't resolve 'react-navigation'"

Question

在尝试使用expo在react原生应用程序中制作导航系统时，使用yarn安装了react导航，我无法解决此错误

Module not found: Can't resolve 'react-navigation'

这些是package.json 中的依赖项

"dependencies": {
"@react-native-community/masked-view": "^0.1.11",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"expo": "~43.0.2",
"expo-status-bar": "~1.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-gesture-handler": "^2.0.0",
"react-native-reanimated": "^2.2.4",
"react-native-safe-area-context": "^3.3.2",
"react-native-screens": "^3.10.0",
"react-native-web": "0.17.1",
"react-navigation-stack": "^2.10.4"
},

这就是我使用react原生导航的地方

import React from 'react'
import { View, Text } from 'react-native'
import { NavigationContainer } from 'react-navigation'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import SignUpScreen from '../screens/Sign Up Screen/SignUpScreen';
import SignInScreen from '../screens/SignIn Screen/SignInScreen';
import ConfirmEmailScreen from '../screens/ConfirmEmailScreen';
import ForgotPasswordScreen from '../screens/ForgotPAsswordScreen';
import NewPasswordScreen from '../screens/NewPasswordScreen';

const Stack = createNativeStackNavigator()
const Navigation = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="SignIn" component={SignInScreen}/>
</Stack.Navigator>
</ NavigationContainer>
)
}
export default Navigation

这是浏览器中的错误

./src/Navigation/index.js:3
Module not found: Can't resolve 'react-navigation'
1 | import React from 'react'
2 | import { View, Text } from 'react-native'
> 3 | import { NavigationContainer } from 'react-navigation'
4 | import { createNativeStackNavigator } from '@react-navigation/native-stack'
5 | import SignUpScreen from '../screens/Sign Up Screen/SignUpScreen';
6 | import SignInScreen from '../screens/SignIn Screen/SignInScreen';

Answer 1

来自文档示例React Navigation doc

您正在使用6.*版本来添加NavigationContainer，请使用它。

import { NavigationContainer } from "@react-navigation/native";

Answer 2

如注释中所述，NavigationContainer是@react-navigation/native的一部分。这应该能解决问题。

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