Button e Switch

Vamos agora estudar os componentes Button e Switch.

Adicionando botão

Para adicionar um botão à tela, criaremos outro componente baseado em uma função que irá retornar um componente 'Button', similar à tag 'button' do HTML. Nesse caso também utilizaremos o conceito de props para o texto do botão.

Em um botão é importante também monitorar o evento de clique e, para fazer isso, podemos utilizar o evento 'onPress' e nele posso utilizar códigos javascript para comunicar o clique ao usuário.

Veja abaixo um exemplo:

<Button onPress={onPressButton} title={props.texto}></Button>

Adicionando o switch

O react native também nos fornece um componente que dará uma aparência de marcado ou não marcado, denominado Switch .

Para o funcionamento correto, temos de criar um estado que reflita o comportamento desse componente. Nesse caso, utilizaremos novamente o Hook useState( ), que irá passar o valor inicial e controlar o comportamento com o evento onValueChange.

Acompanhando a aula e realizando as implementações, seu código deve ficar como se vê abaixo:

import React, { useState } from 'react';
import { Button, SafeAreaView, Switch, Text, TextInput, View } from 'react-native';

export default function App() {
  return (
    <SafeAreaView>
      <Welcome />
      <Input />
      <Botoes texto="Clique aqui" />
    </SafeAreaView>
  );
}

function onPressButton() {
  alert('Você clicou!');
}

function Botoes(props) {

  const [ligado, setLigado] = useState(false)

  return (
    <View>
      <Button onPress={onPressButton} title={props.texto}></Button>
      <Switch onValueChange={() => setLigado(!ligado)} value={ligado}></Switch>
    </View>
  )
}

function Input() {

  const [text, setText] = useState('')

  return (
    <View>
      <TextInput style={{ height: 40 }} placeholder="Digite aqui seu nome" value={text} onChangeText={(text) => setText(text)}>
      </TextInput>
      <Text>{text}</Text>
    </View>
  )
}

function Welcome() {
  return (
    <View>
      <Text>Bem vindo!</Text>
    </View>
  )
}