Загрузка пользовательских шрифтов в React Native выдает ошибку

Question

fontFamily "pro" не является системным шрифтом и не был загружен через Font.loadAsyn c.

• Если вы намеревались использовать системный шрифт, убедитесь, что вы правильно ввели имя и что он поддерживается операционной системой вашего устройства.

- Если это настраиваемый шрифт, обязательно загрузите его с помощью Font.loadAsyn c.

Но если я отклонить ошибку Я вижу, что шрифт загружен.

Вот мой код:

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

Answer 1

вы не откладываете представление приложения в зависимости от состояния загрузки, поэтому вы визуализируете приложение до того, как шрифт загружен, поэтому возникает ошибка.

обратите внимание на в этом примере , что компонент AppLoading отображается при загрузке шрифтов, вы можете использовать это, если хотите, или все, что вы хотите отобразить.

также не имеет отношения к вашему вопросу, но, к вашему сведению, вам не нужно использовать then(), если вы используете await

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