reactjs - react - Cargando fuente fuente nativa error

react css

Question

Recibo el error: You started loading ''Roboto_medium'', but used it before it finished loading cuando se usa la base nativa.

He seguido las instrucciones en la página oficial.

Para crear una aplicación nativa reactiva, estoy usando 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>
  );
}
} 

Answer 1

Si alguien tiene este problema con la familia de fuentes ''MaterialIcons'', tuve un problema similar y encontré que esta solución funcionaba:

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

Básicamente necesitas:

1. Instale las fuentes (usando npm install)
2. Haga un Font.loadAsync en las fuentes en su función componentWillMount ().
3. Recuerde marcar la función componentWillMount () como async
4. Los condicionalmente se muestran como ''cargando'' o con la vista dependiendo del estado de una bandera ''cargada''.

Por ejemplo:

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

Answer 2

Una razón por la que tiene que cargar la fuente es porque está utilizando el componente Texto base nativo. Si importa el componente React Native Text en su lugar, ni siquiera tendrá que cargar fuentes y no verá ese error.

Answer 3

debe ir a node_modules / yourPlugin / index.js encontrar fontFamily y eliminarlo

Answer 4

tienes que esperar hasta que las fuentes se carguen. Puedes hacer algo como esto

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