Hi ha un problema amb els botons natius de reacció que pot ser difícil de veure i entendre. Quan creeu un botó a React Native, teniu l'opció de crear un botó rodó o quadrat. Tanmateix, quan feu servir aquests botons a la vostra aplicació, pot ser difícil veure quin és rodó i quin és quadrat. Això pot provocar confusió i problemes quan intenteu utilitzar els botons de la vostra aplicació.
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 } });
Aquest codi està escrit a React Native i crea un botó que diu "Feu clic en mi". Quan es fa clic al botó, es realitza una acció.
La primera línia importa les biblioteques React i React Native.
La segona línia crea un component anomenat App. Aquest component representarà un botó.
La tercera línia representa el component de l'aplicació. El component App conté un element TouchableOpacity, que es representarà com a botó. El botó té un estil de styles.button, que es defineix a la quarta línia. El text del botó tindrà un estil de styles.text, que es defineix a la cinquena línia.
La sisena i la setena línies defineixen els estils dels elements contenidor i botó, respectivament. L'element contenidor tindrà justifyContent i alignItems establerts a 'center', de manera que el botó es centrarà a la pantalla. L'element botó tindrà un backgroundColor de '#4ba37b' i una amplada de 100 píxels. També tindrà borderRadius establert en 50, de manera que aparegui com un cercle en lloc d'un rectangle. Finalment, tindrà alignItems establert a 'center', de manera que el text dins d'ell es centra verticalment i horitzontalment.
establir botons a React
Hi ha diversos tipus de botons a React Native:
Botó
Entrada de text
Botó de ràdio
Checkbox
Com donar estils als botons
Hi ha algunes maneres de donar estils als botons a React Native.
Una manera és utilitzar el component StyleSheet. Podeu passar un objecte d'estil com a segon argument al mètode create() del component StyleSheet. L'objecte d'estil pot contenir propietats de tipus de lletra, color i color de fons.
Una altra manera és utilitzar el component Button. Podeu passar un objecte d'estil com a segon argument al mètode create() del component Button. L'objecte d'estil pot contenir propietats de tipus de lletra, color i color de fons.
