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

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”事件监听器以导航到另一个 StackNavigator。如果我像上面那样设置。此后压适用于所有页面。我只想为 TermsPage 设置这个监听器。并将此侦听器设置为导航到另一个 StackNavigator

Answer 1

我用函数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

Answer 2

你可以使用这个例子，这里我们在 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。 希望对您有所帮助，请随时提出疑问。