it-swarm.com.de

React Native Expo.Font.loadAsync lädt keine Materialsymbole

Ich habe eine React Native, React-Hybrid-App. Für "React Native" verwende ich reaktive Elemente.

Meine App wird mit Expo ausgeführt und wurde mit der React-native init erstellt. Ich erhalte die Materialsymbole (fehlt) RSD;

 Material Icons missing

Durch langes Suchen habe ich die @ expo/vector-icons gefunden, aber es scheint nicht zu funktionieren. Mein App.js sieht so aus;

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 />
  }
}

Wie Sie sehen, warte ich darauf, dass die Schrift geladen wird ... alles ohne Erfolg.

6
Alex

Nachdem ich mich stundenlang mit diesem Gehirn beschäftigt hatte, war die ganze Zeit die Antwort vor mir. 

Vermutlich bezieht sich Native Elemente reagieren auf Material-Icons als Material Icons, nicht MaterialIcons.

Dies bedeutet, dass der Standardimport aus @expo/vector-icons nicht funktioniert, da der Verweis auf Materialsymbole unterschiedlich ist.

Die Lösung besteht darin, manuell Materialsymbole in expo auszuwählen und diese Zeile zu ersetzen.

await Font.loadAsync(MaterialIcons.font)

mit

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

Ich hoffe, das erspart jemandem in Zukunft etwas Zeit. 

9
Alex

Die Symbole sind eigentlich Schriftarten und müssen zuerst geladen werden. Es scheint, dass sie manchmal automatisch geladen werden und andere nicht.

So stellen Sie sicher, dass sie geladen sind:

        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 />;

    }

Wenn Sie dann auf den Typ verweisen, muss es derselbe Typ sein, den die von Ihnen verwendete Komponente erwartet. 

Reagieren native Elemente erwartet zum Beispiel diese Typen: Material-Community, Font-Awesome, Octicon, Ionicon, Foundation, Evilicon, Simple-Line-Icon, Zocial oder Entypo

Die vollständige Antwort finden Sie hier: http://javascriptrambling.blogspot.com/2018/03/expo-icon-fonts-with-react-native-and.html

0
Kevin Williams