Flatlist de imagens URL

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}} />}
     />

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?

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

image249×503 981 Bytes

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?

image1671×885 47.2 KB

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

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!!