Не удается запустить приложение React Native из-за ошибок навигации

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';

Но столкнулся с этой ошибкой: Сообщение об ошибке

Какой из них мне использовать и как исправить каждую ошибку?

Это мой Приложение 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

Мне удалось исправить свою проблему, поигравшись с зависимостями реакции-навигации. Я получил несколько предупреждений о том, что некоторые из моих зависимостей были слишком новыми, поэтому я удалил и установил их снова, но я решил попробовать и снова установить реакцию-навигацию в третий раз из документации по реакции-навигации: Команда установки для Expo managed Проект

После этого мой проект заработал.

Answer 2

Прежде всего установите response-native-screen с помощью этой команды

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>
);}

Надеюсь, это решит вашу проблему