app.js 中的 Expo 自定义 fonts 和 BottomTabNavigator

Question

I'm trying to currently load custom fonts using Expo's method foundhere

As the link suggests, it wants me to add the following code to my app.js file

 export default class App extends React.Component { componentDidMount() { Font.loadAsync({ 'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf'), }); }

However, I'm having difficulty adding that code to my existing app.js code, which includes a CreateBottomTabNaviagator, shown below:

 import { createStackNavigator, createAppContainer } from 'react-navigation'; import HomeScreen from './src/screens/HomeScreen'; import SavedCollapsibleScreen from "./src/screens/SavedCollapsibleScreen"; import { createBottomTabNavigator, } from 'react-navigation-tabs'; import { Ionicons } from '@expo/vector-icons'; import React, {Component} from "react"; import View from "react-native-web/dist/exports/View"; const Navigator = createBottomTabNavigator( { Home: HomeScreen, SavedPlaces: SavedCollapsibleScreen, }, { initialRouteName: 'SavedPlaces', //headerMode: 'none', defaultNavigationOptions: ({ navigation }) => ({ tabBarIcon: ({ focused, horizontal, tintColor }) => { const { routeName } = navigation.state; let IconComponent = Ionicons; let iconName; if (routeName === 'Home') { iconName = `ios-information-circle${focused? '': '-outline'}`; // Sometimes we want to add badges to some icons. // You can check the implementation below. //IconComponent = HomeIconWithBadge; } else if (routeName === 'SavedPlaces') { iconName = `ios-add-circle${focused? '': '-outline'}`; } // You can return any component that you like here; return <IconComponent name={iconName} size={25} color={tintColor} />, }, }): tabBarOptions: { activeTintColor, 'tomato': inactiveTintColor, 'gray': showLabel,false, }, }; ); export default createAppContainer(Navigator);

How do I go about adding the custom font code into my already existing app.js?

I've been trying for 3 hours and couldn't get it to work.

Thank you in advance!

Answer 1

Created example: https://snack.expo.io/@djalik/test

By using dynamically createAppContainer method in render of Main App Container when font will be loaded:

render()
  {
    const MainApp = !this.state.isLoading? createAppContainer(Navigator):<></>;
     return this.state.isLoading?<AppLoading/>:<MainApp/>;
  }