web-dev-qa-db-fra.com

Erreur de chargement de la police de base native

Je reçois l'erreur: You started loading 'Roboto_medium', but used it before it finished loading lorsque vous utilisez une base native.

enter image description here

J'ai suivi les instructions de la page officielle.

Pour créer une application native réactive, j'utilise create-react-native-app.

App.js

export default class App extends React.Component {

async componentWillMount() {
  await Expo.Font.loadAsync({
  'Roboto': require('native-base/Fonts/Roboto.ttf'),
  'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
  'Ionicons': require('@expo/vector-icons/fonts/Ionicons.ttf'),
 });
}

 render() {
   return (
    <Container>
      <StatusBar hidden={true} />

    <Button>
      <Text>
        Button
      </Text>
    </Button>

    <ListaItens />
    </Container>
  );
}
}
reactjsreact-nativenative-base
23
Igor Martins

vous devez attendre que les polices soient chargées. Vous pouvez faire quelque chose comme ça

import React from "react";
import { StatusBar } from "react-native";
import { Container, Button, text, ListItem, Text } from "native-base";
import Expo from "expo";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }

  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf"),
    });
    this.setState({ loading: false });
  }

  render() {
    if (this.state.loading) {
      return <Expo.AppLoading />;
    }
    return (
      <Container>
        <StatusBar hidden={true} />

        <Button>
          <Text>Button</Text>
        </Button>

        <ListItem />
      </Container>
    );
  }
}
49
akhil xavier

Si quelqu'un rencontre ce problème avec la famille de polices 'MaterialIcons', j'ai un problème similaire et j'ai constaté que cette solution fonctionnait:

https://javascriptrambling.blogspot.com.au/2018/03/expo-icon-fonts-with-react-native-and.html

Vous devez essentiellement:

  1. Installez les polices (en utilisant npm install)
  2. Effectuez un Font.loadAsync sur les polices de votre fonction ComponentWillMount ().
  3. N'oubliez pas de marquer la fonction ComponentWillMount () comme asynchrone
  4. L'affichage conditionnel soit en tant que "chargement" ou avec l'affichage en fonction de l'état d'un indicateur "chargé".

Par exemple:

import React from 'react';
import { View } from 'react-native';
import { Avatar } from 'react-native-elements';
import { AppLoading, Font } from 'expo';

import FontAwesome  
  from './node_modules/@expo/vector-icons/fonts/FontAwesome.ttf';

import MaterialIcons  
  from './node_modules/@expo/vector-icons/fonts/MaterialIcons.ttf';


export default class App extends React.Component {
  state = {
    fontLoaded: false
  };

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

    return (
      <View>
        <Text>My App</Text>
        <Avatar
          small
          rounded
          icon={{ name: 'add' }}
        /> 
      </View>
    );
  }
}
2
Andre DiCioccio

vous devez aller node_modules/yourPlugin/index.js trouver fontFamily et le supprimer

0
Naved Khan