Flatlist de imagens URL

Boa noite,

Estou tentando criar uma flatlist de imagens para que apareçam uma embaixo da outra na tela, e que sejam imagens da internet utilizando a URL, porém não faço ideia de como fazer, alguma luz?

Segue o meu codigo :

import React, {useState} from 'react';
import { StyleSheet, Text, View, FlatList, Image } from 'react-native';


const Dados = [
{uri: "https://i.pinimg.com/564x/7c/9b/d9/7c9bd9c71422e7e9e53efb83ff4097fc.jpg"},]



class home extends React.Component {

 
  render() {
    return (


      <View style={styles.container}>



<FlatList 
style={{margintop: 35,}} 
contentContainerStyle={{marginHorizontal:20}} 
data={Dados} 
renderItem = {

({item}) => {return (

<View>



</View>


);}

}

/>



        <Text>Welcome to MySocialNetwork!</Text>

















      </View>
    );
  }
}














const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#E0FFFF',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default home;

Cara, quando postar código aqui, seleciona ele todo e clica no botão </>. Isso melhora a visibilidade.


De qualquer forma, tente assim:

     <FlatList
        style={{margintop: 35,}}
        data={Dados}
        contentContainerStyle={{marginHorizontal:20}}
        renderItem={({ item }) => <Image source={{uri: item.uri}} />}
     />
1 curtida

Essa parte do codigo : <Image source={{uri: item.uri}} />} eu teria que criar algum array com as URL’s?

vc já criou.

no flatList tem os seguintes parametros:

data = o array que vc quer passar
renderItem = a renderização desse item


entao como vc criou um array de objeto e cada objeto tem a propriedade uri.

Dentro de renderItem vc vai pegar o ({ item }) (que representa cada each feito no seu array)
e na imagem ou qualquer outro componente, você passa o objeto que quer pegar do seu array, que no caso, vai ser item.uri.

ficou claro?

1 curtida

sim, nesse caso aqui, se eu quiser adicionar mais url’s de imagens é só seguir com a virgula e vai ser renderizado na tela?

const Dados = [
{uri: "https://i.pinimg.com/564x/7c/9b/d9/7c9bd9c71422e7e9e53efb83ff4097fc.jpg"},]

olha como está minha tela onde desejo fazer a flatlist, não está aparecendo


os elementos :

Segue o codigo atualizado

import React, {useState} from 'react';
import { StyleSheet, Text, View, FlatList, Image } from 'react-native';


const Dados = [
{uri: "https://i.pinimg.com/564x/7c/9b/d9/7c9bd9c71422e7e9e53efb83ff4097fc.jpg"},]



class home extends React.Component {

 
  render() {
    return (


      <View style={styles.container}>


    <FlatList
        style={{margintop: 35,}}
        data={Dados}
        contentContainerStyle={{marginHorizontal:20}}
        renderItem={({ item }) => <Image source={{uri: item.uri}} />}
     />



        <Text style={styles.txt}>Welcome to MySocialNetwork!</Text>




      </View>
    );
  }
}














const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#E0FFFF',
    alignItems: 'center',
    justifyContent: 'center',
  },

txt:{

  alignItems: 'center'

}


});

export default home;

Isso,

[{uri: “img aqui”}, {uri: “outra aqui}]

——-

Tenta estilizar a sua imagem, coloca um width de 100% e uma altura de 300

Estou tentando estilizar da seguinte forma porém está dando erro

<FlatList
    style={{margintop: 35,}}
    data={Dados}
    contentContainerStyle={{marginHorizontal:20}}
    renderItem={({ item }) => <Image style={{width : 100%, height : 300}} source={{uri: item.uri}} />}
 />
Sabe dizer como posso fazer dar certo? desde já valeu toda a ajuda

foi quase, faltou as aspas. Quando você quiser adicionar alguma coisa que nao seja número pra esses styles, vc precisa deixar como String.

então ficaria:

style={{width: '100%', height: 300}}


Lembrando que vc pode escolher outro nome pra os objetos de seu array, vc poderia ter chamado a propriedade uri de avatar, por exemplo. Tipo:

const data = [{avatar: “img aqui”}, {avatar: “outra aqui”}];

<FlatList
   ...
   [...] <Image source={{uri: item.avatar}} />
/>

Aaah entendi, show mano!

eu tentei estilizar aparentemente sem erro agora, mas mesmo assim a imagem não aparece na tela o que será que está faltando

insere um flex: 1 no style da sua FlatList

parece que o flatlist funciona, pois a barra de scroll está aparecendo agora no emulador, eu também repliquei as img, mas ainda não aparece, será algum bug do Expo?

mano, muda pra Android/iOS ao invés de usar o Web.

Fiz um exemplo usando a sintaxe mais atual do ReactNative.


Não sei se vc tem celular… mas vc pode codar usando ele pra ver como ta ficando o código também, basta baixar o aplicativo chamado Expo. Se for continuar usando esse site mesmo pra ver como ta ficando, não olha a aba Web.

1 curtida

Caraca mano, obrigado!! me ajudou demais!! o meu não estava aparecendo as imagens mesmo no android ou pelo app do expo no celular, mas seguindo o seu exemplo agora foi valeu mesmo!!