React Native与iOS模拟器中导航栏标题被截断的问题求助

依赖版本 #

"@react-navigation/native": "^6.1.18",
"@react-navigation/native-stack": "^6.11.0",

现有代码 #

...
import { createNativeStackNavigator } from '@react-navigation/native-stack';
...

const Stack = createNativeStackNavigator();

const AuthNavigator = ({ refresh, emailVerificationError }) => {
  return (
    <SafeAreaView style={{ flex: 1, marginTop: 20}}>
      <Stack.Navigator initialRouteName="Landing">
        <Stack.Screen
          name="Landing"
          component={Landing}
          options={{
              headerShown: false,
              headerBackTitleVisible: false,
             }}
        />
        <Stack.Screen
          name="Sign in"
          component={Login}
          options={{
            headerStyle: {
              backgroundColor: "#0696d4",
              alignSelf: 'center',
            },
            headerBackTitleVisible: false,
            headerTintColor: "#fff",
            headerTitleAlign: "center",
            headerTitleStyle: {
              fontWeight: "bold",
              fontFamily: Platform.OS === 'ios' ? "DamascusMedium" : "sans-serif-medium",
            },
          }}
        />
      </Stack.Navigator>
    </SafeAreaView>
  );
};

export default AuthNavigator;

问题情况 #

在iPhone 15 Plus（iOS 17.4）模拟器中，"Sign in"标题文本出现截断，调整内边距、外边距均无效。

解决思路 #

• 移除headerStyle中的alignSelf: 'center'：该属性会限制header的宽度，导致标题可用空间不足被截断，删除后header会默认占满屏幕宽度，标题即可正常显示。
• 自定义标题容器样式：若需微调标题空间，可通过headerTitleContainerStyle设置，比如添加paddingHorizontal: 16或width: '80%'，避免标题被返回按钮挤压。
• 验证字体兼容性：确认iOS上的DamascusMedium字体已正确导入并渲染，部分自定义字体可能存在字符宽度计算异常，可临时替换为系统字体测试是否解决问题。
• 调整SafeAreaView布局：当前SafeAreaView设置的marginTop:20可能干扰header布局计算，可尝试移除该外边距，或把SafeAreaView移到Navigator内部的屏幕组件中，而非包裹整个Navigator。

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