React Native + ExpoでWebアプリを作成し、Firebase Hostingへデプロイした際に「アイコンが表示されない」問題に遭遇しました。ローカル環境では問題なく表示されるのに、本番環境(デプロイ後)のみ発生したトラブルの解決手順をシェアします。
目次
Rootのファイルで利用しているフォントを読み込みます。
js
import {
Ionicons,
MaterialIcons,
MaterialCommunityIcons,
Feather,
FontAwesome,
} from '@expo/vector-icons';
import { useFonts } from 'expo-font';
export default function App() {
const [loaded] = useFonts({
...MaterialCommunityIcons.font,
...FontAwesome.font,
...Ionicons.font,
...MaterialIcons.font,
...Feather.font,
});
if (!loaded) {
return null; // フォントが読み込まれるまでは何も表示しない
}
// ここにアプリのUIを定義
return (
// ...
);
}
続いて.firebasercのignoreからnode_modulesを取り除きます。
.firebaserc
{
"ignore": [
"firebase.json",
"**/.*"
]
}
上記で解決するはずです。
LangJournalは、日記を書くことで英語やフランス語などの外国語を学べるアプリです。英語学習に興味がある方や、私が開発したこのアプリに関心を持っている方は、ぜひインストールしてお試しください。
LangJournalのサイトはこちら