Реактивная навигация стека навигатора не работает

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

Вам нужно использовать createAppContainer на вашем корневом навигаторе. Это было серьезное изменение, введенное в v3

Также 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}
});

Answer 3

Что ж, если вы используете StackNavigator, например:

// Inside "App.js"

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

Вы можете использовать навигацию, открыв свойства, доступные для каждого компонента:

// Inside "Details" Component

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

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