React Native的Drawer Navigation抽屉导航如何实现头部标题居中

方法1：使用官方原生配置（最推荐） #

React Navigation原生提供了headerTitleAlign属性用来统一控制双端标题对齐方式，直接设置为center即可实现iOS、安卓双端标题居中，无需自定义标题组件，稳定性最高：

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        // 核心配置，双端统一居中
        headerTitleAlign: 'center',
        headerTitle: 'Title'
      }}
      drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Screen1" component={Screen1} />
    </Drawer.Navigator>
  );
};

方法2：自定义标题组件（适配复杂样式需求） #

如果需要自定义标题的样式、添加图标等元素，可以用弹性布局替代硬编码的固定宽度，自动适配导航栏剩余空间，适配所有屏幕尺寸和左右按钮场景：

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerTitle: () => {
          return (
            <View
              style={{
                // 用flex:1自动占满中间可用区域，不要写固定宽高
                flex: 1,
                justifyContent: 'center',
                alignItems: 'center',
              }}>
              <Text style={{fontSize: 18, fontWeight: 'bold'}}>自定义标题</Text>
            </View>
          );
        },
        // 配合这个属性确保对齐逻辑一致
        headerTitleAlign: 'center',
      }}
      drawerContent={props => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Screen1" component={Screen1} />
    </Drawer.Navigator>
  );
};

原代码问题说明 #

你之前的写法通过硬编码减去固定比例宽度计算标题区域宽度，在不同屏幕尺寸、导航栏左右存在额外按钮的场景下容易出现偏移，容错性低。使用flex:1可以让标题容器自动占满导航栏中间的可用区域，从根本上解决适配问题。

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