Há um problema com os botões nativos de reação que podem ser difíceis de ver e entender. Ao criar um botão no React Native, você tem a opção de criar um botão redondo ou quadrado. No entanto, quando você usa esses botões em seu aplicativo, pode ser difícil ver qual deles é redondo e qual é quadrado. Isso pode causar confusão e problemas ao tentar usar os botões em seu aplicativo.
border
import React, { Component } from 'react'; import { StyleSheet, View, Text, TouchableOpacity } from 'react-native'; export default class App extends Component { render() { return ( <View style={styles.container}> <TouchableOpacity style={styles.button}> <Text style={styles.text}>Click Me</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, button: { backgroundColor:'#4ba37b', width:100, borderRadius:50, alignItems:'center', paddingTop:14 }, text:{ color:'#fff', fontSize:16 } });
Este código é escrito em React Native e cria um botão que diz “Click Me”. Quando o botão é clicado, uma ação é executada.
A primeira linha importa as bibliotecas React e React Native.
A segunda linha cria um componente chamado App. Este componente renderizará um botão.
A terceira linha renderiza o componente App. O componente App contém um elemento TouchableOpacity, que será renderizado como um botão. O botão tem um estilo de styles.button, que é definido na quarta linha. O texto do botão terá um estilo de styles.text, que é definido na quinta linha.
A sexta e a sétima linhas definem os estilos dos elementos contêiner e botão, respectivamente. O elemento container terá justificarContent e alignItems definidos como 'center', para que o botão fique centralizado na tela. O elemento de botão terá um backgroundColor de '#4ba37b' e uma largura de 100 pixels. Ele também terá borderRadius definido como 50, para que apareça como um círculo em vez de um retângulo. Por fim, ele terá alignItems definido como 'center', para que o texto dentro dele seja centralizado vertical e horizontalmente.
definir botões em React
Existem alguns tipos diferentes de botões no React Native:
Botão
Entrada de texto
Radiobutton
Caixa de seleção
Como dar estilos aos botões
Existem algumas maneiras de dar estilos aos botões no React Native.
Uma maneira é usar o componente StyleSheet. Você pode passar um objeto de estilo como o segundo argumento para o método create() do componente StyleSheet. O objeto de estilo pode conter propriedades para fonte, cor e cor de fundo.
Outra maneira é usar o componente Button. Você pode passar um objeto de estilo como o segundo argumento para o método create() do componente Button. O objeto de estilo pode conter propriedades para fonte, cor e cor de fundo.
