web-dev-qa-db-ja.com

React Native Expo.Font.loadAsyncがマテリアルアイコンをロードしない

Reactネイティブ、Reactハイブリッドアプリがあります。Reactネイティブの場合、react-native-elementsを使用しています。

私のアプリはExpoを使用して実行され、react-native initでビルドされています。マテリアルアイコン（欠落）RSDを取得しています。

Material Icons missing

多くの検索の結果、@ expo/vector-iconsが見つかりましたが、機能していないようです。私のApp.jsは次のようになります。

import React from 'react'
import { Font, AppLoading } from 'expo'
import { MaterialIcons } from '@expo/vector-icons'
import HybridApp from './src/App'

export default class NativeApp extends React.Component {
  constructor() {
    super()
    this.state = {
      fontsAreLoaded: false
    }
  }
  async componentWillMount() {
    await Font.loadAsync(MaterialIcons.font)
    this.setState({ fontsAreLoaded: true })
  }
  render() {
    const { fontsAreLoaded } = this.state
    return !fontsAreLoaded ? <AppLoading /> : <HybridApp />
  }
}

ご覧のように、フォントが読み込まれるのを待っています...

react-nativeexpo
8
Alex

何時間もこれに頭を悩ませた後、答えはいつも私の前にありました。

おそらく、React Native ElementsはMaterialアイコンをMaterial Icons、notMaterialIconsとして参照します。

つまり、@expo/vector-iconsからのデフォルトのインポートは、マテリアルアイコンへの参照が異なるため機能しません。

解決策は、expoからマテリアルアイコンを手動で選択し、この行を置き換えることです。

await Font.loadAsync(MaterialIcons.font)

と

await Font.loadAsync({
  'Material Icons': require('@expo/vector-icons/fonts/MaterialIcons.ttf')
})

これが将来誰かを救ってくれることを願っています。

10
Alex

この質問は古いですが、私にとってうまくいったことは非常に簡単です

import { Ionicons } from "@expo/vector-icons";
await Font.loadAsync({...Ionicons.font, ...other imports })
0
Olalekan J Makanjuola

アイコンは実際にはフォントであり、最初にロードする必要があります。自動ロードされる場合とそうでない場合があります。

したがって、それらが確実にロードされるようにするには、次のようにします。

        import FontAwesome from './node_modules/@expo/vector-icons/fonts/FontAwesome.ttf';
        import MaterialIcons from './node_modules/@expo/vector-icons/fonts/MaterialIcons.ttf';
    ... 
      async componentWillMount() {
        try {
          await Font.loadAsync({
            FontAwesome,
            MaterialIcons
          });

          this.setState({ fontLoaded: true });
        } catch (error) {
          console.log('error loading icon fonts', error);
        }
      }
...
  render() {

    if (!this.state.fontLoaded) {

      return <AppLoading />;

    }

次に、型を参照するときは、使用しているコンポーネントが予期している型と同じでなければなりません。

たとえば、reactネイティブ要素は次のタイプを期待します：material-community、font-awesome、octicon、ionicon、foundation、evilicon、simple-line-icon、zocial、またはentypo

ここで完全な回答を参照してください： http://javascriptrambling.blogspot.com/2018/03/expo-icon-fonts-with-react-native-and.html

0
Kevin Williams