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