React Native(TypeScript)如何通过Stack.Navigator自动打印当前屏幕？

你可以通过Stack.Navigator的全局screenListeners监听导航状态变化，直接从状态中提取当前活跃屏幕的名称，不用给每个屏幕单独添加日志。以下是可行的TypeScript实现方案：

基础实现代码 #

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function AppNavigator() {
  return (
    <Stack.Navigator
      screenListeners={{
        state: (event) => {
          // 获取栈顶的路由项
          const activeRoute = event.data.state.routes[event.data.state.index];
          // 打印当前屏幕名称
          console.log(`当前屏幕: ${activeRoute.name}`);
          // 可选：打印屏幕参数
          // if (activeRoute.params) {
          //   console.log(`屏幕参数:`, activeRoute.params);
          // }
        }
      }}
    >
      {/* 你的所有屏幕配置 */}
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

TypeScript类型优化（可选） #

为了获得更严谨的类型提示，可以先定义路由参数类型：

// 定义所有屏幕的路由参数类型
type RootStackParamList = {
  Home: undefined; // Home屏幕无参数
  Profile: { userId: string }; // Profile需要userId参数
  Settings: { theme: 'light' | 'dark' };
};

// 创建带类型的Stack导航器
const Stack = createStackNavigator<RootStackParamList>();

这样在访问activeRoute.name和activeRoute.params时，TypeScript会自动提示合法的屏幕名称和参数结构，避免拼写错误。

注意事项 #

• 这个监听会响应当前Stack.Navigator的所有栈切换动作（比如push、pop、replace），全局生效，无需逐个屏幕配置
• 如果使用嵌套导航，该监听仅作用于当前Stack层级，子导航的屏幕切换需要单独给子导航器添加监听
• 生产环境建议移除该日志，避免冗余输出

内容的提问来源于stack exchange，提问作者ALAIN TORRES