No Description

App.js 3.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
  1. import { StatusBar } from 'expo-status-bar';
  2. import React from 'react';
  3. import { View, Image, StyleSheet, Text, Button, ScrollView } from 'react-native';
  4. import data from './transfer.json'
  5. //change this to an external css file later
  6. const styles = StyleSheet.create({
  7. buttons: {
  8. flexDirection: 'row',
  9. justifyContent: 'center',
  10. marginTop: 30,
  11. marginBottom: 30,
  12. margin: "4px",
  13. borderColor: "grey",
  14. },
  15. container: {
  16. flexDirection: 'column',
  17. justifyContent: 'center',
  18. backgroundColor: 'black',
  19. alignItems: 'center',
  20. justifyContent: 'center',
  21. marginTop: 20,
  22. marginBottom: 500
  23. },
  24. containerbackground:{
  25. backgroundColor: '#063970',
  26. padding: "40px"
  27. },
  28. intro: {
  29. fontWeight: "bold",
  30. color:"#beb2c8",
  31. fontSize: 30,
  32. },
  33. sub: {
  34. color:"#D7D6D6",
  35. fontSize: 20,
  36. },
  37. scrollView:{
  38. marginHorizontal: 20
  39. },
  40. data: {
  41. color: "white",
  42. fontSize: 20
  43. },
  44. graph: {
  45. borderColor: "blue",
  46. height: 200
  47. }
  48. });
  49. //default button press
  50. const handlePress = () => false
  51. //data parsing goes here
  52. function importJSON() {
  53. var stuff = JSON.stringify(data)
  54. return stuff
  55. }
  56. //states
  57. let states = {
  58. welcome:
  59. <View style = {styles.containerbackground}>
  60. <View style = {styles.container}>
  61. <Text style={styles.intro}>BIENVENIDO!!!!</Text>
  62. <Text style={styles.sub}>Aqui podra mantenerse al tanto con las
  63. ultimas noticias relacionadas al censo</Text>
  64. <Image source={require('./testimg.gif')} />
  65. </View>
  66. </View>,
  67. dataView:
  68. <View style = {styles.containerbackground}>
  69. <ScrollView style={styles.scrollView}>
  70. <View style = {styles.container}>
  71. <Text style={styles.intro}>DATADATADATADATADATA</Text>
  72. <Text style={styles.sub}>{importJSON()}</Text>
  73. <Image source={require('./testimg.gif')} />
  74. </View>
  75. </ScrollView></View>,
  76. newsView:
  77. <View style = {styles.containerbackground}>
  78. <ScrollView style={styles.scrollView}>
  79. <View style = {styles.container}>
  80. <Text style={styles.intro}>Noticias</Text>
  81. <Image source={require('./testimg.gif')} />
  82. </View>
  83. </ScrollView></View>
  84. }
  85. class App extends React.Component {
  86. //current state
  87. state = {current: states.welcome}
  88. //state changing functions
  89. setHome = () => this.setState({ current: states.welcome })
  90. setData = () => this.setState({ current: states.dataView })
  91. setNews = () => this.setState({ current: states.newsView })
  92. //render app
  93. render() {
  94. return (
  95. <View>
  96. <View style = {styles.containerbackground}>
  97. <View style = {styles.container}>
  98. <Text style={styles.sub}> Navegador</Text>
  99. <View style = {styles.buttons}>
  100. <Button
  101. onPress = {this.setNews}
  102. title = "Noticias"
  103. color = "blue"
  104. />
  105. <Button
  106. onPress = {this.setData}
  107. title = "Datos"
  108. color = "black"
  109. />
  110. </View>
  111. {this.state.current}
  112. </View>
  113. </View>
  114. </View>
  115. );
  116. }
  117. }
  118. export default App