Brak opisu

App.js 2.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  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. newsView:
  69. <View style = {styles.containerbackground}>
  70. <ScrollView style={styles.scrollView}>
  71. <View style = {styles.container}>
  72. <Text style={styles.intro}>Noticias</Text>
  73. <Image source={require('./testimg.gif')} />
  74. </View>
  75. </ScrollView></View>
  76. }
  77. class App extends React.Component {
  78. //current state
  79. state = {current: states.welcome}
  80. //state changing functions
  81. setHome = () => this.setState({ current: states.welcome })
  82. setData = () => this.setState({ current: states.dataView })
  83. setNews = () => this.setState({ current: states.newsView })
  84. //render app
  85. render() {
  86. return (
  87. <View>
  88. <View style = {styles.containerbackground}>
  89. <View style = {styles.container}>
  90. <Text style={styles.sub}> Navegador</Text>
  91. <View style = {styles.buttons}>
  92. <Button
  93. onPress = {this.setNews}
  94. title = "Noticias"
  95. color = "blue"
  96. />
  97. <Button
  98. onPress = {this.setData}
  99. title = "Datos"
  100. color = "black"
  101. />
  102. </View>
  103. {this.state.current}
  104. </View>
  105. </View>
  106. </View>
  107. );
  108. }
  109. }
  110. export default App