Help us understand the problem. What is going on with this article?

NativeBaseでのRoboto_mediumフォントの読み込みに関するErrorについて

More than 1 year has passed since last update.

問題

https://facebook.github.io/react-native/docs/getting-started.html
https://docs.nativebase.io/docs/GetStarted.html
の手順でReact NativeとNative BaseをインストールしてExpoで動作確認しようとすると、
fontFamily 'Roboto_medium' is not a system font and has not been loaded through Exponent.Font.loadAsync.
というErrorが出たため、

https://docs.nativebase.io/docs/GetStarted.html
を参考に以下のコードをApp.jsに追加したものの解決せず、
You started loading 'Roboto_medium', but used it before it finished loading
という別のErrorが出てしまいました.

App.js
async componentWillMount() {
  await Expo.Font.loadAsync({
    'Roboto': require('native-base/Fonts/Roboto.ttf'),
    'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
  });
}

解決策

最終的には、
https://github.com/GeekyAnts/NativeBase/issues/1041
https://github.com/GeekyAnts/NativeBase-KitchenSink/blob/master/src/boot/setup.js
https://docs.expo.io/versions/latest/guides/using-custom-fonts.html
の3つを参考に、App.jsを以下のように変更すると上手くいきました.

App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { Container } from 'native-base';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }
  componentWillMount() {
    this.loadFonts();
  }
  async loadFonts() {
    await Expo.Font.loadAsync({
      Roboto: require("./node_modules/native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("./node_modules/native-base/Fonts/Roboto_medium.ttf"),
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }

    return (
      <Container>
        {/* fontのloadが終了した際にレンダリングしたいものをここに書く */}
      </Container>
    );
  }
}

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした