React Native - 设备后退按钮处理

当设备后退按钮被击中时，我想检查是否有多个屏幕处于堆栈状态。如果是的话，我想显示前一个屏幕，如果没有，我想退出应用程序。React Native - 设备后退按钮处理

我检查了一些例子，但那些使用BackAndroid和Navigator。但是他们都被弃用了。 BackHandler是BackAndroid的替代品。我可以使用props.navigation.goBack（null）显示前一个屏幕。

但我无法找到堆栈中查找屏幕计数的代码。我不想使用弃用的导航器！

2017-07-11 Virat18

使用https://reactnavigation.org/他们已经处理back按钮为android –

本示例将向您显示在大多数流程中通常期望的导航。您必须根据预期的行为将以下代码添加到每个屏幕。有两种情况： 1.如果堆栈中有多个屏幕，设备后退按钮将显示前一个屏幕。 2.如果堆栈上只有1个屏幕，设备后退按钮将退出应用程序。

案例1：显示上屏幕

import { BackHandler } from 'react-native'; 

constructor(props) { 
    super(props) 
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this); 
} 

componentWillMount() { 
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick); 
} 

componentWillUnmount() { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick); 
} 

handleBackButtonClick() { 
    this.props.navigation.goBack(null); 
    return true; 
}

重要：不要忘了在构造函数结合的方法，并在componentWillUnmount删除监听器。

案例2：退出应用程序

在这种情况下，没有必要要退出应用程序，屏幕上处理任何事情。

重要提示：这应该只在堆栈上显示。

来源

2017-07-12 06:30:11 Virat18

this.props.navigation.goBack（null）;在我的情况下显示一个空白的屏幕。可能造成了什么？我有一个tabView嵌套在stackView下，并在我的tabView'this.props.navigation.goBack（null）'执行时出现空白屏幕。 – Pavan

当我使用此代码时，出现错误消息“无法读取未定义的属性导航”，可能是什么问题？ –

当我从任何屏幕点击设备后退按钮时，我的应用程序直接退出。 –

constructor(props){ 
    super(props) 
    this.onBackPress = this.onBackPress.bind(this); 
} 

componentWillMount() { 
     BackHandler.addEventListener('hardwareBackPress', this.onBackPress); 

} 

componentWillUnmount(){ 
    BackHandler.removeEventListener('hardwareBackPress', this.onBackPress); 
} 

onBackPress(){ 
    const {dispatch, nav} = this.props; 
    if (nav.index < 0) { 
     return false; 
    } 
    dispatch(NavigationActions.back()); 
    return true; 
} 

render(){ 
    const {dispatch, nav} = this.props; 
    return(
     <DrawerRouter 
      navigation= { 
       addNavigationHelpers({ 
        dispatch, 
        state: nav, 
        addListener, 
       }) 
      } 
     /> 
    ); 
}

来源

2018-02-24 14:04:59 yamaha

在堆栈中堆叠多个屏幕的情况下，react-native中的默认后退按钮行为将导航回堆栈中的前一个屏幕。当只有一个屏幕退出应用程序时按下设备返回按钮需要自定义设置。然而，通过修改特定StackNavigator路由器的getStateForAction方法，可以实现这一点，而无需将处理代码添加到每个屏幕。

假设你有以下StackNavigator在应用

const ScreenStack = StackNavigator(
    { 
    'Screen1': { 
     screen: Screen1 
    }, 
    'Screen2': { 
     screen: Screen2 
    }, 
    }, 
    { 
    initialRouteName: 'Screen1' 
    } 
);

堆栈导航器的路由器的getStateForAction方法如下，以达到预期的背面行为进行修改使用。

const defaultStackGetStateForAction = 
    ScreenStack.router.getStateForAction; 

ScreenStack.router.getStateForAction = (action, state) => { 
    if(state.index === 0 && action.type === NavigationActions.BACK){ 
    BackHandler.exitApp(); 
    return null; 
    } 

    return defaultStackGetStateForAction(action, state); 
};

的state.index变得0只有当在堆栈一个屏幕。

来源

2018-03-09 19:29:32 Ruchi

React Native - 设备后退按钮处理

回答

相关问题