React Native中如何实现从指定页面按安卓返回键直接退出应用?
原因说明
navigation.replace 仅会替换路由栈的顶层页面,不会清除下层栈元素。你调用该方法从screen2跳转screen3时,原路由栈 [screen1, screen2] 会被修改为 [screen1, screen3],因此在screen3触发返回操作时,会回到下层的screen1,和预期不符。
解决方案
- 方案1:使用
reset方法清空路由栈,仅保留screen3为根页面
执行后路由栈变为[screen3],触发返回时栈为空就会直接退出应用,是最符合需求的方案:props.navigation.reset({ index: 0, routes: [{ name: 'screen3' }] }) - 方案2:组合使用
popToTop和replace实现
先回到路由栈底层的screen1,再将screen1替换为screen3,效果和方案1一致:props.navigation.popToTop() props.navigation.replace('screen3') - 方案3:在screen3页监听安卓返回键,手动触发退出
不需要修改原有跳转逻辑,仅在screen3页拦截返回事件直接退出应用:import React from 'react' import { BackHandler } from 'react-native' import { useFocusEffect } from '@react-navigation/native' // screen3组件内添加逻辑 useFocusEffect( React.useCallback(() => { const handleBackPress = () => { BackHandler.exitApp() return true // 拦截默认返回逻辑 } BackHandler.addEventListener('hardwareBackPress', handleBackPress) return () => BackHandler.removeEventListener('hardwareBackPress', handleBackPress) }, []) )
内容的提问来源于stack exchange,提问作者user14877357
相关产品推荐
相关产品推荐

