Introdução ao botão no React Native
Como sabemos, os botões são elementos-chave de uma interface do usuário que funcionam após pressioná-los. Portanto, é necessário aprender como os botões são criados em reagir nativo. Neste artigo, veremos como os botões são criados no React Native, sua sintaxe e os diferentes tipos de botões disponíveis no React Native. Além disso, veremos alguns exemplos mostrando o uso de botões em aplicativos de reação.
Sintaxe:
import React, ( Component ) from 'react'
import ( Button ) from 'react-native'
const Test = () => (
return (
< Button
//define the properties of button
/>
)
)
export default Test
A sintaxe acima mostra como um botão é usado em reagir nativo. Envolve a definição de uma tag XML com um elemento button, agora, de acordo com nossos requisitos, diferentes propriedades podem ser definidas para um botão. Aqui está a lista de propriedades com seu tipo e descrição.
| Nome da propriedade | Tipo | Usar |
| onPress | função | Esta é uma propriedade necessária e requer a especificação da função que será executada quando este botão for clicado. |
| Título | Corda | Este é o texto que seria exibido como um rótulo no botão e esta é uma propriedade necessária. |
| Cor | Cor | É uma propriedade opcional necessária para definir a cor de fundo do botão. |
| Desativado | boleano | É usado para desativar os eventos de toque de um botão. |
| textID | Corda | É uma propriedade opcional necessária para identificar um botão exclusivamente. |
| Etiqueta de acessibilidade | Corda | Usado para exibir texto para recursos de acessibilidade para cegueira em um botão. |
Tipos de botão no React Native
Os botões no React podem ser classificados nos seguintes tipos:
1. Tipos básicos: eles se enquadram na categoria básica e podem ser dos seguintes tipos:
- Botão: É usado para definir botões de clique.
- Enviar: esse tipo de botão é usado junto com um formulário para enviar detalhes.
- Redefinir: Usado para limpar o conteúdo do campo ao clicar nele.
2. Botão plano: possui um estilo sem cor de fundo. Para criar um botão simples em reagir, defina a classe CSS como e-flat.
3. Botão Contorno: Este tipo de botão contém uma borda com fundo transparente. Para criar esse tipo de botão, defina a classe CSS como um esboço eletrônico.
4. Botão Redondo: Este botão possui uma forma circular. Para criar um botão redondo, defina a classe CSS como e-round.
5. Botão de alternância: o botão de alternância é um botão cujo estado pode ser alterado. Vamos considerar um exemplo de botão de reprodução e pausa. Ao clicar neste botão, seu estado é alterado e após outro clique, ele recupera seu estado. Esta função de mudança de estado é alcançada pelo evento click do botão. Para criar uma alternância, precisamos definir a propriedade isToggle como true.
Exemplos de botão no React Native
Abaixo estão os exemplos de Button no React Native:
Exemplo 1
Para começar, vamos criar um botão simples para mostrar como o evento de clique é tratado.
Código:
import ( AppRegistry ) from "react-native";
import React, ( Component ) from 'react';
import ( Alert, Button, StyleSheet, View ) from 'react-native';
export default class ButtonDemo extends Component (
onPressButton() (
Alert.alert ('Hello Welcome to Edubca!')
)
render() (
return (
onPress=(this.onPressButton)
title="Click Me"
color="#000000"
/>
);
)
)
const styles = StyleSheet.create((
container: (
flex: 1,
justifyContent: 'center',
),
buttonContainer: (
margin: 20
),
multiButtonContainer: (
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
)
))
AppRegistry.registerComponent("App", () => ButtonDemo);
AppRegistry.runApplication("App", (
rootTag: document.getElementById("root")
));import ( AppRegistry ) from "react-native";
import React, ( Component ) from 'react';
import ( Alert, Button, StyleSheet, View ) from 'react-native';
export default class ButtonDemo extends Component (
onPressButton() (
Alert.alert ('Hello Welcome to Edubca!')
)
render() (
return (
onPress=(this.onPressButton)
title="Click Me"
color="#000000"
/>
);
)
)
const styles = StyleSheet.create((
container: (
flex: 1,
justifyContent: 'center',
),
buttonContainer: (
margin: 20
),
multiButtonContainer: (
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
)
))
AppRegistry.registerComponent("App", () => ButtonDemo);
AppRegistry.runApplication("App", (
rootTag: document.getElementById("root")
));
Resultado:
Ao clicar no botão acima, um alerta será gerado mostrando o pop-up com texto.
Resultado:
Esse alerta é gerado porque o evento onPress é acionado, que chama o método onPressButton, que contém a lógica de mostrar o alerta. Portanto, o exemplo acima mostra como um botão é criado em reagir nativo e como seu evento de clique é tratado.
Exemplo 2
Neste exemplo, vemos como podemos alterar a opacidade de um botão ao reagir. Para esse fim, usaremos uma tag TouchableOpacity que conterá uma tag de botão.
Código:
Import React from 'react'
import ( TouchableOpacity, StyleSheet, View, Text ) from 'react-native'
const TestApp = () => (
return (
Button
)
)
export default TestApp
const styles = StyleSheet.create ((
container: (
alignItems: 'center',
),
text: (
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'blue'
)
))
Resultado:
Depois de pressionar este botão, veremos a alteração abaixo.
Resultado:
Conclusão
A partir da discussão acima, temos um entendimento claro de como podemos criar botões para reagir. Podemos fornecer diferentes estilos e personalizações para proporcionar uma melhor experiência ao usuário. O componente Button oferece criação de animações e seu evento de clique pode ser tratado usando o método onPress.
Artigo recomendado
Este é um guia para o Button no React Native. Aqui discutimos uma introdução ao botão no React Native e seus tipos, juntamente com a implementação de código. Você também pode consultar nossos outros artigos sugeridos para saber mais -
- React Native vs React - Principais Diferenças
- As 19 principais perguntas da entrevista do ReactJs
- Métodos do botão JavaFX
- Os 10 principais usos do React JS