自定义 Header 在 React Native 中变窄

Question

我有以下问题。 当我成功登录我的帐户并将 go 登录到主屏幕页面时，我的 Header 变窄了。 截屏。 登录前的header这是什么原因？ 截屏。 登录后的header

注销后 Header 保持不变。 截屏。 登录后的header

应用程序.js：

const Stack = createNativeStackNavigator();

export default function App() {

  return (
    <NavigationContainer>
      <Stack.Navigator
          screenOptions={{
            headerTitle: (props) => <Header {...props} /> 
         }}
      >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
      <FlashMessage position="top" />
    </NavigationContainer>
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    
  },
});

Header.js：

const Header = (props) => {
    return (
     <View style={styles.header}>
      <Image
        style={styles.image}
        source={require('../assets/logo_1.png')} 
      />
     </View>
    );
  }

  export default Header;

  const styles = StyleSheet.create({
    header: {
      
      width: '100%',
      height: 118,
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: '#E4B062',
      marginRight: 35,
      marginTop: -Constant.statusBarHeight
    },
    image: {
      position: 'absolute',
      width: 70, 
      height: 63, 
      left: 15,  
    }
  });