处理BackHandler

时间:2018-07-05 05:49:04

标签: android reactjs react-native react-native-android react-native-navigation

作为RN编程的新手,我正在尝试处理android硬件按钮。但是在屏幕上按下它会导致同时进入上一屏幕并关闭应用程序。 我的StackNavigator看起来像:

const navigatorApp = StackNavigator({
  Screen1: { screen: Screen1 },
  Screen2: { screen: Screen2 },
  Screen3: { screen: Screen3 },
  Screen4: { screen: Screen4 }
})

我试图对诸如此类的屏幕进行全局背景处理

class HandleHavigation extends React.Component {
  componentWillMount () {
    if (Platform.OS === 'android') return
    BackHandler.addEventListener('hardwareBackPress', () => {
      const { dispatch, nav } = this.props
      if (nav.routes.length === 1 && (nav.routes[0].routeName === 'Screen1')) {
        return false
      }
      dispatch({ type: 'Navigation/BACK' })
      return true
    })
  }
  componentWillUnmount () {
    if (Platform.OS === 'android') return
    BackHandler.removeEventListener('hardwareBackPress')
  }

  render () {
    return <navigatorApp navigation={addNavigationHelpers({
      dispatch: this.props.dispatch,
      state: this.props.nav,
      addListener: createReduxBoundAddListener('root')
    })} />
  }
}
const mapStateToProps = state => ({ nav: state.reducer })
export default connect(mapStateToProps)(HandleNavigation)

我还尝试了其他问题解决方案中的某些解决方案,但是没有什么可以防止应用程序关闭。

我还考虑过在每个屏幕上实现backHandler。 在我的应用程序中,每个屏幕均包含顶部按钮onPress的功能。这就是为什么我尝试使用Backhandler将此操作复制到硬件按钮的原因。但是,我得到的所有信息-屏幕会返回,并且该应用会同时隐藏。

我是否有任何解决方法可以防止通过按下硬件后退按钮来关闭应用程序?

2 个答案:

答案 0 :(得分:1)

您可以使用BackHandler退出/关闭应用程序:

import { BackHandler } from 'react-native';

BackHandler.exitApp();

答案 1 :(得分:0)

使用react-navigation具有内置的反向处理程序。