React Native中async componentDidMount不执行：CacheImage组件开发求助

正在开发一款名为 CacheImage 的组件，用于将图片缓存到本地。该组件接收 url地址 和 style 作为参数，返回匹配指定URL与样式的Image组件，图片存储使用Firebase Storage。

当前实现的组件代码如下：

import React from 'react';
import { Image } from 'react-native';
import shorthash from 'expo'
import { FileSystem } from 'expo';

export default class CacheImage extends React.Component {
  state = {
    source: null,
  };

  componentDidMount = async () => {
    const { uri } = this.props;
    const name = shorthash.unique(uri);
    alert(name);
    const path = `${FileSystem.cacheDirectory}${name}`;
    const image = await FileSystem.getInfoAsync(path);
    if (image.exists) {
      alert('read image from cache');
      this.setState({
        source: {
          uri: image.uri,
        },
      });
      return;
    }

    alert('downloading image to cache');
    const newImage = await FileSystem.downloadAsync(uri, path);
    this.setState({
      source: {
        uri: newImage.uri,
      },
    });
  };

  render() {
    return <Image style={this.props.style} source={this.state.source} resizeMode='cover'/>;
  }
}

当前异常表现：程序完全没有进入使用async修饰的componentDidMount生命周期函数。

常见原因和排查方向：

• 导入错误导致组件加载阶段直接崩溃，生命周期无法执行
  • 代码中引入的shorthash、FileSystem都不是Expo SDK的默认导出模块，错误的导入会让组件在初始化阶段就抛出异常、中断渲染流程，自然不会执行后续的componentDidMount逻辑。
  • 修正导入路径：shorthash为独立第三方库，需要单独安装后按需引入；FileSystem在新版Expo中需要从expo-file-system模块导入。
• 组件未被正确挂载
  • 检查组件的调用逻辑，确认CacheImage标签没有被错误的条件判断隐藏、没有被父组件意外卸载，保证组件完成完整的渲染挂载流程。
• 生命周期写法兼容性问题
  • 类组件中将componentDidMount赋值为箭头函数的写法，在部分旧版React Native环境下可能存在生命周期识别异常，可尝试改写为标准类方法写法测试。

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