React Native Async Font Loading

问题

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?

回答1:

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

来源：https://stackoverflow.com/questions/54094846/react-native-async-font-loading