react native expo

// Importa algumas coisas do React Native que vamos usar no aplicativo import React from 'react'; import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

// Aqui começa o aplicativo export default class App extends React.Component {

// O constructor serve para começar o aplicativo com algumas informações constructor(props) { super(props);

// Aqui criamos uma variável chamada contador
// Ela começa com 0 cookies
this.state = {
  contador: 0,
};

}

// Essa função é usada quando a pessoa clica no cookie clicarNoCookie = () => {

// Aumenta o contador em 1
// Ou seja, cada clique ganha mais 1 cookie
this.setState((prevState) => ({
  contador: prevState.contador + 1
}));

};

// Essa função chama a função de clicar no cookie cliques = () => { this.clicarNoCookie(); };

// Aqui fica a parte visual do aplicativo render() { return (

  // View é como uma caixa que organiza os elementos na tela
  <View style={styles.container}>

    // Essa parte mostra o título e a quantidade de cookies
    <View style={styles.painelPlacar}>

      // Mostra o nome do jogo
      <Text style={styles.titulo}>Cookie Clicker</Text>

      // Mostra quantos cookies a pessoa conseguiu
      // O número vem da variável contador
      <Text style={styles.contador}>
        {this.state.contador} cookies
      </Text>

    </View>

    // Essa é a área onde fica o cookie
    // Quando clicar nele, aumenta 1 cookie
    <TouchableOpacity
      onPress={this.clicarNoCookie}
      activeOpacity={0.6}
      style={styles.areaCookie}
    >

      // Aqui aparece o emoji do cookie
      <Text style={styles.cookieEmoji}></Text>

    </TouchableOpacity>

    // Esse é o botão escrito "clique"
    // Quando clicar nele, também aumenta o contador
    <TouchableOpacity
      style={styles.botao}
      onPress={this.cliques}
    >

      <Text style={styles.textoBotao}>clique</Text>

    </TouchableOpacity>

  </View>
);

} }

// Aqui começam os estilos do aplicativo const styles = StyleSheet.create({

// Estilo principal da tela container: { flex: 1, // Ocupa a tela inteira justifyContent: 'center', // Deixa os elementos no centro vertical alignItems: 'center', // Deixa os elementos no centro horizontal backgroundColor: '#ffffff', // Fundo branco },

// Estilo da parte que mostra o placar painelPlacar: { alignItems: 'center', marginBottom: 20, },

// Estilo do título "Cookie Clicker" titulo: { fontSize: 28, // Tamanho da letra fontWeight: 'bold', // Deixa a letra em negrito color: '#000000', // Cor preta marginBottom: 5, },

// Estilo do número de cookies contador: { fontSize: 24, // Tamanho da letra fontWeight: 'bold', // Negrito color: '#000000', // Preto },

// Esse estilo existe, mas não está sendo usado no código subtexto: { fontSize: 16, color: '#666666', },

// Estilo da área onde fica o cookie areaCookie: { justifyContent: 'center', alignItems: 'center', width: 200, // Largura da área height: 200, // Altura da área marginBottom: 40, },

// Estilo do emoji do cookie cookieEmoji: { fontSize: 130, // Deixa o cookie bem grande justifyContent: 'center', textAlign: 'center' },

// Estilo do botão azul botao: { backgroundColor: '#007AFF', // Cor azul paddingHorizontal: 30, // Espaço dos lados paddingVertical: 15, // Espaço em cima e embaixo borderRadius: 8, // Deixa as bordas arredondadas },

// Estilo do texto dentro do botão textoBotao: { color: '#ffffff', // Texto branco fontSize: 18, // Tamanho da letra fontWeight: '600', // Deixa a letra um pouco mais grossa }, });