时间戳

首页 > 解决方案 > React Native 异步字体加载

react-native - React Native 异步字体加载

问题描述

我正在使用 react-native-cli 构建一个 React 本机代码项目，无论如何都可以在没有 Expo 的情况下异步加载字体？在我的 cli 本机项目中从“expo”导入 { Font } 会不会有问题？

标签： react-nativeexpo

解决方案

如果你想使用外部字体（如谷歌字体等）或任何矢量图标（如蚂蚁图标），你必须在应用渲染之前加载，像这样

import * as Font from "expo-font";
import { AppLoading } from "expo";

async componentDidMount() {
    await Font.loadAsync(
      "antoutline",
      require("@ant-design/icons-react-native/fonts/antoutline.ttf")
    );
    await Font.loadAsync(
      "antfill",
      require("@ant-design/icons-react-native/fonts/antfill.ttf")
    );
    this.setState({ isReady: true });
}

render() {
    const { theme, currentTheme, isReady } = this.state;
    if (!isReady) {
      return <AppLoading />;
    }
    const Loader = createAppContainer;
    return (
      <Provider theme={theme}>
        <Loader  />
      </Provider>
    );
  }

推荐阅读