Как использовать createStackNavigator в React Native?

Question

Мой текущий код

Приложение. js

import React from 'react';
import AuthenticationNavigator from 'app/src/navigations/AuthenticationNavigator';

export default class App extends React.Component {
  render() {
    return <AuthenticationNavigator />;
  }
}

AuthenticationNavigator. js

import { createSwitchNavigator, createAppContainer } from 'react-navigation';
onst AuthenticationNavigator = createAppContainer(
  createSwitchNavigator(
    {
        Loading: { screen: LoadingScreen },
        Login: { screen: LoginScreen },
    },
    {
        initialRouteName: 'Loading',
    },
  ),
);
export default AuthenticationNavigator;

Я изменил AuthenticationNavigator. js до

import { createStackNavigator } from '@react-navigation/stack';
const AuthenticationNavigator = createStackNavigator(
  {
      Loading: { screen: LoadingScreen },
      Login: { screen: LoginScreen },
  },
  {
      initialRouteName: 'Loading',
  },
);

export default AuthenticationNavigator;

Я хочу использовать createStackNavigator вместо createSwitchNavigator.

У меня

Ошибка: создание навигатора не требует Аргумент. Может быть, вы пытаетесь использовать React Navigation 4 API с React Navigation 5?

пакет. json

{
  "name": "app",
  },
  "dependencies": {
    "@react-navigation/stack": "^5.2.18",
    "react-navigation-stack": "^2.1.1",
  },
  "devDependencies": {
  },
  "private": true
}

Существует 2 различных стека реакции-навигации. Приносит ли это ошибку?

Я был бы признателен, если бы вы могли дать мне какие-либо советы:)

Answer 1

Вы перепутали версию 4 реактивной навигации и версию 5.

import { createSwitchNavigator, createAppContainer } from 'react-navigation';

является частью версии 4 реактивной навигации, а

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

является частью версии 5 реактивной навигации. Если вы хотите использовать v5, то сначала установите реактивавигацию с помощью:

npm install @ реагировать-навигация / собственный

, затем установите остальные зависимости, выполнив следующие действия это руководство. Теперь установите stackNavigator с помощью команды:

npm install @ реагировать-навигация / стек

Подробнее здесь .

Теперь вы можете создать навигацию, как показано ниже:

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import Loading from './containers/Loading';
import Login from './containers/Login';

const {Navigator, Screen} = createStackNavigator();

const AuthStack = () => (
  <Navigator headerMode="none">
    <Screen name="Loading" component={Loading} />
    <Screen name="Login" component={Login} />
  </Navigator>
);

const AppNavigator = () => (
  <NavigationContainer>
    <AuthStack />
  </NavigationContainer>
);

export default AuthenticationNavigator;

Answer 2

у вас не должно быть аргумента для создания стекового навигатора. Например:

const AuthenticationStack = createStackNavigator();

const AuthenticationStackNavigator = () => {
    return(
        <AuthenticationStack.Navigator>
            <AuthenticationStack.Screen name="login" component = {Login}/>
            <AuthenticationStack.Screen name="register" component = {Register} />
        </AuthenticationStack.Navigator>
    )
}

Answer 3

Вы создаете навигаторы неправильно, в реагирующей навигации V5 вы создаете навигаторы не так, как V4, пожалуйста, go через стековый навигатор документация для получения более подробной информации