Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Erro ao importar as fontes.

Referente ao curso React Native: criando um app, no capítulo Componentes e estilos e atividade Fonte externa

por Anderson da Silva Machado
| 166.8k xp | 125 posts
Analista de Sistemas Junior

Meu código da classe App.js está desta maneira:

import React from 'react';
import { StatusBar, View, SafeAreaView } from 'react-native';
import { 
         useFonts,
         Montserrat_400Regular,
         Montserrat_700Bold,
         Montserrat_400Regular_Italic
       } from '@expo-google-fonts/montserrat';


import Cestas from './src/telas/Cestas.js';

export default function App() {

  const [fonteCarregada] = useFonts({
    "MontserratRegular": Montserrat_400Regular,
    "MontserratBold": Montserrat_700Bold
  });

  if(!fonteCarregada){
    return <View/>
  }

  return (
    <SafeAreaView>
      <StatusBar/>
      <Cestas />
    </SafeAreaView>
  );
}

a instalação da fonte foi realizada com sucesso.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

porém dentro do meu App.js ele apresenta o seguinte erro:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Estava tentando corrigir e ficou pior (tentei instalar em outros locais daí ele me gerou essa tela abaixo)

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

eu cheguei a reiniciar a aplicação a e npm start, porém estou obtendo os erros abaixo: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

no celular ficou desse jeito

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Também tentei baixar a versão do projeto disponível do Github -queria fazer um comparativo para ver o porque o meu não estava funcionando- infelizmente tive o bug abaixo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

6 respostas
por André Cunha
| 144.3k xp | 236 posts
Desenvolvedor Mobile

Olá Anderson, tudo bem?

Estava olhando a documentação desse npm e pelo que eu vi agora precisa rodar esse comando no terminal para baixar as fontes:

expo install @expo-google-fonts/montserrat expo-font expo-app-loading

Vê se isso te ajuda. Se não funcionar pode compartilhar o link do repositório do seu projeto para identificarmos melhor o erro?

por Anderson da Silva Machado
| 166.8k xp | 125 posts
Analista de Sistemas Junior

Infelizmente não executou, ontem eu corrigi um erro (infelizmente não lembro como), mas senão me engano era erro de dedo. A instalação foi realizada com sucesso:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Corrigi a linha 40 também. Antes

const estilos = StyleSheet.create({
    topo: {
        width: "100%",
        height: 578 / 768 * width,
        fontFamily: "Montserrat",
    },
    titulo:{
        width: "100%",
        position: "absolute",
        textAlign: "center",
        fontSize: 16, //altura da fonte
        lineHeight: 16, //
        color: "white", //cor da fonte que é branco
        fontWeight: "bold", //definir a gordura da fonte
        padding: 16, //margem da fonte
    },
    cesta:{
        paddingVertical: 8,
        paddingHorizontal: 16,
    },
    nome:{
        color: "#464646",
        fontSize: 26,
        lineHeigth: 42, //tamanho da linha
        fontWeight: "bold",
    },
    fazenda:{
        flexDirection: "row",
        paddingVertical: 12,
    },
    imagemFazenda:{
        width: 32,
        height: 32,
    },
    nomeFazenda:{
        fontSize: 16,
        lineHeight: 26,
        marginLeft: 12,
    },
    descricao: {
        color: "#A3A3A3",
        fontSize: 16,
        lineHeight: 26
    },
    preco: {
        color: "#2A9F85",
        fontWeight: "bold",
        fontSize: 26,
        lineHeight: 42,
        marginTop: 8,
    }
});

Agora 

const estilos = StyleSheet.create({
    topo: {
        width: "100%",
        height: 578 / 768 * width,
        fontFamily: "MontserratRegular",
    },
    titulo:{
        width: "100%",
        position: "absolute",
        textAlign: "center",
        fontSize: 16, //altura da fonte
        lineHeight: 16, //
        color: "white", //cor da fonte que é branco
        fontWeight: "bold", //definir a gordura da fonte
        padding: 16, //margem da fonte
    },
    cesta:{
        paddingVertical: 8,
        paddingHorizontal: 16,
    },
    nome:{
        color: "#464646",
        fontSize: 26,
        lineHeigth: 42, //tamanho da linha
        fontWeight: "bold",
    },
    fazenda:{
        flexDirection: "row",
        paddingVertical: 12,
    },
    imagemFazenda:{
        width: 32,
        height: 32,
    },
    nomeFazenda:{
        fontSize: 16,
        lineHeight: 26,
        marginLeft: 12,
    },
    descricao: {
        color: "#A3A3A3",
        fontSize: 16,
        lineHeight: 26
    },
    preco: {
        color: "#2A9F85",
        fontWeight: "bold",
        fontSize: 26,
        lineHeight: 42,
        marginTop: 8,
    }
});
por Anderson da Silva Machado
| 166.8k xp | 125 posts
Analista de Sistemas Junior

Este é o link do projeto:

https://github.com/anderson361163/reactNative

solução!
por André Cunha
| 144.3k xp | 236 posts
Desenvolvedor Mobile

Fala Anderson, dei uma olhada aqui no seu código e a importação das fontes está correta, mas dois pequenos detalhes estão causando uns erros. O primeiro é que você está utilizando o fontFamily em uma imagem no estilo do "topo". E o outro detalhe é que no estilo "nome" você escreveu lineHeigth, mas tinha que ser lineHeight. Então os estilos corretos no arquivo Cesta.js ficariam assim:

const estilos = StyleSheet.create({
  topo: {
    width: "100%",
    height: 578 / 768 * width,
  },
  titulo: {
    width: "100%",
    position: "absolute",
    textAlign: "center",
    fontSize: 16,
    lineHeight: 26,
    color: "white",
    fontWeight: "bold",
    padding: 16,
  },
  cesta: {
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
  nome: {
    color: "#464646",
    fontSize: 26,
    lineHeight: 42,
    fontFamily: "MontserratBold",
  },
  fazenda: {
    flexDirection: "row",
    paddingVertical: 12,
  },
  imagemFazenda: {
    width: 32,
    height: 32,
  },
  nomeFazenda: {
    fontSize: 16,
    lineHeight: 26,
    marginLeft: 12,
    fontFamily: "MontserratRegular",
  },
  descricao: {
    color: "#A3A3A3",
    fontSize: 16,
    lineHeight: 26,
  },
  preco: {
    color: "#2A9F85",
    fontWeight: "bold",
    fontSize: 26,
    lineHeight: 42,
    marginTop: 8,
  },
});
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Adelio Aguirre de Castro
| 81.5k xp | 16 posts
Tecnico l

eu estava com uma dificuldade parecida ai percibi que estava importando errado import { useFonts,Montserrat_400Regular, Montserrat_700Bold } from "@expo-google-fonts"; correto era import { useFonts,Montserrat_400Regular, Montserrat_700Bold } from "@expo-google-fonts/montserrat";

por Anderson da Silva Machado
| 166.8k xp | 125 posts
Analista de Sistemas Junior

Obrigado, professor, era isso mesmo.