Как вернуться назад с помощью кнопки BackButton в стековом навигаторе, который находится внутри ящика навигатора

Question

У меня есть несколько экранов, каждый из которых является stackNavigator.любой созданный stackNavigator находится внутри ящика.на каждом экране, когда вы нажимаете BackButton заголовка stackNavigator, экран перемещается к initialRoute, всегда вместо этого к последнему экрану.

Я тестировал navigation.goBack() и navigation.goBack(null) и navigation.goBack() и navigation.goBack(this.props.navigation.state.key)}

, но ни один из них не работал.Вот мой код:

    const MenuScreenNavigator = createStackNavigator({
    Menu: {
        screen: MenuScreen,
        navigationOptions: ({ navigation }) => ({
            headerLeft: (
                <HeaderBackButton
                    tintColor="white"
                    onPress={() => navigation.goBack()}
                />
            )
    }

У меня есть многоэкранный навигатор, такой как навигатор меню: «Загрузить», «Домой», ... экраны.в продолжении у меня есть навигатор ящика:

const drawerConfig = {
    drawerPosition: 'right',
    contentComponent: CustomDrawerContent,
    initialRouteName: "Load"
   }
   const routeConfig = {
    Menu: {
        screen: MenuScreenNavigator,
        navigationOptions: { title: strings.screenName.menu }
    },
    Load: { screen: AuthLoadingScreenNavigator },

    Login: {
        screen: LoginScreenNavigator,
        navigationOptions: {
            drawerLabel: () => null
        }
    },
    User: { screen: UserScreenNavigator }
   }

, а затем я создаю ящикNavigator:

   const DrawerNavigator = createDrawerNavigator(routeConfig, drawerConfig)

   export default createAppContainer(DrawerNavigator)

Answer 1

Навигация в ящике

Этот метод навигации позволяет напрямую переключаться между различными экранами с помощью выдвижного ящика.Этот слайд-ящик содержит ссылки на различные экраны приложения.

Навигация по стеку

Этот вид навигатора позволяет переходить между экранами и управлять историей навигации.При нажатии на кнопку или ссылку новый экран помещается поверх старого экрана.Это что-то вроде толчка стека.Пользователь может вернуться к предыдущим экранам один за другим с помощью кнопки «назад».

Таким образом, чтобы иметь возможность перемещаться назад, по крайней мере, вам нужно поместить экран поверх другого, так что на начальных страницах, по которым вы перемещалисьиспользуя свой ящик, вы не сможете вернуться назад.

Используя приведенный выше пример, вы не сможете вернуться с screen1 *От 1021 * до пользователь или от screen2 до меню .Вы должны следовать стековому навигатору.Например:

• Меню> screen1> screen4

, затем вы можете вернуться назад

• screen4> screen1> Меню

Теперь давайте перейдем к реальному примеру, взяв приведенную выше диаграмму:

App.js

import React, { Component } from 'react';
import { View, Text, TouchableHighlight, Image } from 'react-native';
import { DrawerNavigator, createStackNavigator } from 'react-navigation';

import Menu from './pages/Menu/Menu';
import Screen1 from './pages/Menu/Screen1';
import Screen4 from './pages/Menu/Screen4';

import User from './pages/User/User';
import Screen2 from './pages/User/Screen2';
import Screen5 from './pages/User/Screen5';

import Login from './pages/Login/Login';
import Screen3 from './pages/Login/Screen3';
import Screen6 from './pages/Login/Screen6';

const MenuStack = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      navigationOptions: {
        header: null,
      },
    },
    Screen1: {
      screen: Screen1,
    },
    Screen4: {
      screen: Screen4,
    },
  },
  {
    initialRouteName: 'Menu',
  }
);

const UserStack = createStackNavigator(
  {
    User: {
      screen: User,
      navigationOptions: {
        header: null,
      },
    },
    Screen2: {
      screen: Screen2,
    },
    Screen5: {
      screen: Screen5,
    },
  },
  {
    initialRouteName: 'User',
  }
);

const LoginStack = createStackNavigator(
  {
    Login: {
      screen: Login,
      navigationOptions: {
        header: null,
      },
    },
    Screen3: {
      screen: Screen3,
    },
    Screen6: {
      screen: Screen6,
    },
  },
  {
    initialRouteName: 'Login',
  }
);

export default DrawerNavigator(
  {
    Menu: {
      screen: MenuStack,
    },
    Info: {
      screen: UserStack,
    },
    Login: {
      screen: LoginStack,
    },
  },
  {
    initialRouteName: 'Menu',
  }
);

Menu.js, User.js, Login.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';
import Header from '../../Header';

export default class MenuScreen extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
        }}>
        <Header {...this.props} />
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text style={{ fontWeight: 'bold', fontSize: 22 }}>
            This is Menu Screen
          </Text>
          <Button
            title="Go to Screen1"
            onPress={() => this.props.navigation.navigate('Screen1')}
          />
        </View>
      </View>
    );
  }
}

Screen1.js, Screen2.js, Screen3.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class Screen2 extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
        }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text style={{ fontWeight: 'bold', fontSize: 22 }}>
            This is Screen2
          </Text>
          <Button
            title="Go to Screen5"
            onPress={() => this.props.navigation.navigate('Screen5')}
          />
          <Button
            title="Go to Back"
            onPress={() => this.props.navigation.goBack()}
          />
        </View>
      </View>
    );
  }
}

Screen4.js, Screen5.js, Screen6.js

import React, { Component } from 'react';
import { View, Text, Button } from 'react-native';

export default class Screen4 extends Component {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'column',
        }}>
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text style={{ fontWeight: 'bold', fontSize: 22 }}>
            This is Screen4
          </Text>
          <Button
            title="Go to Back"
            onPress={() => this.props.navigation.goBack()}
          />
        </View>
      </View>
    );
  }
}

Проверьте исходный код: закуска.expo.io/@abranhe/react-navigation.

Answer 2

Хм, возможно, попробуйте это или одно из других решений, предложенных в этом обсуждении, посмотрите, решит ли это вашу проблему.