堆栈浏览器的自定义标题标题

Question

我在登录页面的AsyncStorage中设置一个“名称”。然后，我尝试在主页的堆栈导航器标题中显示此名称（登录导航到主页），但是它不起作用。

let propName = 'Property';

class HomeScreen extends React.Component {
    componentDidMount = async() => {
        await AsyncStorage.getItem('Name')
            .then((value) => {
                const nameTest= JSON.parse(value);
                console.log(nameTest);
                propName = nameTest;
        });
    }
...

const MainStackNavigator = createStackNavigator({
    Home: {
      screen: TabNavigator
    }
  }, {
    defaultNavigationOptions: ({ navigation }) => {
        return {
          headerLeft: (
            <Ionicons
              style={{ paddingLeft: 10 }}
              onPress={() => navigation.openDrawer()}
              name="md-menu"
              size={30}
            />
          ),
          headerTitle: ( propName ),
          headerRight: (
            <Entypo 
                style={{ paddingRight: 10 }}
                onPress={() => console.log('test')}
                name="log-out"
                size={30}
            />
          )
        };
      }
});

它始终在标题中显示“属性”，而不是AsyncStorage“名称”变量中的值。为什么会发生？

谢谢