react-native中的react-native android后退按钮

Question

好吧，我有一个react-native具有多个屏幕的应用程序，每个屏幕都有一个位于顶部的后退按钮所在的栏，它的主要行为是当按下此按钮时，应用程序返回到主屏幕。我想做的就是将此行为复制到硬件后退按钮（现在通过按下应用程序关闭的硬件后退按钮），我该怎么做？

更新：

我正在使用react-navigation和redux

Answer 1

你可以通过下面的例子来做

import { BackHandler } from 'react-native';

class App extends Component {
  constructor(props){
    super(props);
    this.backButtonClick = this.backButtonClick.bind(this);
  }

  componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backButtonClick);
  }

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

  backButtonClick(){
    if(this.props.navigation && this.props.navigation.goBack){
      this.props.navigation.goBack(null);
      return true;
    }
    return false;
  }
}

Answer 2

您可以：

1. 从“ react-native”导入BackHandler
2. 添加componentWillMount BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
3. 像这样实现handleBackButton handleBackButton(){ this.props.navigation.popToTop(); return true; }

popToTop返回到堆栈中的第一个屏幕。

如果您在Redux中使用react-navigation，则应将popToTop实现为要分派的动作。

Answer 3

在功能组件中使用react Hooks实现：

useEffect(() => {
    function handleBackButton() {
      navigation.navigate('register-phone');
      return true;
    }

    const backHandler = BackHandler.addEventListener('hardwareBackPress', handleBackButton);

    return () => backHandler.remove();
  }, [navigation]);

不要忘记在卸载时删除监听器。

基于react-native文档。