Stack Navigator导航选项对齐问题：标题居中与headerRight样式失效

我来帮你搞定这两个问题！针对你遇到的标题无法居中、headerRight边距不生效的情况，咱们一步步来修复：

1. 标题居中的正确设置 #

你之前尝试的alignSelf: "center"可能因为导航栏的布局逻辑没生效，推荐两种更可靠的方式：

方式一：使用官方提供的headerTitleAlign属性（React Navigation 5+ 适用） #

这是最简洁的方法，直接在navigationOptions里添加该属性：

static navigationOptions = {
  title: "Share To Feed",
  headerTitleAlign: 'center', // 直接设置标题居中
  // ...其他配置
};

方式二：自定义headerTitle容器样式（兼容旧版本） #

如果你的React Navigation版本较低，可以通过headerTitleStyle和headerStyle配合调整：

static navigationOptions = {
  title: "Share To Feed",
  headerTitleStyle: {
    textAlign: 'center',
    flex: 1, // 让标题占据剩余空间，避免被左右按钮挤压
  },
  headerStyle: {
    justifyContent: 'center',
  },
  // ...其他配置
};

2. 给headerRight设置右外边距 #

你可以通过两种方式实现：

方式一：直接给headerRight的View添加marginRight #

在你的headerRight的View组件里直接设置样式：

headerRight: (
  <View style={{ marginRight: 15 }}> {/* 这里设置你需要的外边距值 */}
    {/* 你的图标或按钮内容 */}
  </View>
),

方式二：使用headerRightContainerStyle统一设置 #

这种方式更优雅，直接在navigationOptions里配置容器样式：

static navigationOptions = {
  title: "Share To Feed",
  headerTitleAlign: 'center',
  headerRightContainerStyle: {
    marginRight: 15, // 为headerRight容器设置右外边距
  },
  headerRight: (
    <Icon name={"your-icon-name"} size={24} />
  ),
  // ...其他配置
};

完整修正后的代码示例 #

结合上面的方法，你的代码可以改成这样：

import React from 'react';
import { View } from 'react-native';
import { Icon } from 'react-native-elements'; // 假设你用的是这个Icon组件

class YourScreen extends React.Component {
  static navigationOptions = {
    title: "Share To Feed",
    headerTitleAlign: 'center', // 标题居中
    headerRightContainerStyle: {
      marginRight: 15, // headerRight右外边距
    },
    headerLeft: (props) => (
      <Icon 
        name={"close-box-outline"} 
        size={40} 
        onPress={() => props.navigation.goBack()} 
      />
    ),
    headerRight: (
      <View>
        {/* 你的headerRight内容，比如图标或按钮 */}
      </View>
    ),
  };

  render() {
    return (
      {/* 你的页面内容 */}
    );
  }
}

export default YourScreen;

另外注意：你原来的headerLeft里直接调用navigation.goBack()会报错，因为在static navigationOptions里需要通过参数获取navigation对象，上面的代码已经修正了这个问题。

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