无法使用设备后退按钮(后退处理程序)导航到上一页

Question

我有两个屏幕，屏幕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或没有注册，它将以编程方式调用默认的后退按钮功能以退出应用程序。

因此，当您在_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;
}