web-dev-qa-db-fra.com

Réagissez Native Expo.Font.loadAsync ne charge pas les icônes de matériau

J'ai une application hybride React Native, React. Pour React Native, j'utilise react-native-elements.

Mon application est exécutée à l'aide d'Expo et a été créée avec l'init réact-native. Je reçois les icônes de matériel (manquantes) RSD;

 Material Icons missing

Après de nombreuses recherches, j'ai trouvé les @ expo/vector-icons mais cela ne semble pas fonctionner. Mon App.js ressemble à ceci;

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

Comme vous pouvez le constater, j'attends le chargement de la police ... tout cela en vain.

react-nativeexpo
6
Alex

Après des heures à me casser la tête, la réponse était là devant moi tout le temps. 

Il est vraisemblable que React Native Elements désigne les icônes de matériau sous la forme Material Icons, pas MaterialIcons.

Cela signifie que l'importation par défaut à partir de @expo/vector-icons ne fonctionne pas car leur référence aux icônes de matériau est différente.

La solution consiste à sélectionner manuellement les icônes de matériau dans expo, en remplacement de cette ligne.

await Font.loadAsync(MaterialIcons.font)

avec

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

J'espère que cela fera gagner un peu de temps à quelqu'un. 

9
Alex

Les icônes sont en fait des polices et doivent d'abord être chargées. Il semble qu'ils soient parfois chargés automatiquement et d'autres fois non.

Donc, pour vous assurer qu'ils sont chargés, procédez comme suit:

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

    }

Ensuite, lorsque vous référencez le type, il doit correspondre au type attendu par le composant que vous utilisez. 

Par exemple, les éléments natifs de réaction s’attendent à ces types: communauté matérielle, police géniale, octicon, ionicon, fondation, evilicon, icône simple de ligne, zocial ou entypo.

Voir la réponse complète ici: http://javascriptrambling.blogspot.com/2018/03/expo-icon-fonts-with-react-native-and.html

0
Kevin Williams