Loading custom fonts in React Native is giving error

问题

fontFamily "pro" is not a system font and has not been loaded through Font.loadAsync.

• If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

But if I dismiss the error I see that the font has loaded.

Here is my code:

    export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {loading: true};
  }

  async componentDidMount() {
    await Font.loadAsync({
      pro: require('./assets/fonts/MavenPro-Regular.ttf'),
      medium: require('./assets/fonts/MavenPro-Medium.ttf'),
    }).then(() => {
      this.setState({loading: false});
    });
  }

  render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          {
            <Drawer.Navigator
              drawerType={'slide'}
              drawerContent={(props) => <DrawerContent {...props} />}>
              <Drawer.Screen
                name="Home"
                component={HomeStackScreen}
                options={{
                  swipeEnabled: false,
                }}
              />
            </Drawer.Navigator>
          }
        </NavigationContainer>
      </Provider>
    );
  }
}

回答1:

you're not delaying presenting the app based on the loading state, so you are rendering the app before the font has loaded, thus the error.

notice in this example that the AppLoading component is rendered while loading fonts, you can use this if you want, or whatever else you would like to display.

---

also, not related to your question but fyi you don't need to use then() if you're using await

await doSomething();
this.setState({ done: true });

来源：https://stackoverflow.com/questions/62460088/loading-custom-fonts-in-react-native-is-giving-error