@ expo / vector-icons，如何使用react-navigation加载字体

Question

I am trying to use this with react-navigation and I keep getting:

fontFamily 'Feather' is not a system font and has not been loaded through Expo.Font.loadAsync

I am using the Font.loadAsync() method in my loading component but the error keeps showing up. I actually ended up removing all vector icons from my app in order to start clean.

So my question is if I have a switch navigator which starts with a loading screen (this starts the auth check) and switches either to login screen or root tab container which contains the meat of my app. I cant seem to figure out where to call Font.loadAsync()

Here is my MainNavigator.js

export default createBottomTabNavigator(
    {
        Friends: FriendsList,
        Profile: Profile,
        Settings: Settings
    },
    {
        defaultNavigationOptions: ({navigation}) => ({
            tabBarIcon: ({tintColor}) => {
                const {routeName} = navigation.state;
                let iconName;
                if (routeName == "Friends") {
                    iconName = "users"
                } else if (routeName == "Profile") {
                    iconName = "user"
                } else if (routeName == "Settings") {
                    iconName = "settings"
                }
                return <Feather name={iconName} size={20} color={tintColor} />
            }
        }),
        tabBarOptions: {
            style: {
                backgroundColor: "#fff"
            }, 
            inactiveTintColor: "#999",
            activeTintColor: TERTIARY_COLOR
        }
    }
)

App.js

// Screens for Switch Navigator
import AuthScreens from "./components/screens/AuthScreens";
import LoadingScreen from "./components/screens/Loading";
import MainNavigator from "./MainNavigator";

const AppContainer =  createAppContainer(createSwitchNavigator(
    {
        LoadingScreen,
        AuthScreens,
        MainNavigator
    },
    {
        initialRouteName: "LoadingScreen"
    }
))

Loading Screen

export default class LoadingScreen extends Component {
    async componentDidMount() {
        try{
            await Font.loadAsync({
                FeatherFont
            })
            firebase.auth().onAuthStateChanged(user => {
                this.props.navigation.navigate(user ? "MainContainer" : "LoginScreen")

            })
        } catch(error) {
            alert(error)
        }

    }
    render() {
        return (
            <View style={{ flex: 1, justifyContent: "center", alignItems: "center"}}>
                <ActivityIndicator/>
            </View>
        )
    }
}

Answer 1

You need to load them in the App.js inside _loadResourcesAsync unsing the Font.loadAsync()

_loadResourcesAsync = async () => {
   // blablabla 
    return Promise.all([
      Asset.loadAsync([
        require('random images'),
      ]),
      Font.loadAsync(
         // this line is where you load the font, name and path
        {Feather: require('./assets/fonts/Feather-path.ttf')},

      ),
    ]);
  };

And then inside the render function :

render() {
    if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <View style={styles.container}>
          <StatusBar barStyle="light-content" />
          <AppNavigator style={styles.container} />
          <BarraOffline connected={this.state.isConnected}/>
        </View>
      );
    }
  }

Answer 2

I don't know your definition of FeatherFont ,

but I don't think Font recognize it as a font.

Font is the module that deals with font-related tasks.

1. First, we must load the font from our assets directory using Expo.Font.loadAsync() .
2. We can do this in the componentDidMount() lifecycle method of the App component.
3. Add the following method in App :
4. Now that we have the font files saved to disk and the Font SDK imported, let's add this code:

We need a way to re-render the Text component when the font has finished loading.

1. First we initialize fontLoaded to false in the App class constructor:

class App extends React.Component {
  state = {
    fontLoaded: false,
  };

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

    this.setState({ fontLoaded: true });
  }
}

With React Native you specify fonts in Text components using the fontFamily style property. The fontFamily is the key that we used with Font.loadAsync .

Usage

<Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>
  Hello, world!
</Text>