React navigation Bottom-tabs的问题
最近使用react navigation的底部导航,发现每次使用物理返回键,他都是默认跳转到上一个screen,而不像很多app一样,第一次返回弹吐司提示,在按一次返回键退出app。要做到这样的功能我使用react自带的平台API BackHandler简单实现了一下
首先需要做好的Bottom-tabs导航页面
render() {
return (
<Tabs.Navigator backBehavior="none"> //注意,在这里backBehavior设置为none,可以使导航器不处理返回事件
<Tabs.Screen
name={'HomeTabs'}
component={HomeTabs}
options={{
tabBarLabel: '首页',
}}
/>
<Tabs.Screen
name={'PetsTab'}
component={Pets}
options={{
tabBarLabel: '宠圈',
}}
/>
<Tabs.Screen
name={'ReleaseTab'}
component={Release}
options={{
tabBarLabel: '发布',
}}
/>
<Tabs.Screen
name={'AccountTab'}
component={Account}
options={{
tabBarLabel: '我的',
}}
/>
</Tabs.Navigator>
);
}
}
export default BottomTabs;
然后按照官方文档,简单使用一下BackHandler
文档地址:https://reactnative.cn/docs/next/backhandler
首先,在类中添加变量声明和处理返回事件的方法
lastBackPressed = Date.now(); //声明好变量
onBackPress = () => {
if (this.lastBackPressed && Date.now() - this.lastBackPressed <= 2000) {
console.log('间隔小于两秒');
BackHandler.exitApp(); //API封装好的退出App方法
return true;
}
infoToast('再按一次退出应用'); //自己封装的吐司组件
this.lastBackPressed = Date.now(); //记录本次返回事件的时间戳
return true; //返回true就代表了拦截这次返回事件,false就代表了不拦截
};
然后再生命周期方法,绑定和卸载监听事件
componentDidMount() {
BackHandler.addEventListener('hardwareBackPress', this.onBackPress);
}
componentWillUnmount() {
BackHandler.removeEventListener('hardwareBackPress', this.onBackPress);
}
然后,在首页,第一次返回键,弹出吐司提示,两秒内第二次点击,退出App,功能完成。建议自己尝试一下。