无法使用设备后退按钮导航到上一页（Backhandler）

Question

我有 2 个屏幕，屏幕 A 和屏幕 B。我在屏幕 A 中包含屏幕 B。 当我在屏幕 B 中时，我可以从设备返回按钮导航回屏幕 A。

但是当我转到屏幕 B 并导航回屏幕 A 时，设备返回按钮在屏幕 A 中不起作用。

屏幕A

    import React, { Component } from 'react';
    import { View, Button, BackHandler } from 'react-native';
    import B from './B';

    export default class A extends Component { 
    
      state = {
         isB: false,
      }
    _onBack = () => {
    this.props.navigation.goBack();
    return true;
    }
    
    componentDidMount(){
    BackHandler.addEventListener('hardwareBackPress', this._onBack)
    }
    
    ComponentWillUnmount(){
    BackHandler.removeEventListener('hardwareBackPress', this._onBack)
    }
    
    render(){
    <>
    {
       isB ?
         <B/>
       :
       <View>
         <Button onPress={() => this.setState({ isB: true})}>Edit</Button>
       </View>
    }
    </>
    }
  }

屏幕 B

    import React, { Component } from 'react';
    import { View, BackHandler } from 'react-native';
    export default class B extends Component { 
    
    _onBack = () => {
    this.props.navigation.goBack();
    return true;
    }
    
    componentDidMount(){
    BackHandler.addEventListener('hardwareBackPress', this._onBack)
    }
    
    ComponentWillUnmount(){
    BackHandler.removeEventListener('hardwareBackPress', this._onBack)
    }
    
    render(){
       <View>
       </View>
    }
  }

Answer 1

这是来自官方文档：

事件订阅以相反的顺序调用（即最后一个 首先调用注册订阅）。

如果一个订阅返回 true，那么之前注册的订阅将不会被调用。

如果没有订阅返回 true 或没有注册，它会以编程方式调用默认的后退按钮功能退出 应用程序。

因此，当您在 _onBack 中返回 true 时，这将是唯一在按下后退按钮时调用的回调。

你必须在这个函数中做你想做的事情，如果你想导航回你之前的屏幕(you probably using a navigation library like react-navigation or router-flux)在这个函数中输入正确的代码，如下所示：

_onBack = () => {
    Actions.pop() // rn-router-flux
    navigation.goBack(); // rn-navigation
    return true;
}