React Native中为Tab Bar返回按钮添加校验并拦截状态栏返回事件

不同移动端平台/框架的处理方式略有差异，以下是主流场景的具体实现：

原生Android #

状态栏的返回按钮属于导航栏（ActionBar/Toolbar）的一部分，可通过重写导航事件或自定义点击监听实现拦截：

方式1：重写onSupportNavigateUp（适用于系统ActionBar） #

@Override
public boolean onSupportNavigateUp() {
    // 执行你的校验逻辑
    if (checkCanNotBack()) {
        // 提示用户无法返回，比如Toast
        Toast.makeText(this, "当前场景不允许返回", Toast.LENGTH_SHORT).show();
        return false; // 返回false阻止导航返回
    }
    return super.onSupportNavigateUp();
}

方式2：自定义Toolbar的导航点击监听 #

Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

toolbar.setNavigationOnClickListener(v -> {
    if (checkCanNotBack()) {
        Toast.makeText(this, "当前场景不允许返回", Toast.LENGTH_SHORT).show();
    } else {
        onBackPressed(); // 执行正常返回逻辑
    }
});

原生iOS #

系统默认的导航栏返回按钮无法直接拦截，需替换为自定义按钮并处理点击事件：

Swift实现 #

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 隐藏系统默认返回按钮
    navigationItem.hidesBackButton = true
    // 添加自定义返回按钮
    let backBtn = UIBarButtonItem(title: "返回", style: .plain, target: self, action: #selector(backBtnTapped))
    navigationItem.leftBarButtonItem = backBtn
}

@objc private func backBtnTapped() {
    if checkCanNotBack() {
        let alert = UIAlertController(title: nil, message: "当前场景不允许返回", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "确定", style: .default))
        present(alert, animated: true)
    } else {
        navigationController?.popViewController(animated: true)
    }
}

SwiftUI实现 #

struct ContentView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var body: some View {
        Text("页面内容")
            .navigationBarBackButtonHidden(true)
            .navigationBarItems(leading: Button(action: {
                if checkCanNotBack() {
                    // 弹出提示
                    print("当前场景不允许返回")
                } else {
                    presentationMode.wrappedValue.dismiss()
                }
            }) {
                Image(systemName: "arrow.left")
                    .foregroundColor(.blue)
            })
    }
}

Flutter #

通过自定义AppBar的leading组件，替换系统默认返回按钮并添加校验逻辑：

AppBar(
  leading: IconButton(
    icon: const Icon(Icons.arrow_back),
    onPressed: () {
      if (checkCanNotBack()) {
        // 弹出提示对话框
        showDialog(
          context: context,
          builder: (ctx) => AlertDialog(
            content: const Text("当前场景不允许返回"),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(ctx),
                child: const Text("确定")
              )
            ],
          ),
        );
      } else {
        Navigator.pop(context);
      }
    },
  ),
)

React Native #

通过自定义导航栏左侧按钮，替换系统默认返回按钮：

import { Button, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function TargetScreen({ navigation }) {
  return (
    // 页面内容
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Target"
          component={TargetScreen}
          options={({ navigation }) => ({
            headerLeft: () => (
              <Button
                title="返回"
                onPress={() => {
                  if (checkCanNotBack()) {
                    Alert.alert('提示', '当前场景不允许返回');
                  } else {
                    navigation.goBack();
                  }
                }}
              />
            ),
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

核心思路总结 #

系统默认的状态栏返回按钮大多不支持直接拦截，通用解决方案是：隐藏系统默认返回按钮，替换为自定义按钮，在自定义按钮的点击事件中加入校验逻辑，根据校验结果决定是否允许返回。

内容的提问来源于stack exchange，提问作者farooq alam96