反应导航goBack不起作用

时间:2019-01-17 04:12:55

标签: javascript react-native react-navigation

我在这里有2个屏幕。首先是LoginScreen和LoginFormScreen。假设LoginScreen有一个按钮LoginButton:导航到LoginFormScreen。 活动流程应为

  

LoginScreen.js-> LoginFormScreen.js

所以我的AppNavigator.js

import LoginScreen from '../screens/LoginScreen';
import LoginFormScreen from '../screens/LoginFormScreen'

export default createAppContainer(createSwitchNavigator({ 
    Login: {screen : LoginScreen},
    LoginForm: {screen: LoginFormScreen},
}, {
  initialRouteName: 'Login',
}));

在我的LoginScreen按钮上,这里是onPress处理的操作

<Button
   title="Log In"
   titleStyle={{ fontWeight: 'bold', fontSize: 18 }}
   onPress={() => this.props.navigation.navigate('LoginForm')}

在我的LoginFormScreen上,我想一次用户单击后退物理按钮,然后返回上一个屏幕(LoginScreen)。这是我的代码

constructor(props) {
    super(props); 
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
  }

  componentWillMount() {
      BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
  }

  componentWillUnmount() {
      BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
  }

  handleBackButtonClick() {
    this.props.navigation.dispatch(NavigationActions.back());
    this.props.navigation.goBack("Login")
    this.props.navigation.goBack(null)
    this.props.navigation.goBack()
    return true;
  }

已经尝试了上面所有这些代码,但对我没有任何帮助。检查StackoverflowGitHub上的其他解决方案,包括react-navigation homepage,但没有解决方案。

尝试goBack()goBack(null)dispatch(NavigationActions.back()),但没有人可以使用。

请有人帮我解决这个问题。

1 个答案:

答案 0 :(得分:1)

当您使用createSwitchNavigator而不是createStackNavigator时,您可以在其中推送和弹出屏幕,并在doc上说,就像文档说的那样,一次只能看到一个屏幕,即不会出现堆栈礼物,你可以做

this.props.navigation.navigate('Login')