React Navigation中headerRight无法渲染的问题求助

问题原因 #

你在HomeStack.Navigator的全局screenOptions里设置了自定义header组件<CustomNavigationBar {...props} />，这会完全替换React Navigation的默认header逻辑。单个screen中配置的headerRight不会自动生效，因为自定义header需要手动处理并渲染这个属性。

解决方案 #

方案1：修改CustomNavigationBar组件，支持headerRight渲染 #

在自定义导航栏组件中，需要接收并渲染options.headerRight：

const CustomNavigationBar = ({ navigation, options }) => {
  return (
    <View style={{ 
      flexDirection: 'row', 
      alignItems: 'center', 
      justifyContent: 'space-between', 
      paddingHorizontal: 16, 
      height: 60, 
      backgroundColor: '#fff' 
    }}>
      {/* 左侧返回按钮（按需调整） */}
      <TouchableOpacity onPress={() => navigation.goBack()}>
        <Text>返回</Text>
      </TouchableOpacity>
      {/* 标题 */}
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{options.headerTitle}</Text>
      {/* 渲染headerRight组件 */}
      {options.headerRight && options.headerRight()}
    </View>
  );
};

方案2：在单个页面覆盖全局header设置 #

如果不想修改自定义导航栏，可以给UPDATE_EVENT页面单独设置使用默认header，让headerRight生效：

<HomeStack.Screen
  name={screenRoutes.UPDATE_EVENT}
  component={Event}
  options={{
    headerTitle: "Update event",
    // 覆盖全局自定义header，使用默认导航栏
    header: undefined,
    headerRight: () => <IconButton icon="camera"/>
  }}
/>

方案3：排查IconButton组件本身 #

先确认IconButton是否能正常渲染，可临时替换为简单组件测试：

headerRight: () => <Text style={{ color: '#000', padding: 8 }}>相机</Text>

如果这个文本能显示，说明问题出在IconButton的导入或内部实现上，检查组件是否正确导入、样式是否隐藏了元素。

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