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:
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;