React Native 异步字体加载 | 异步字体加载

本文介绍了React Native 异步字体加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 react-native-cli 构建一个 React 本机代码项目，是否可以在没有 Expo 的情况下异步加载字体?在我的 cli 原生项目中从expo"导入 { Font } 会不会有问题?

I'm building a React native code project using react-native-cli, is there anyway to Async Load fonts without Expo? Would there be a problem simply importing { Font } from 'expo' in my cli native project?

推荐答案

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

If you want to use the external font (e.g. Google fonts, etc.) or any vector icons (e.g. ant icons), you have to load before app render, like this

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>
    );
  }

这篇关于React Native 异步字体加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！