7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-01-25

問題

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

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?