如何在React类组件中调用函数式组件实现字体加载状态更新

方案1：抽离字体加载逻辑为公共函数，直接在App类组件中调用 #

这是最适配你现有类组件写法的方案，无需大幅改动现有App结构。
首先修改你的缓存逻辑文件，把字体加载逻辑单独抽离为可复用的异步函数：

// cache.js
import * as Font from 'expo-font';
import SplashScreen from 'expo-splash-screen';

// 抽离成独立的异步加载函数
export async function loadFontResources() {
  try {
    await SplashScreen.preventAutoHideAsync();
    await Font.loadAsync({
      // 此处填写你的字体配置，示例：
      // 'custom-font': require('./assets/fonts/CustomFont.ttf')
    });
  } finally {
    await SplashScreen.hideAsync();
  }
}

然后修改App.js文件：

import { loadFontResources } from './cache';

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
      loggedIn: false, // 建议提前初始化该state，避免未定义报错
    };
  }

  async componentDidMount() {
    // 先执行字体加载逻辑，完成后更新状态
    await loadFontResources();
    this.setState({ loaded: true });

    // 原有登录状态监听逻辑保持不变
    firebase.auth().onAuthStateChanged((user) => {
      this.setState({
        loggedIn: !!user,
      });
    });
  }

  render() {
    const { loggedIn, loaded } = this.state;

    if (!loaded) {
      return null; // 也可以替换为自定义的启动屏占位UI
    }
    
    // 加载完成后渲染实际业务内容，可根据loggedIn判断跳转登录页还是首页
    return loggedIn ? <HomePage /> : <LoginPage />;
  }
}

方案2：保留组件形式，通过回调传递加载状态 #

如果你需要保留现有组件形式的写法，可以给Cache组件新增回调props，在App中渲染该组件并监听加载完成事件：
首先修改Cache组件：

export default function Cache({ onLoadComplete }) {
  const [isLoadingComplete, setLoadingComplete] = React.useState(false);

  React.useEffect(() => {
    async function loadResourcesAndDataAsync() {
      try {
        SplashScreen.preventAutoHideAsync();
        await Font.loadAsync({
          /// 此处填写你的字体配置
        });
      } finally {
        setLoadingComplete(true);
        SplashScreen.hideAsync();
        // 加载完成后触发回调
        onLoadComplete?.();
      }
    }

    loadResourcesAndDataAsync();
  }, [onLoadComplete]);

  // 加载过程中不渲染任何可视内容
  return null;
}

然后修改App.js的渲染逻辑：

import Cache from './Cache';

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
      loggedIn: false,
    };
  }

  componentDidMount() {
    firebase.auth().onAuthStateChanged((user) => {
      this.setState({
        loggedIn: !!user,
      });
    });
  }

  // 字体加载完成的回调方法
  handleFontLoadComplete = () => {
    this.setState({ loaded: true });
  }

  render() {
    const { loggedIn, loaded } = this.state;

    if (!loaded) {
      return <Cache onLoadComplete={this.handleFontLoadComplete} />;
    }

    return loggedIn ? <HomePage /> : <LoginPage />;
  }
}

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