1

Estive construindo um app que use icones do Ionicons. Só que quando vou implementar no meu app, simplemente não renderiza, apenas aparece esse retangulo com x cruzado: inserir a descrição da imagem aqui

já pesquisei em vários foruns, rodei alguns comandos para instalar algumas coisas só que o problema persiste, Também segui a documentação do expo/vector-icon em : https://docs.expo.io/guides/icons/ e nada de resolver.

Eu supeito que deve ter alguma coisa a ver com a criação do projeto, fiz isso usando o expo init e por alguma razão não deve ter importado as vector images, mas é só uma hipotese pq inciei há pouco tempo no react-native. Alguém ai já se deparou com esse problema? Como encontrou a solução para esse problema????

caso queira saber como estou tentando colocar os icones na minha tela, segue o código da tela da imagem aqui em abaixo:

import React, { useState, useRef , useEffect} from 'react';
import { View, Text, StyleSheet,Alert } from 'react-native';
import DefaultStyles from '../Constants/default-styles';

import { Ionicons } from '@expo/vector-icons';



import NumberContainer from '../components/NumberContainer';
import Card from '../components/Card';
import MainButton from '../components/MainButton';

const generateRandomBetween = (min, max, exclude) => {
  min = Math.ceil(min);
  max = Math.floor(max);
  const rndNum = Math.floor(Math.random() * (max - min)) + min;
  if (rndNum === exclude) {
    return generateRandomBetween(min, max, exclude);
  } else {
    return rndNum;
  }
};

const GameScreen = props => {
  const [currentGuess, setCurrentGuess] = useState(
    generateRandomBetween(1, 100, props.userChoice)
  );
  const  [rounds,setRounds]= useState(0);
  const currentLow = useRef(1);
  const currentHigh = useRef(100);
  const {userChoice,onGameOver}= props;


  useEffect(()=>{

      if(currentGuess == props.userChoice){
        props.onGameOver(rounds);
      }
  },[currentGuess, userChoice, onGameOver]);
  
    const nextGuessHandler=direction=>{
      if((direction === 'lower' && currentGuess < props.userChoice) || 
      (direction ==='greater' && currentGuess>props.userChoice)){
        Alert.alert('Don\'t lie!', 'you know that this is wrong...',[
          {text:'Sorry!', style:'cancel'}
        ]);
        return;

      }
      if(direction ==='lower'){
        currentHigh.current = currentGuess
      }
      else{
        currentLow.current = currentGuess;
      }
      const nextNumber = generateRandomBetween(currentLow.current,currentHigh.current, currentGuess);
      setCurrentGuess(nextNumber);
      setRounds(currentRound=> currentRound +1);

    }


    console.log(DefaultStyles);
  return (
    <View style={styles.screen}>


      <Text  style={DefaultStyles.title}>Opponent's Guess</Text>
      <NumberContainer>{currentGuess}</NumberContainer>
      <Card >
        <View style={styles.buttonContainer}>
        <Ionicons name="downcircle" size={24} color="black" />
          <MainButton   onPress={nextGuessHandler.bind(this,'lower')}>
          <Ionicons name="md-remove" size={24} color="white" />
          </MainButton>
         
          <MainButton   onPress={nextGuessHandler.bind(this,'greater')}>
          
          <Ionicons name="md-checkmark-circle" size={24} color="black" />
          </MainButton>
        </View>
      </Card>
    </View>
  );
};

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 10,
    alignItems: 'center'
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems:'center',
    marginTop: 20,
    marginHorizontal:-40,
    width: 400,
    maxWidth: '80%'
  },
  button:{
    width: '100%',
    marginHorizontal:5,
    marginVertical:20,
    alignItems:'center'
  }
});

export default GameScreen;

1 Resposta 1

-1

Coloque no final do android/app/build.gradle

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf','Ionicons.ttf' ] // Nome dos arquivos de fonte que você deseja copiar
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Depois disso adicione isso a baixo da importação:

import Ionicons from 'react-native-vector-icons/Ionicons'

Ionicons.loadFont();//Esse aqui

Agora só roda novamente que vai funciona.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .