Inteligencia Futura

React NativeBonita lista plana construida con json(Nice flat list built with json)

Uno de los elementos más genéricos que usamos en nuestros desarrollos son las listas, en este tutorial vamos a crearlas de la forma más práctica y genérica.(One of the most generic elements that we use in our developments are lists, in this tutorial we are going to create them in the most practical and generic way.)

import React, { useState, useEffect } from ‘react’
import { StyleSheet, Text, View, FlatList, Image, ActivityIndicator, TouchableOpacity, ToastAndroid } from ‘react-native’
//Subscribe https://www.youtube.com/inteligenciafutura
//https://twitter.com/inteligenfutura

export default function App() {
const [DataSource, setDataSource] = useState([]);
const [IsLoading, setIsLoading ] = useState(true);

function renderItem ({item}){
return(
<TouchableOpacity
style={{flex:1, flexDirection: ‘row’, marginBottom: 3 }}
onPress = {() => ToastAndroid.show(item.book_title, ToastAndroid.SHORT) }
>
<Image
style = {{width: 80, height:80, margin: 5}}
source = {{ uri: item.image }}
/>
<View style = {{flex:1, justifyContent: ‘center’, marginLeft: 5}}>
<Text style={{ fontSize: 18, color: ‘green’, marginBottom: 15 }}>
{item.book_title}
</Text>
<Text style={{ fontSize: 16, color: ‘red’ }}>
{item.author}
</Text>
</View>
</TouchableOpacity>
)
}

function renderSeparator(){
return(
<View style={{height: 1, width: ‘100%’, backgroundColor: ‘black’}}>

</View>
)
}
useEffect(() => {
const url = ‘https://www.json-generator.com/api/json/get/ccLAsEcOSq?indent=1’
fetch(url)
.then((response) => response.json() )
.then((responseJson) =>{
setDataSource(responseJson.book_array)
setIsLoading(false)
})
.catch((error) =>{
console.log(error);
})
},[])

return (
<View>
{
IsLoading
?
<View style={{flex:1, justifyContent: ‘center’, alignItems: ‘center’ }}>
<ActivityIndicator size=”large” color = “#330066” />
</View>
:
<View style={styles.container}>
<FlatList
data = {DataSource}
renderItem = {renderItem}
keyExtractor = {(item, index) => index}
ItemSeparatorComponent = {renderSeparator}
/>
</View>
}
</View>
)
}

const styles = StyleSheet.create({

})
Email:

inteligenciafuturatv@gmail.com

Empresa
(Business)

Links

Últimas noticias(Latest News)

Saint Seiya animation 15 agosto, 2021 - futura

Copyright © 2021. Designed by  Inteligencia Futura