React Navigation stack导航器不起作用

Question

我在我的一个项目中使用了stackNavigator 2，如下所示。从“react-navigation”导入{StackNavigator};

import {
   LoginScreen,
   TechStackScreen
} from '../screens';

// Public routes
export const PublicRoutes = StackNavigator({
   login: { screen: LoginScreen}
});

// Secured routes
export const SecuredRoutes = StackNavigator({
   techStack: { screen: TechStackScreen}
});

但是当我尝试将它与版本3+一起使用时，这不起作用。任何人都可以给我一个如何使用stacknavigation 3+的示例代码吗？

Answer 1

您需要在根导航器上使用createAppContainer。这是v3中引入的breaking更改

StackNavigator已被createStackNavigator取代

这是一个简单的用法示例。

App.js

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
  render() {
    return (
      <AppContainer />
    )
  }
}

MainNavigation.js

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);

Answer 2

你应该导入和使用createStackNavigator，这里是文档https://reactnavigation.org/docs/en/stack-navigator.html

只需要对代码进行一些小改动

// Public routes
export const PublicRoutes = createStackNavigator({
   login: { screen: LoginScreen}
});

// Secured routes
export const SecuredRoutes = createStackNavigator({
   techStack: { screen: TechStackScreen}
});