Există o problemă cu butoanele native de reacție care poate fi dificil de văzut și de înțeles. Când creați un buton în React Native, aveți opțiunea de a crea un buton rotund sau pătrat. Cu toate acestea, atunci când utilizați aceste butoane în aplicația dvs., poate fi dificil să vedeți care dintre ele este rotundă și care este pătrată. Acest lucru poate duce la confuzie și probleme atunci când încercați să utilizați butoanele din aplicația dvs.
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 } });
Acest cod este scris în React Native și creează un buton care spune „Click Me”. Când se face clic pe butonul, se efectuează o acțiune.
Prima linie importă bibliotecile React și React Native.
A doua linie creează o componentă numită App. Această componentă va reda un buton.
A treia linie redă componenta App. Componenta App conține un element TouchableOpacity, care va fi randat ca buton. Butonul are un stil de stils.button, care este definit în a patra linie. Textul butonului va avea un stil styles.text, care este definit în a cincea linie.
A șasea și a șaptea linie definesc stilurile pentru elementele container și, respectiv, buton. Elementul container va avea justifyContent și alignItems setate la „center”, astfel încât butonul să fie centrat pe ecran. Elementul buton va avea o culoare de fundal de „#4ba37b” și o lățime de 100 de pixeli. De asemenea, va avea borderRadius setat la 50, astfel încât să apară mai degrabă ca un cerc decât ca dreptunghi. În cele din urmă, va avea alignItems setat la „center”, astfel încât textul din el să fie centrat vertical și orizontal.
setați Butoanele în React
Există câteva tipuri diferite de butoane în React Native:
Buton
TextInput
RadioButon
Checkbox
Cum să dai stiluri nasturilor
Există câteva moduri de a da stiluri butoanelor în React Native.
O modalitate este de a folosi componenta StyleSheet. Puteți trece un obiect de stil ca al doilea argument la metoda create() a componentei StyleSheet. Obiectul de stil poate conține proprietăți pentru font, culoare și culoare de fundal.
O altă modalitate este să utilizați componenta Button. Puteți trece un obiect de stil ca al doilea argument la metoda create() a componentei Button. Obiectul de stil poate conține proprietăți pentru font, culoare și culoare de fundal.
