How to load “ionicons” font in expo sdk33?

问题

after upgrading to expo sdk 33.0.0, when i build my react native expo app everything is ok but as soon as the app starts the the following error shows up:

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

before the update i was using the sdk version 32.0.0 and everything was ok.

I tried to add the font as explained here https://docs.expo.io/versions/latest/guides/using-custom-fonts/ in my app.js componentDidMount function:

const Ionicons = require("./fonts/Ionicons.ttf");
...
componentDidMount() {
    ...
    Font.loadAsync({
        "Avenir-Book": AvenirBook,
        "Avenir-Light": AvenirLight,
        "Ionicons": Ionicons,
    })
}
...

I also try to change the name in the loadAsync from "Ionicons" to "ionicons" but nothing changed.

The "Ionicons.ttf" inside the fonts folder file was copied from the node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts folder

---------EDIT--------- In all my react native expo project src i have not a single reference to Ionicon

Any help is appreciated, Thanks

回答1:

To import Ionicons icons do

import { Ionicons } from '@expo/vector-icons';
// use like
<Ionicons name="md-checkmark-circle" size={32} color="green" />

And to import custom fonts, add the path to the font to require.

import { Font } from 'expo';

componentDidMount() {
  Font.loadAsync({
    'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'),
  });
}

来源：https://stackoverflow.com/questions/56750684/how-to-load-ionicons-font-in-expo-sdk33

标签

react-native

expo