React Navigation：能否将Prop值作为navigation.setOptions的参数键使用

你需要用到JavaScript的对象动态属性名语法，就能把传入的position参数值作为navigation.setOptions的配置键。下面是调整后的完整代码示例：

import { useLayoutEffect } from 'react';
// 假设CustomComponent已经定义或导入
// import CustomComponent from './CustomComponent';

const MyComponent = ({ navigation, position }) => {
  useLayoutEffect(() => {
    // 先做个简单的参数校验，确保position是合法值
    const validPositions = ['headerLeft', 'headerRight'];
    if (!validPositions.includes(position)) return;

    // 使用方括号包裹position，实现动态属性名
    navigation.setOptions({
      [position]: () => <CustomComponent />
    });
  }, [navigation, position]); // 依赖数组包含navigation和position，确保参数变化时更新配置

  // 这里写组件的其他渲染逻辑
  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
};

关键细节说明： #

• 动态属性名：用[position]替代固定的键名，这样当position传入headerLeft时，就会配置导航栏左侧的组件；传入headerRight时则配置右侧，完美匹配你的需求。
• 参数解构：我把组件参数改成了({ navigation, position })，因为在React Navigation中，navigation通常是作为props传递给屏幕组件的，这样能避免navigation未定义的问题（你原来的写法只接收了position，可能会拿不到navigation）。
• 依赖数组：把position加入到useLayoutEffect的依赖数组中，这样每当position的值变化时，都会重新执行回调，更新导航栏的对应位置组件。
• 参数校验：加入了简单的合法性检查，避免传入无效的position值导致不必要的错误，你也可以根据需求扩展这个校验逻辑。

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