React Navigation 堆栈导航器不起作用

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

您应该导入并使用 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}
});

Answer 2

您需要在根导航器上使用 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 3

嗯，如果你正在使用 StackNavigator，像这样：

// Inside "App.js"

render() {
    return (
      <NavigationContainer >
        <Stack.Navigator >
          <Stack.Screen name='Details'
                        component={ Details } />
        </Stack.Navigator >
      </NavigationContainer >
    )
}

您可以通过访问每个组件可用的 properties 来使用导航：

// Inside "Details" Component

export default class Details extends React.Component {
  render() {
    const { navigate } = this.props.navigation

    return (
      <Button title='Goto Component' onPress={ () => navigate( 'SomeOtherComponent' ) }/>
    )
  }
}

React Navigation 堆栈导航器不起作用

React Navigation stack navigator doesn't work

react-native

react-navigation

stack-navigator

`App.js`

`MainNavigation.js`