No Description

Noticias.js 1.4KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. import {useState, useEffect} from 'react';
  2. import {View, Text, FlatList} from 'react-native';
  3. //data display
  4. export default function Noticias() {
  5. const [users,setUsers] = useState([]);
  6. useEffect(()=>{
  7. fetchData()
  8. },[]);
  9. //Busca la informacion en la base de datos
  10. const fetchData = () => {
  11. //fetch('https://ada.uprrp.edu/~luis.ortiz79/api/users/',{
  12. fetch('http://localhost/apicenso/users/')
  13. .then(response => response.json())
  14. //.then(jsonResponse => setUsers(jsonResponse))
  15. .then((response)=>{
  16. console.log(response.data);
  17. setUsers(response.data);
  18. })
  19. .catch(error => console.log(error))
  20. }
  21. //Es donde va a desplegar la informacion de la base de datos
  22. const renderUser = ({item}) => {
  23. return (
  24. <View style={{margin:10,borderWidth:0.5,padding:10}}>
  25. <Text style={{color:"black",fontSize:16,fontWeight:"bold"}}>
  26. Noticia {item.id}
  27. </Text>
  28. <Text style={{color:"black"}}> {item.title}</Text>
  29. <Text style={{color:"black"}}> {item.subject}</Text>
  30. </View>
  31. )
  32. }
  33. return (
  34. <View style={{flex:1,backgroundColor:"white"}}>
  35. <FlatList
  36. data={users}
  37. renderItem={renderUser}
  38. keyExtractor={(item,index) => index.toString()}
  39. />
  40. </View>
  41. )
  42. }