javascript - 如何在 React Native 中使用 createStackNavigator？

Question

我当前的代码

App.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。

我在面对

Error: Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5?

package.json

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

有 2 个不同的 react-navigation-stack。这会带来错误吗？

如果你能给我任何建议，我将不胜感激:)

Answer 1

您混淆了 reactnavigation 版本 4 和版本 5。

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

是 reactnavigation 版本 4 的一部分。并且

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

是 reactnavigation 版本 5 的一部分。因此，如果您想使用 v5，请先使用以下命令安装 reactnavigation:

npm install @react-navigation/native

然后，按照 this 安装其余依赖项指导。现在，使用命令安装 stackNavigator:

npm install @react-navigation/stack

更多细节是here .

现在，您可以创建如下导航:

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;