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.