为什么我的标题标题在 React Native 和 iOS 模拟器中被截断？

Question

我正在使用这些依赖项：

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

我的

AuthNavigator

：

...
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

任何想法或建议都非常感激！

Answer 1

据我所知，也许您的字体样式有一些问题，请尝试删除您的字体系列并尝试不使用它。因为您的导航库看起来没有问题。如果库有任何问题，那么标题中的后退图标也会被切断。