Ei kuvausta

App.js 3.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. import React, {useState, useEffect} from 'react';
  2. import { View, Image, Text, Button, ScrollView, Pressable, Linking,StyleSheet} from 'react-native';
  3. import {Picker, DataButton} from "./Datos"
  4. import { styles } from './styles';
  5. //actual application
  6. class App extends React.Component {
  7. //the text at the end of a page gets cut off if anyone knows how to fix that?
  8. vars = {
  9. welcome:
  10. <View style = {styles.containerbackground}>
  11. <ScrollView style={styles.scrollView}>
  12. <View style = {styles.container}>
  13. <Text style={styles.intro}>Bienvenido!</Text>
  14. </View>
  15. <View style = {styles.container}>
  16. <Text style={styles.sub}>Aquí podra mantenerse al tanto con las
  17. últimas noticias relacionadas al Censo y tener acceso a los
  18. los Demographic Data Profiles de cada municipio de
  19. Puerto Rico.
  20. </Text>
  21. </View>
  22. <View style = {styles.bottom}>
  23. <Text style={styles.intro2}>Contactenos:</Text>
  24. <Text style={styles.sub}>Prof: Hernando Mattei Torres
  25. <Button onPress={() => Linking.openURL('mailto:hernando.mattei@upr.edu') }
  26. title="e-mail" /></Text>
  27. <Text style={styles.sub}>Angelica Rosario Santos
  28. <Button onPress={() => Linking.openURL('mailto:angelica.rosario2@upr.edu') }
  29. title="e-mail" /></Text>
  30. <Text style={styles.sub}>Data from:</Text>
  31. <Image source={require('./census-logos.png')} />
  32. <Button onPress={() => Linking.openURL('https://data.census.gov/profile?q=United+States&g=0100000US') }
  33. title="United States Census page" />
  34. </View>
  35. </ScrollView>
  36. </View>,
  37. newsView:
  38. <View style = {styles.containerbackground}>
  39. <ScrollView style={styles.scrollView}>
  40. <View style = {styles.container}>
  41. <Text style={styles.intro}>Noticias</Text>
  42. <Image source={require('./Logo.jpeg')} />
  43. </View>
  44. </ScrollView>
  45. </View>,
  46. dataOp:
  47. <View style = {styles.containerbackground}>
  48. <ScrollView nestedScrollEnabled = {true} style={styles.scrollView}>
  49. <View style = {styles.container}>
  50. <Text style={styles.intro}>DATA VIEWING PROJECT</Text>
  51. </View>
  52. <Picker />
  53. <DataButton />
  54. </ScrollView>
  55. </View>
  56. }
  57. //current state
  58. state = {current: this.vars.welcome}
  59. //state changing functions
  60. setHome = () => this.setState({ current: this.vars.welcome })
  61. setData = () => this.setState({current: this.vars.dataOp})
  62. setNews = () => this.setState({ current: this.vars.newsView })
  63. //render app
  64. render() {
  65. return (
  66. <View>
  67. <View style = {styles.containerbackground}>
  68. <View style = {styles.buttonContainer}>
  69. <Text style={styles.Navsub}> Demographic Data Viewer</Text>
  70. <View style = {styles.navContainer}>
  71. <Pressable style={styles.buttons} onPress = {this.setNews}>
  72. <Text style={styles.text}> Noticias</Text>
  73. </Pressable>
  74. <Pressable style={styles.buttons} onPress = {this.setHome}>
  75. <Text style={styles.text}> Hogar</Text>
  76. </Pressable>
  77. <Pressable style={styles.buttons} onPress = {this.setData}>
  78. <Text style={styles.text}> Datos</Text>
  79. </Pressable>
  80. </View>
  81. {this.state.current}
  82. </View>
  83. </View>
  84. </View>
  85. );
  86. }
  87. }
  88. export default App