Olá Valentina!
Pelo que pude observar nas imagens que você compartilhou, parece que o problema está relacionado à importação das fontes no seu projeto React Native.
Para utilizar uma fonte personalizada no React Native, é necessário importar a fonte no arquivo App.js
ou index.js
do seu projeto. Certifique-se de que você importou corretamente a fonte Quicksand no arquivo App.js
ou index.js
e definiu corretamente o nome da fonte no estilo dos componentes de texto.
Por exemplo, no arquivo App.js
ou index.js
, você pode importar a fonte Quicksand da seguinte maneira:
import * as Font from 'expo-font';
...
async function loadFonts() {
await Font.loadAsync({
Quicksand: require('./caminho/para/a/fonte/Quicksand.ttf'),
});
}
loadFonts();
...
Em seguida, no arquivo Texto.js
, você pode definir o estilo dos componentes de texto da seguinte forma:
import React from 'react';
import { Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
nome: {
fontFamily: 'Quicksand',
fontWeight: 'bold',
},
titulo: {
fontFamily: 'Quicksand',
fontWeight: 'bold',
},
preco: {
fontFamily: 'Quicksand',
fontWeight: 'bold',
},
});
const Texto = () => {
return (
<Text style={styles.nome}>Nome do Produto</Text>
<Text style={styles.titulo}>Título do Produto</Text>
<Text style={styles.preco}>Preço do Produto</Text>
);
}
export default Texto;
Certifique-se de que o caminho para a fonte Quicksand está correto e que você está utilizando o nome da fonte corretamente no estilo dos componentes de texto.
Espero ter ajudado e bons estudos!