Question

//TermsPage.tsx
const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({
    routeName: 'BottomTabNav',
    params:{showTerms:false}
  }),
  ],
});
componentWillUnmount() {
    BackHandler.addEventListener('hardwareBackPress',()=>{
      this.props.navigation.dispatch(resetAction)
      return true
    })
  }

如何设置“ hardwareBackPress” eventListenner导航到另一个StackNavigator。如果我像上面那样设置。此backpress可在所有页面中使用。我只想为TermsPage设置此侦听器。并将此侦听器设置为导航到另一个StackNavigator

Answer 1

您可以使用此示例，在这里我们将此方法绑定到Constructer中，并且每当屏幕呈现回屏时也调用此函数

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

      }
      componentWillMount() {
        BackHandler.addEventListener(
          'hardwareBackPress',
          this.handleBackButtonClick,
        );
      }
      componentWillUnmount() {
        BackHandler.removeEventListener(
          'hardwareBackPress',
          this.handleBackButtonClick,
        );
      }
      handleBackButtonClick() {
        this.props.navigation.navigate('name of page where you want to nav');
        return true;
      }

您不想回去的地方使用它。

 componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton);
  }
 componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  }
  handleBackButton() {
    return true;
  }

它不会让您从所在的页面返回，请从react-native导入BackHandler。希望对您有所帮助。

Answer 2

我使用功能pop()解决了这个问题。在页面中，我想添加另一个堆栈的地方

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({
    routeName: 'BottomTabNav',
    params:{showTerms:false}
  }),
  ],
});

handleBackButtonClick() {
    this.props.navigation.dispatch(resetAction);
    return true;
  }

在其他页面

handleBackButtonClick() {
    // @ts-ignore
    this.props.navigation.pop();
    return true;
  }
``` And voila

如何将“ hardwareBackPress”设置为另一个堆栈

2 个答案: