React Native如何调用Auth.currentSession()展示Cognito用户名

核心错误原因 #

1. async函数不能直接在render方法中调用并渲染返回值：所有async函数默认返回Promise实例，React无法直接将Promise渲染为文本内容，这是你最开始出现白屏/无内容的核心原因。
2. 你后续修改的带state的类组件版本存在两个语法错误：
   • Class组件的constructor方法必须先调用super()才能使用this关键字，否则会直接抛出初始化错误
   • componentDidMount中调用类内部定义的方法，需要加this.前缀，否则JS会认为你要调用全局作用域下的getUsername方法，找不到就会抛出报错
3. 你之前尝试的函数式组件写法错误原因是：函数式组件没有render方法，也不存在类组件的this指向，不能套用类组件的写法逻辑。

正确实现 #

类组件版本

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

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ''
    }
  }
  
  componentDidMount(){
    this.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);
      // 可自定义异常场景展示内容，比如未登录时提示跳转登录
      this.setState({name: '未获取到用户信息'});
    }
  };

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

export default HomeScreen;

函数式组件版本

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

const HomeScreen = () => {
  const [userName, setUserName] = useState('');

  // 组件挂载后执行一次获取用户名逻辑
  useEffect(() => {
    const getUsername = async () => {
      try {
        const info = await Auth.currentSession();
        const name = info.idToken.payload['cognito:username'];
        setUserName(name);
      } catch (err) {
        console.log(err);
        setUserName('未获取到用户信息');
      }
    }
    getUsername();
  }, []);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Text>{userName}</Text>
    </View>
  );
}

export default HomeScreen;

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