Análise de Código React Native

O que acontece quando o usuário pressiona o botão? Além disso, descreva a estrutura geral da interface apresentada.

import React from 'react';

import { Text, View, Button } from 'react-native';

export default function App() {

return (

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

<Text>Bem-vindo ao meu app!</Text>

<Button title="Clique aqui" onPress={() => alert('Botão pressionado!')} />

</View>

);

}

Explique a funcionalidade da variável 'contador' e como ela é alterada no aplicativo. O que aparece na tela após o botão ser pressionado 3 vezes?

import React, { useState } from 'react';

import { Text, View, Button } from 'react-native';

export default function App() {

const [contador, setContador] = useState(0);

return (

<View style={{ padding: 40 }}>

<Text>Contador: {contador}</Text>

<Button title="Aumentar" onPress={() => setContador(contador + 1)} />

</View>

);

}

Descreva como a estilização afeta a aparência da tela. O que acontece se removermos 'justifyContent: center' do container?

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

export default function App() {

return (

<View style={styles.container}>

<Text style={styles.titulo}>Meu Aplicativo</Text>

</View>

);

}

const styles = StyleSheet.create({

container: {

backgroundColor: 'lightblue',

flex: 1,

justifyContent: 'center',

alignItems: 'center',

},

titulo: {

fontSize: 24,

fontWeight: 'bold',

}

});

Este código tem um erro. Qual é o erro e como pode ser corrigido?

import React from 'react';

import { View, Text } from 'react-native';

export default function App() {

return (

<View>

<Text>Olá mundo!</Text>

<TextInput placeholder="Digite algo" />

</View>

);

Explique como a exibição de mensagens funciona no componente. O que acontece quando o botão é pressionado?

import React, { useState } from 'react';

import { View, Text, Button } from 'react-native';

export default function App() {

const [logado, setLogado] = useState(false);

return (

<View style={{ padding: 40 }}>

<Text>{logado ? "Bem-vindo!" : "Por favor, faça login."}</Text>

<Button title="Entrar" onPress={() => setLogado(true)} />

</View>

);

}