Skip to content

Instantly share code, notes, and snippets.

@anscharivs
Created June 1, 2020 03:41
Show Gist options
  • Save anscharivs/fb6d9e7df3fd2e88434ea6b2015e6885 to your computer and use it in GitHub Desktop.
Save anscharivs/fb6d9e7df3fd2e88434ea6b2015e6885 to your computer and use it in GitHub Desktop.
Aplicación en React Native que muestra una lista de imágenes y texto (super héroes) desde un JSON en Internet.
import React, { Component } from 'react';
import { StyleSheet, View, ActivityIndicator, FlatList, Text, Image } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
estaCargando: true
}
}
// Se manda llamar cuando todo está montado
componentDidMount() {
this.peticionWeb();
}
// El que hace la petición
peticionWeb = async () => {
try {
const respuesta = await fetch('https://api.jsonbin.io/b/5ed43cbc79382f568bd0b836', {
method: 'GET',
headers: {
'secret-key': '$2b$10$n40lSCMNuVlnsWI/5AeUcupCCUhGZkIbvx8RlnrAVP/wz6UePLx9K'
}
});
const respuestaJson = await respuesta.json();
this.setState({
estaCargando: false,
dataSource: respuestaJson
}, function () {
});
}
catch (error) {
console.error(error);
}
}
// La línea de separación entre imágenes
lineaDeSeparacion = () => {
return (
<View
style={{
height: 2,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
// La cosa que renderiza objetos en pantalla
render() {
// El círculo de cargar
if (this.state.estaCargando) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" />
</View>
);
}
// Los elementos de la lista
return (
<View style={estilos.contenedor}>
<FlatList
data={this.state.dataSource}
ItemSeparatorComponent={this.lineaDeSeparacion}
renderItem={({ item }) =>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Image source={{ uri: item.imageurl }} style={estilos.imagen} />
<Text style={estilos.texto} >{item.name}</Text>
</View>
}
keyExtractor={(item, index) => index.toString()}
/>
</View>
);
}
}
// Los estilos generales
const estilos = StyleSheet.create({
contenedor: {
justifyContent: 'center',
flex: 1,
marginTop: 20
},
imagen: {
width: '50%',
height: 100,
margin: 7
},
texto: {
width: '50%',
textAlignVertical: 'center',
textAlign: 'center',
padding: 10,
color: '#327e36',
fontWeight: 'bold'
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment