問題
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が出てしまいました.
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
を以下のように変更すると上手くいきました.
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>
);
}
}