1
resposta

não esta aparecendo as imagens

App.js =>

import React, { Component } from 'react';

import { 
  Dimensions,
  FlatList,
} from 'react-native';
import Post from './src/componentes/post';

const  larg = Dimensions.get('screen').width

export default class App extends Component {
  constructor(){
    super();
    this.state= {
      dados: []
    };
  }

  componentDidMount(){
    fetch('http://localhost:8080/api/public/fotos/alots')
    .then(resposta => resposta.json())
    .then(dados => {this.setState({dados:dados});});
  }

  render() {
    return(
      <FlatList
        data={this.state.dados}
        keyExtractor={item => item.id}
        renderItem={ ({item}) =>
        <Post ft={item}/>
      }
      />
    );
  }
}

Post.js =>

import React, { Component } from 'react';

import { 
  View,
  Text,
  Image,
  StyleSheet,
  Dimensions,
} from 'react-native';

const  larg = Dimensions.get('screen').width



export default class Post extends Component {
  render() {
    return(
        <View>
          <View style={style.conta}>
            <Image source={{uri: this.props.ft.urlPerfil}}
              style={style.barra}/>
            <Text>{this.props.ft.loginUsuario}</Text>
          </View>
          <Image source= {{uri: this.props.ft.urlFoto}}
              style = {style.ft}/>
        </View>
    );
  }
}

const style = StyleSheet.create({
    barra:{
      width: 50,
      height: 50,
      borderRadius: 40,
      margin: 5,
      marginRight: 10,
    },
    conta:{
      height: 65,
      flexDirection: 'row',
      alignItems: 'center'
    },
    ft: {
      width: larg,
      height: larg,
    }

})

Baixei a API e instalei, mas ao executar não mostra nenhuma imagem.

1 resposta

Tente reavaliar seu código o comparando com o vídeo