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。

我要面对

错误：创建导航器时不接受参数。也许您正在尝试将React Navigation 4 API与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

您已经将反应导航版本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;

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不同，请通过堆栈导航器documentation进行详细了解

如何在React Native中使用createStackNavigator？

3 个答案: