react-navigation v5/v6中screen外部如何获取navigation.state

React Navigation v5/v6 调整了根级导航状态的访问逻辑，和v4版本存在两点核心区别：

• NavigationContainer 不会像旧版 createAppContainer 那样，给直接子组件自动注入 navigation 属性
• 旧版通过 navigation.state 直接读取全量导航状态的写法已废弃，官方提供了专用API按需读取状态，从设计层面减少不必要的组件重渲染

根据你的组件写法，可以选择对应方案实现：

方案1：函数组件写法（官方推荐） #

使用官方内置的 useNavigationState Hook 直接读取需要的导航状态，支持精确选择依赖的状态字段，只有对应字段变化时才会触发组件重渲染，性能更优。

import { NavigationContainer, useNavigationState } from '@react-navigation/native';

const AppNavigator = () => {
  // 仅读取导航栈的index字段，不依赖全量导航状态
  const routeIndex = useNavigationState(state => state.index);
  const isSplashScreen = routeIndex === RouteIndexes.SplashScreen;

  // 原有样式计算、barColor配置等逻辑保持不变
  return (
    <>
      <SafeAreaView style={topStyle} />
      <SafeAreaView style={bottomStyle}>
        <StatusBar backgroundColor={barColor} />
        <ErrorBoundary>
          <RootContainerStackNavigator />
        </ErrorBoundary>
      </SafeAreaView>
    </>
  );
};

// 根组件写法
export default function App() {
  return (
    <NavigationContainer>
      <AppNavigator />
    </NavigationContainer>
  );
}

注意：v5/v6版本中，所有导航器组件（包括你的RootContainerStackNavigator）、注册在导航器中的屏幕组件，都会自动从上下文获取navigation属性，不需要手动从父组件传递，手动传入反而可能引发状态不一致问题。如果ErrorBoundary内部需要用到navigation对象，单独给它包裹withNavigation高阶组件即可，无需逐层传参。

方案2：类组件适配（无需重构现有类组件） #

如果暂时不需要把类组件改写成函数组件，可以使用withNavigationState高阶组件包裹你的类组件，注入需要的导航状态：

import { Component } from 'react';
import { NavigationContainer, withNavigationState } from '@react-navigation/native';

type AppNavigatorProps = {
  navigationState: {
    index: number;
    routes: Array<{ name: string; key: string }>;
  };
};

class AppNavigator extends Component<AppNavigatorProps> {
  isSplashScreen = (): boolean => {
    const { navigationState } = this.props;
    return navigationState.index === RouteIndexes.SplashScreen;
  };

  render(): ReactNode {
    // 原有样式配置逻辑保持不变
    return (
      <>
        <SafeAreaView style={topStyle} />
        <SafeAreaView style={bottomStyle}>
          <StatusBar backgroundColor={barColor} />
          <ErrorBoundary>
            <RootContainerStackNavigator />
          </ErrorBoundary>
        </SafeAreaView>
      </>
    );
  }
}

// 通过selector选择需要注入的状态字段
const AppNavigatorWithState = withNavigationState(state => ({
  navigationState: state
}))(AppNavigator);

// 根组件使用
export default function App() {
  return (
    <NavigationContainer>
      <AppNavigatorWithState />
    </NavigationContainer>
  );
}

补充说明 #

如果除了读取导航状态，你还需要在根组件位置调用跳转、返回等导航方法，函数组件可以搭配useNavigation Hook获取navigation对象，类组件可以搭配withNavigation高阶组件注入navigation对象，不需要手动传递属性。

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