React Navigation 5 类组件如何设置navigationOptions导航配置

核心原因 #

React Navigation v5 起废弃了类组件中原有的static navigationOptions静态属性配置方式，导航选项统一通过<Screen>组件的options属性管理，或者通过组件内部的navigation.setOptions方法动态设置，无需迁移到函数组件即可兼容原有逻辑。

方案一：兼容原有静态配置（改动最小） #

不需要调整类组件的核心配置逻辑，仅修改两处代码即可复用原有navigationOptions配置：

1. 调整路由注册处的options配置：

const AppStack = createStackNavigator();

const app = () => {
  return (
    <NavigationContainer>
      <AppStack.Navigator initialRouteName="SplashScreen">
        <AppStack.Screen name="SplashScreen" component={SplashScreen} options={{ headerShown: false, headerBackTitle: null }}/>
        <AppStack.Screen 
          name="Login" 
          component={Login} 
          options={(args) => {
            // 基础公共配置
            const baseOptions = { headerShown: true, headerBackTitle: null };
            // 合并组件内定义的静态配置
            const componentOptions = Login.navigationOptions ? Login.navigationOptions(args) : {};
            return { ...baseOptions, ...componentOptions };
          }}
        />
       </AppStack.Navigator>
    </NavigationContainer>
  );
};

export default app;

2. 调整Login类静态配置的参数取值路径（v5将路由参数挂载到route对象）：

class Login extends React.Component {
  // 仅修改参数获取路径，其他逻辑保持不变
  static navigationOptions = ({ navigation, route }) => {
    const params = route.params || {};
    return {
      headerTitle: params.headerTitle,
      headerRight: params.headerRight,
      headerLeft: params.headerLeft,
      headerStyle: params.headerStyle,
      headerTitleStyle: styles.headerTitle,
    };
  };
}

方案二：组件内动态设置 #

如果不想修改路由注册逻辑，可以在类组件的生命周期中调用setOptions方法动态配置导航栏：

class Login extends React.Component {
  componentDidMount() {
    this.updateNavigationOptions();
  }

  componentDidUpdate(prevProps) {
    // 路由参数变化时同步更新导航配置
    if (prevProps.route?.params !== this.props.route?.params) {
      this.updateNavigationOptions();
    }
  }

  updateNavigationOptions = () => {
    const params = this.props.route.params || {};
    this.props.navigation.setOptions({
      headerShown: true,
      headerBackTitle: null,
      headerTitle: params.headerTitle,
      headerRight: params.headerRight,
      headerLeft: params.headerLeft,
      headerStyle: params.headerStyle,
      headerTitleStyle: styles.headerTitle,
    });
  };

  // 原有业务逻辑保持不变
}

对应路由注册部分可以直接简化为：

<AppStack.Screen name="Login" component={Login} />

注意事项 #

• v5中所有路由参数统一通过route.params获取，不再支持navigation.state.params的取值方式
• 两种方案都不需要调整现有类组件的业务逻辑，无需迁移到函数组件

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