1 00:00:02,310 --> 00:00:05,400 Digamos que queremos usar uma imagem da Web 2 00:00:05,400 --> 00:00:12,950 e, para isso, você pode simplesmente escolher uma aqui, eu farei isso com a pesquisa de imagens do Google, digamos essa 3 00:00:12,950 --> 00:00:16,640 e queremos usar essa imagem em nosso game over screen. 4 00:00:16,670 --> 00:00:20,870 Agora, antes, usamos esta sintaxe requerida para carregar uma imagem local, agora 5 00:00:20,870 --> 00:00:23,650 essa sintaxe não será mais a correta. 6 00:00:23,650 --> 00:00:26,900 Então, eu vou duplicar esta linha e comentá-la, para uma imagem 7 00:00:26,900 --> 00:00:35,900 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 8 00:00:35,900 --> 00:00:39,080 string que é o seu link para a imagem. 9 00:00:39,080 --> 00:00:45,080 Portanto, seu link para a imagem é passado para o suporte de URI nesse objeto que você passou para a origem. 10 00:00:45,080 --> 00:00:50,480 Agora, se você fizer isso, isso carrega a imagem da Web, mas há uma coisa importante que você precisa saber. 11 00:00:51,170 --> 00:00:52,430 Para a imagem 12 00:00:52,430 --> 00:00:54,230 que foi carregada localmente, mencionei 13 00:00:54,260 --> 00:01:00,250 que o React Native é capaz de determinar sua largura e altura e a usa como padrão. 14 00:01:00,410 --> 00:01:06,320 Portanto, para uma imagem carregada localmente, você não precisa definir uma largura e uma altura na imagem, estamos fazendo isso aqui porque queremos 15 00:01:06,350 --> 00:01:10,120 substituir a largura e a altura padrão, mas se você tiver uma imagem com o 16 00:01:10,250 --> 00:01:15,380 tamanho perfeito, você não precisaria definir largura e altura. Para imagens da Web, o React Native não é capaz 17 00:01:15,380 --> 00:01:16,790 de determinar a largura 18 00:01:16,790 --> 00:01:22,130 e a altura da imagem antes de ser carregada porque não faz parte do aplicativo, é proveniente de uma web, 19 00:01:22,130 --> 00:01:24,290 o React Native faz o download e é 20 00:01:24,320 --> 00:01:30,110 uma surpresa sobre o que a largura e a altura são. Portanto, para imagens de rede, para as 21 00:01:30,110 --> 00:01:32,140 imagens que você está 22 00:01:32,150 --> 00:01:38,810 buscando com um link, sempre é necessário definir uma largura e uma altura no objeto de 23 00:01:38,840 --> 00:01:43,840 imagem, no componente de imagem aqui. Para imagens locais adicionadas com 24 00:01:43,880 --> 00:01:48,040 require, você pode fazer isso para substituí-lo, mas não 25 00:01:48,110 --> 00:01:51,020 precisa, isso é uma diferenciação importante. 26 00:01:51,060 --> 00:01:58,230 Agora, você também deve ter visto que, para imagens da Web, a imagem carregada desapareceu quando foi carregada pela primeira vez, e esse é 27 00:01:58,230 --> 00:02:03,100 um bom efeito de fábrica que o React Native adiciona automaticamente para imagens de rede. 28 00:02:03,310 --> 00:02:09,330 Ele baixa essa imagem e enquanto você aguarda a conclusão do download, basicamente não mostra nada, ainda não 29 00:02:09,330 --> 00:02:14,880 pode mostrar a imagem, mas quando a imagem é carregada, ela não é exibida apenas na tela, 30 00:02:14,910 --> 00:02:18,940 mas lentamente esmaece na transição mais agradável para a imagem carregada. 31 00:02:18,990 --> 00:02:24,340 Esse é um efeito agradável e você também pode controlar isso com duração de desvanecimento, pode definir 32 00:02:24,360 --> 00:02:27,390 isso como um número e o padrão é 33 00:02:27,390 --> 00:02:33,360 300, que seria 300ms, mas você pode definir isso com um valor de milissegundo diferente, como 1000ms, que seria 34 00:02:33,360 --> 00:02:39,450 um segundo por a imagem desaparece e assim por diante. Após o primeiro carregamento, a imagem é armazenada 35 00:02:39,450 --> 00:02:44,610 em cache e, portanto, os usos subsequentes da mesma imagem acontecem praticamente instantaneamente porque 36 00:02:44,610 --> 00:02:45,760 já foram baixados. 37 00:02:45,780 --> 00:02:49,320 É assim que se usa imagens de rede e o que você deve saber sobre elas.