1
resposta

Imagem não aparece.

Estou tentanco colocar a imagem, porém está da mesma forma que a instrutora, mas não aparece de jeito nenhum, estou acessando pelo navegador porquê não consegui acessar no app Expo Go, no entando no browser estava aparecendo o Text certinho, mas a imagem não aparece. Os códigos:

App.js

import {SafeAreaView, StatusBar } from 'react-native';
import React from 'react';
import Cesta from './src/telas/cesta'; 

export default function App() {
  return (
    <SafeAreaView>
      <StatusBar/>
      <Cesta/>
    </SafeAreaView>
  );
}

Cesta.js:

import React from 'react'; 
import { StyleSheet, Image, Dimensions} from 'react-native';

import topo from '../../assets/topo.png';
const width = Dimensions.get('screen').width;

export default function Cesta(){
 return <Image style={estilos.topo} source={topo} />
} 

const estilos = StyleSheet.create({
topo: {
    width: "100%",
    height: 360,
}
});
1 resposta

Olá, Luiz!

Pelo que você descreveu e pelos códigos que compartilhou, parece que você fez tudo certo. No entanto, existem algumas possíveis razões pelas quais a imagem pode não estar aparecendo.

  1. Caminho da imagem: Verifique se o caminho da imagem está correto. No seu código, você está importando a imagem a partir de '../../assets/topo.png'. Certifique-se de que a imagem 'topo.png' está realmente dentro da pasta 'assets' e que essa pasta está corretamente localizada em relação ao arquivo 'Cesta.js'.

  2. Problema com o cache: Às vezes, o cache pode causar problemas. Você pode tentar limpar o cache do seu projeto React Native. Para fazer isso, você pode fechar o servidor e executar o comando npm start --reset-cache ou yarn start --reset-cache, dependendo do gerenciador de pacotes que você está usando.

  3. Problema com o Expo: Como você mencionou que não conseguiu acessar o app pelo Expo Go, talvez haja algum problema relacionado a isso. Você pode tentar resolver os problemas com o Expo primeiro e depois verificar se a imagem aparece.

  4. Formato da imagem: Verifique se a imagem está no formato correto. O React Native suporta imagens PNG e JPG. Se a imagem 'topo.png' estiver em um formato diferente, você pode precisar convertê-la para PNG ou JPG.

  5. Tamanho da imagem: Às vezes, se a imagem for muito grande, ela pode não aparecer. Você pode verificar o tamanho da imagem e, se necessário, redimensioná-la.

Espero que uma dessas sugestões possa resolver o seu problema. Lembre-se, no entanto, que essas são apenas possibilidades e pode haver outras razões pelas quais a imagem não está aparecendo.

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software