React Navigation嵌入原生SDK页面时Android返回键直接退出栈的问题求助
大家好,我最近在开发React Native应用时遇到了一个Android特有的棘手问题,折腾了好一阵没找到解决办法,来请教下各位同行!
问题背景
我用@react-navigation/native搭建了底部标签导航,每个标签页对应一个独立的栈导航:
- HomeStack:首页相关的栈
- SettingStack:设置页相关的栈
- SdkStack:嵌入第三方原生Android SDK的栈
其中HomeStack和SettingStack在iOS和Android上都运行正常,但SdkStack在Android上出现了异常:
SdkStack的首页是SdkScreen,这个页面通过RN桥接加载了第三方原生SDK的视图,该SDK内部有自己的页面跳转逻辑(比如列表页→详情页),SDK内部的导航本身是正常的,但当用户在SDK内部进入详情页后,按下返回键,整个SdkStack会直接被弹出,应用跳回HomeStack标签页,而不是留在SdkStack里处理SDK内部的返回操作。
关键信息
- 这个问题只在Android上出现,iOS完全符合预期
- SDK内部的页面并非React Navigation的路由,完全由原生代码处理,且我没有权限修改SDK的源代码
- 底部Tab.Navigator的
backBehavior已经设置为"history"
已尝试的解决方案
我曾尝试在SdkScreen中使用useFocusEffect结合BackHandler来拦截返回事件,代码如下:
useFocusEffect( useCallback(() => { const onBackPress = () => { if (navigation.canGoBack()) { navigation.goBack(); return true; } return false; }; BackHandler.addEventListener('hardwareBackPress', onBackPress); return () => BackHandler.removeEventListener('hardwareBackPress', onBackPress); }, [navigation]) );
但实际效果并不理想,看起来当原生SDK的页面关闭时,SdkScreen会被自动移除,导致这个拦截逻辑根本没机会生效。
有没有大佬遇到过类似的场景?或者有什么可行的解决方案可以让Android的返回键先处理SDK内部的页面返回,而不是直接弹出整个SdkStack?
内容来源于stack exchange
相关产品推荐
相关产品推荐

