Digamos que queremos usar uma imagem da Web
e, para isso, você pode simplesmente escolher uma aqui, eu farei isso com a pesquisa de imagens do Google, digamos essa
e queremos usar essa imagem em nosso game over screen.
Agora, antes, usamos esta sintaxe requerida para carregar uma imagem local, agora
essa sintaxe não será mais a correta.
Então, eu vou duplicar esta linha e comentá-la, para uma imagem
da Web. Em vez disso, você passa um objeto para a origem e, nesse objeto, você passa um suporte de URI e esse suporte de URI contém uma
string que é o seu link para a imagem.
Portanto, seu link para a imagem é passado para o suporte de URI nesse objeto que você passou para a origem.
Agora, se você fizer isso, isso carrega a imagem da Web, mas há uma coisa importante que você precisa saber.
Para a imagem
que foi carregada localmente, mencionei
que o React Native é capaz de determinar sua largura e altura e a usa como padrão.
Portanto, para uma imagem carregada localmente, você não precisa definir uma largura e uma altura na imagem, estamos fazendo isso aqui porque queremos
substituir a largura e a altura padrão, mas se você tiver uma imagem com o
tamanho perfeito, você não precisaria definir largura e altura. Para imagens da Web, o React Native não é capaz
de determinar a largura
e a altura da imagem antes de ser carregada porque não faz parte do aplicativo, é proveniente de uma web,
o React Native faz o download e é
uma surpresa sobre o que a largura e a altura são. Portanto, para imagens de rede, para as
imagens que você está
buscando com um link, sempre é necessário definir uma largura e uma altura no objeto de
imagem, no componente de imagem aqui. Para imagens locais adicionadas com
require, você pode fazer isso para substituí-lo, mas não
precisa, isso é uma diferenciação importante.
Agora, você também deve ter visto que, para imagens da Web, a imagem carregada desapareceu quando foi carregada pela primeira vez, e esse é
um bom efeito de fábrica que o React Native adiciona automaticamente para imagens de rede.
Ele baixa essa imagem e enquanto você aguarda a conclusão do download, basicamente não mostra nada, ainda não
pode mostrar a imagem, mas quando a imagem é carregada, ela não é exibida apenas na tela,
mas lentamente esmaece na transição mais agradável para a imagem carregada.
Esse é um efeito agradável e você também pode controlar isso com duração de desvanecimento, pode definir
isso como um número e o padrão é
300, que seria 300ms, mas você pode definir isso com um valor de milissegundo diferente, como 1000ms, que seria
um segundo por a imagem desaparece e assim por diante. Após o primeiro carregamento, a imagem é armazenada
em cache e, portanto, os usos subsequentes da mesma imagem acontecem praticamente instantaneamente porque
já foram baixados.
É assim que se usa imagens de rede e o que você deve saber sobre elas.