React Navigation + Redux在返回键按下时如何关闭应用程序

Question

在将应用程序转换为redux之后，我的react-navigation遇到了一些问题。在与redux集成之前，在按下后退按钮（物理按钮）之前，react-navigation返回到上一个屏幕。在与redux集成后，后退按钮将关闭应用程序。但是，使用goBack()函数仍然有效。

我正在遵循指南：https://reactnavigation.org/docs/guides/redux 并阅读一些代码：https://github.com/react-community/react-navigation/tree/master/examples/ReduxExample 这是我的导航器配置。

export const AppNavigator = StackNavigator(
    {
        Home: { screen: HomeScreen },
        ChatDetail: { screen: ChatDetail },
        PulsaDetail: { screen: PulsaDetailScreen },
        Pulsa: { screen: Pulsa }
    },
    {
        headerMode: 'none',
    }
)

class AppWithNavigation extends Component {
    render(){
        return(
            <AppNavigator navigation={ addNavigationHelpers({
                dispatch: this.props.dispatch,
                state: this.props.nav,
            })} />
        )
    }
}

const mapStateToProps = (state) => ({
  nav: state.nav
})

export default connect(mapStateToProps)(AppWithNavigation)

编辑：可以使用手动处理和分派回退操作来完成，但是它不能像在使用redux之前那样自动执行吗？

BackHandler.addEventListener('hardwareBackPress',() => {
    this.props.goBack()
    return true
})

- Sucipto

Answer 1

在react-navigation存储库中发布Github问题后，我得到了答案。

应该在屏幕/组件顶部手动添加返回监听器。

// App.js
import { BackAndroid } from 'react-native'
// [...]
  componentDidMount() {
    BackAndroid.addEventListener('backPress', () => {
      const { dispatch, nav } = this.props
      if (shouldCloseApp(nav)) return false
      dispatch({ type: 'Back' })
      return true
    })
  }

  componentWillUnmount() {
    BackAndroid.removeEventListener('backPress')
  }
// [...]

• https://github.com/react-community/react-navigation/issues/2117
• https://github.com/react-community/react-navigation/issues/117

UPDATE:

• https://facebook.github.io/react-native/docs/backhandler

- Sucipto

---

BackAndroid已经被弃用，请使用BackHandler替代。https://facebook.github.io/react-native/docs/backhandler - manuelgr