No Description

App.js 2.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  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. },
  12. container: {
  13. flexDirection: 'column',
  14. justifyContent: 'center',
  15. backgroundColor: 'black',
  16. alignItems: 'center',
  17. justifyContent: 'center',
  18. marginTop: 20
  19. },
  20. intro: {
  21. fontWeight: "bold",
  22. color:"#beb2c8",
  23. fontSize: 30,
  24. },
  25. sub: {
  26. color:"#D7D6D6",
  27. fontSize: 20,
  28. },
  29. scrollView:{
  30. marginHorizontal: 20
  31. }
  32. });
  33. //default button press
  34. const handlePress = () => false
  35. //data parsing goes here
  36. function importJSON() {
  37. var stuff = JSON.stringify(data)
  38. return stuff
  39. }
  40. //states
  41. let states = {
  42. welcome:
  43. <View style = {styles.container}>
  44. <Text style={styles.intro}>WELCOME!!!!</Text>
  45. <Text style={styles.sub}>オレノウタヲキケ!</Text>
  46. <Image source={require('./testimg.gif')} />
  47. </View>,
  48. dataView:
  49. <ScrollView style={styles.scrollView}>
  50. <View style = {styles.container}>
  51. <Text style={styles.intro}>DATADATADATADATADATA</Text>
  52. <Text style={styles.sub}>{importJSON()}</Text>
  53. <Image source={require('./testimg.gif')} />
  54. </View>
  55. </ScrollView>
  56. }
  57. class App extends React.Component {
  58. //current state
  59. state = {current: states.welcome}
  60. //state changing functions
  61. setHome = () => this.setState({ current: states.welcome })
  62. setData = () => this.setState({ current: states.dataView })
  63. //render app
  64. render() {
  65. return (
  66. <View>
  67. <View style = {styles.buttons}>
  68. <Button
  69. onPress = {this.setHome}
  70. title = "Noticias"
  71. color = "blue"
  72. />
  73. <Button
  74. onPress = {this.setData}
  75. title = "Datos"
  76. color = "black"
  77. />
  78. </View>
  79. {this.state.current}
  80. </View>
  81. );
  82. }
  83. }
  84. export default App