如何基于Props设置导航栏标题？咨询对应代码实现方法

嘿，我来帮你搞定这个问题～你写的代码里static navigationOptions是类的静态方法，这里面根本拿不到this.props的，因为静态方法属于类本身，不是类的实例，自然没法访问实例的props。下面分不同的React Navigation版本给你讲具体的解决方案：

情况1：使用React Navigation 4及更早版本（类组件） #

这个版本里导航栏配置主要用类的静态属性，我们需要调整写法来获取参数或props：

子情况1：标题来自导航路由参数 #

如果你的name是通过导航跳转时传的参数（比如navigation.navigate('YourScreen', { name: '我的页面标题' })），直接把navigationOptions改成函数形式，它会接收包含navigation的参数对象，就能拿到路由参数了：

class YourScreen extends React.Component {
  // 改成函数式的navigationOptions，接收navigation参数
  static navigationOptions = ({ navigation }) => {
    // 用getParam可以设置默认值，避免参数不存在时页面报错
    const screenTitle = navigation.getParam('name', '默认标题');
    return {
      title: screenTitle
    };
  };

  render() {
    // ...你的组件渲染内容
  }
}

子情况2：标题来自组件自身的Props（非路由参数） #

如果标题是父组件传给当前组件的props，那可以在组件挂载时，把props的值同步到导航参数里，再在navigationOptions里读取：

class YourScreen extends React.Component {
  componentDidMount() {
    // 把组件props里的标题同步到导航参数中
    this.props.navigation.setParams({
      screenTitle: this.props.yourTitleProp
    });
  }

  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('screenTitle', '默认标题')
    };
  };

  render() {
    return (
      // ...组件渲染内容
    );
  }
}

情况2：使用React Navigation 5+版本（函数式组件推荐） #

新版本的React Navigation用函数式组件和hooks更灵活，这里有两种常用写法：

子情况1：在路由配置里直接设置标题 #

如果标题是路由跳转时传的参数，可以在Stack.Screen的options里直接读取route参数：

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

const Stack = createStackNavigator();

function YourStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="YourScreen"
        component={YourScreen}
        // options接收route参数，直接读取params里的标题
        options={({ route }) => ({
          title: route.params?.name || '默认标题'
        })}
      />
    </Stack.Navigator>
  );
}

// 对应的函数式组件
function YourScreen() {
  return (
    // ...组件渲染内容
  );
}

子情况2：组件内部动态修改标题（基于Props） #

如果标题来自组件的props，并且可能动态变化，可以用useNavigation hook在组件内实时更新导航选项：

import { useNavigation } from '@react-navigation/native';
import React, { useEffect } from 'react';

function YourScreen({ yourTitleProp }) {
  const navigation = useNavigation();

  // 当props中的标题变化时，自动更新导航栏标题
  useEffect(() => {
    navigation.setOptions({
      title: yourTitleProp || '默认标题'
    });
  }, [yourTitleProp, navigation]);

  return (
    // ...组件渲染内容
  );
}

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