React Navigation堆栈导航器不起作用

Question

我在以下项目之一中使用了stackNavigator 2。 从“反应导航”导入{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' ) }/>
    )
  }
}