armadiazrino

NormalState.js

Nov 28th, 2020
509
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import { StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native"
  3.  
  4. class App extends React.Component {
  5.  
  6.     // TODO (1) create score object in our state
  7.     state = {
  8.         score: 0
  9.     }
  10.  
  11.     render() {
  12.         return (
  13.             <View style={styles.mainContainer}>
  14.                 <StatusBar backgroundColor={"rgb(220,81,83)"} barStyle={"light-content"} />
  15.                 <View style={styles.scoreContainer}>
  16.                     <Text style={styles.scoreTitleText}>{"Score"}</Text>
  17.                     {/* TODO (2) asign this.state.score for our Text */}
  18.                     <Text style={styles.scoreTitleText}>{this.state.score}</Text>
  19.                 </View>
  20.                 <View style={styles.buttonContainer}>
  21.                     <TouchableOpacity
  22.                         style={styles.buttonStyle}
  23.                         // TODO (3) call this.setState to increase score state value inside onPress
  24.                         onPress={() => this.setState({ score: this.state.score + 1 })}>
  25.                         <Text style={styles.buttonText}>{"+"}</Text>
  26.                     </TouchableOpacity>
  27.                     <View style={styles.horizontalSeparator} />
  28.                     <TouchableOpacity
  29.                         style={styles.buttonStyle}
  30.                         // TODO (3) call this.setState to decrease score state value inside onPress
  31.                         onPress={() => this.setState({ score: this.state.score - 1 })}>
  32.                         <Text style={styles.buttonText}>{"-"}</Text>
  33.                     </TouchableOpacity>
  34.                 </View>
  35.             </View>
  36.         )
  37.     }
  38. }
  39.  
  40. const styles = StyleSheet.create({
  41.     mainContainer: {
  42.         flex: 1,
  43.         padding: 16,
  44.         backgroundColor: "rgb(240,81,83)"
  45.     },
  46.     scoreContainer: {
  47.         alignItems: "center"
  48.     },
  49.     scoreTitleText: {
  50.         textAlign: "center", fontSize: 64, color: "#FFF8DE"
  51.     },
  52.     scoreValueText: {
  53.         textAlign: "center", fontSize: 128, color: "#FFF8DE"
  54.     },
  55.     buttonContainer: {
  56.         flexDirection: "row", marginTop: 8,
  57.     },
  58.     buttonStyle: {
  59.         flex: 1, backgroundColor: "#FFF8DE", aspectRatio: 1.5, alignItems: "center", justifyContent: "center"
  60.     },
  61.     buttonText: {
  62.         fontSize: 64, color: "rgb(240,81,83)"
  63.     },
  64.     horizontalSeparator: {
  65.         marginHorizontal: 8
  66.     }
  67. })
  68.  
  69. export default App
  70.  
RAW Paste Data