Question

我有2个屏幕，屏幕A和屏幕B。我将屏幕B包括在屏幕A中。当我进入屏幕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或没有注册，则以编程方式调用默认的后退按钮功能以退出该应用程序。

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

您必须执行此功能中要执行的操作，如果要导航回到之前的屏幕(you probably using a navigation library like react-navigation or router-flux)，请在此功能中输入适当的代码，如下所示：

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

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

1 个答案: