Когда я нажимаю кнопку «Назад» или выполняю this.props.navigation.goBack(), я возвращаюсь к моему первому экрану вместо первого экрана.

Вот мой App.js, где реализован мой навигатор:

export default class App extends React.Component {
  render() {
      const MainNavigator = createAppContainer(createBottomTabNavigator({
          info: {
          screen: CtrlInfoStart,
          navigationOptions: { tabBarVisible: false }
      },
          mascotChoice: {
          screen: CtrlMascotChoice,
          navigationOptions: { tabBarVisible: false }
      },
          optionScreen: {
          screen: CtrlOptions,
          navigationOptions: { tabBarVisible: false }
      },
          welcomeScreen: {
          screen: CtrlWelcome,
          navigationOptions: { tabBarVisible: false }
      },
          preview: {
          screen: CtrlPreviewMap,
          navigationOptions: { tabBarVisible: false }
      },
          map: {
          screen: CtrlMap,
          navigationOptions: { tabBarVisible: false }
      },
          pointOfInterest: {
          screen: CtrlPI,
          navigationOptions: { tabBarVisible: false }
      },
          quizz: {
          screen: CtrlQuizz,
          navigationOptions: { tabBarVisible: false }
      }
      }));

    return (
    <View style={styles.container}>
        <MainNavigator/>
    </View>
    );
  }
};

Я использую this.props.navigation.navigate('SomeScreen'); для навигации между экранами и this.props.navigation.goBack() для возврата.

3
jolearn 18 Апр 2019 в 13:16

2 ответа

Лучший ответ

Импортировать BackHandler из собственного реагирующего,

В componentdidmount связывании backhandler с использованием BackHandler.addEventListner()

Посмотри это,

componentDidmount=()=>{
    BackHandler.addEventListener("hardwareBackPress", this.handleBackButton);
}

componentWillUnmount = () => {
    BackHandler.removeEventListener("hardwareBackPress", this.handleBackButton);
};

  handleBackButton = () => {
    this.props.navigation.navigate('SomeScreen');
    return true;
  };

И где бы вы ни использовали goBack(), измените его на navigate("ScreenName")

ИЗМЕНИТЬ :

Для неожиданного поведения на других экранах, сделайте это, в котором используется backhander.

import {NavigationEvents} "react-navigation";

В рендере внутри первого компонента,

<NavigationEvents onWillFocus={this.compnentDidmount} onWillBlur={this.componentWillUnmount} />

Если у вас есть другая логика в didmount и unmount, создайте отдельные методы для обоих и выполните привязку в NavigationEvents

2
Jaydeep Galani 18 Апр 2019 в 11:22

Я нашел решение. Вот мой код:

     export default class App extends React.Component {

      render() {
        return <AppContainer />;
      }
    };

    const stackMapPI = createStackNavigator({
        Map: {
            screen: CtrlMap,
            navigationOptions: () => ({
                header: null
            })
        },
        PI: {
            screen: MainCtrlPIQuizz,
            navigationOptions: () => ({
                header: null
            })
        }

    });

    const stackNav = createStackNavigator({
        Welcome: {
            screen: MainCtrlWelcome,
            navigationOptions: () => ({
                header: null
            })
        },
        Option: {
            screen: CtrlOptions,
            navigationOptions: () => ({
                header: null
            })
        },
        Map: {
            screen: stackMapPI,
            navigationOptions: () => ({
                header: null
            })
        }
    });

const AppContainer = createAppContainer(stackNav);
0
jolearn 1 Май 2019 в 15:45