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