No Description

App.js 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  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. });
  41. //default button press
  42. const handlePress = () => false
  43. //data parsing goes here
  44. function importJSON() {
  45. var stuff = JSON.stringify(data)
  46. return stuff
  47. }
  48. //states
  49. let states = {
  50. welcome:
  51. <View style = {styles.containerbackground}>
  52. <View style = {styles.container}>
  53. <Text style={styles.intro}>BIENVENIDO!!!!</Text>
  54. <Text style={styles.sub}>Aqui podra mantenerse al tanto con las
  55. ultimas noticias relacionadas al censo</Text>
  56. <Image source={require('./testimg.gif')} />
  57. </View>
  58. </View>,
  59. dataView:
  60. <View style = {styles.containerbackground}>
  61. <ScrollView style={styles.scrollView}>
  62. <View style = {styles.container}>
  63. <Text style={styles.intro}>DATADATADATADATADATA</Text>
  64. <Text style={styles.sub}>{importJSON()}</Text>
  65. <Image source={require('./testimg.gif')} />
  66. </View>
  67. </ScrollView></View>
  68. }
  69. class App extends React.Component {
  70. //current state
  71. state = {current: states.welcome}
  72. //state changing functions
  73. setHome = () => this.setState({ current: states.welcome })
  74. setData = () => this.setState({ current: states.dataView })
  75. //render app
  76. render() {
  77. return (
  78. <View>
  79. <View style = {styles.containerbackground}>
  80. <View style = {styles.container}>
  81. <Text style={styles.sub}> Navegador</Text>
  82. <View style = {styles.buttons}>
  83. <Button
  84. onPress = {this.setHome}
  85. title = "Noticias"
  86. color = "blue"
  87. />
  88. <Button
  89. onPress = {this.setData}
  90. title = "Datos"
  91. color = "black"
  92. />
  93. </View>
  94. {this.state.current}
  95. </View>
  96. </View>
  97. </View>
  98. );
  99. }
  100. }
  101. export default App