将认知用户名显示为文本

Question

我觉得这应该是一项非常容易的任务，但我找不到任何这样的例子，并且我自己尝试了很多方法来做到这一点。我试图简单地调用Auth.currentSession() 来检索我的 React Native 应用程序中的认知用户的用户名。到目前为止，此代码不允许加载应用程序，我只是得到一个空白屏幕。我尝试过的大多数解决方案要么导致空白屏幕，要么根本不显示任何内容。

import React from 'react';
import { Auth } from 'aws-amplify';
import { View, Text } from 'react-native';

class HomeScreen extends React.Component {
  getUsername = async () => {
    try {
      let info = await Auth.currentSession()
      let userName = info.idToken.payload['cognito:username']
      return userName
    } catch(err) {
      console.log(err)
    }
  }
  
  render() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Text>{this.getUsername()}</Text>
    </View>
  );
}}

export default HomeScreen;

以下代码不显示任何内容：

  render() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Text>{this.getUsername}</Text> // or {getUsername} or {getUsername()}
    </View>
  );
}}

我也试过这个：

function Homescreen() {

   async function getUsername() {
    try {
      let info = await Auth.currentSession()
      let userName = info.idToken.payload['cognito:username']
      return userName
    } catch(err) {
      console.log(err)
    }
  }
  
  render() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Text>{this.getUsername()}</Text>
    </View>
  );
}}

我应该警告这是我第一次编写 JS，所以我可能会遗漏一些非常明显的东西，并为此提前道歉。请帮忙，谢谢！

更新

class HomeScreen extends React.Component {
  constructor() {
    this.state = {name:''}
  }
  
  componentDidMount(){
    getUsername()
  }
  
  getUsername = async () => {
    try {
      let info = await Auth.currentSession()
      let userName = info.idToken.payload['cognito:username']
      this.setState({name: userName})
    } catch(err) {
      console.log(err)
    }
  };

  render() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Text>{this.state.name}</Text>
    </View>
  );
}}

产量：

Answer 1

需要在render方法中添加状态更新显示

constructor(){
  this.state = {name: ""}
}

componentDidMount(){
  getUsername()
}

getUsername = async () => {
  try {
    let info = await Auth.currentSession()
    let userName = info.idToken.payload['cognito:username']
    this.setState({name: userName })
  } catch(err) {
    console.log(err)
  }
}

并更新回报

<Text>{this.state.name}</Text>