Ka një problem me butonat vendas të reagimit që mund të jetë i vështirë për t'u parë dhe kuptuar. Kur krijoni një buton në React Native, ju keni mundësinë të krijoni një buton të rrumbullakët ose katror. Megjithatë, kur përdorni këta butona në aplikacionin tuaj, mund të jetë e vështirë të shihet se cili është i rrumbullakët dhe cili është katror. Kjo mund të çojë në konfuzion dhe probleme kur përpiqeni të përdorni butonat në aplikacionin tuaj.
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 } });
Ky kod është shkruar në React Native dhe krijon një buton që thotë "Click Me". Kur klikohet butoni, kryhet një veprim.
Rreshti i parë importon bibliotekat React dhe React Native.
Rreshti i dytë krijon një komponent të quajtur App. Ky komponent do të japë një buton.
Rreshti i tretë jep komponentin e aplikacionit. Komponenti i aplikacionit përmban një element TouchableOpacity, i cili do të shfaqet si një buton. Butoni ka një stil të butonit styles.button, i cili përcaktohet në rreshtin e katërt. Teksti i butonit do të ketë një stil styles.text, i cili përcaktohet në rreshtin e pestë.
Rreshti i gjashtë dhe i shtatë përcaktojnë stilet për elementët e kontejnerit dhe butonit, respektivisht. Elementi i kontejnerit do të ketë justifyContent dhe alignItems të vendosur në 'qendër', në mënyrë që butoni të përqendrohet në ekran. Elementi i butonit do të ketë një ngjyrë sfondi '#4ba37b' dhe një gjerësi prej 100 pikselësh. Ai gjithashtu do të ketë kufirinRadius të vendosur në 50, në mënyrë që të shfaqet si një rreth dhe jo si një drejtkëndësh. Së fundi, ai do të ketë alignItems të vendosur në 'qendër', në mënyrë që teksti brenda tij të jetë i përqendruar vertikalisht dhe horizontalisht.
Vendosni Butonat në React
Ekzistojnë disa lloje të ndryshme butonash në React Native:
Buton
TextInput
RadioButton
Checkbox
Si t'u jepni stile butonave
Ka disa mënyra për t'i dhënë stile butonave në React Native.
Një mënyrë është përdorimi i komponentit StyleSheet. Ju mund të kaloni në një objekt stili si argumenti i dytë në metodën e krijimit () të komponentit StyleSheet. Objekti i stilit mund të përmbajë vetitë për fontin, ngjyrën dhe ngjyrën e sfondit.
Një mënyrë tjetër është përdorimi i komponentit Button. Ju mund të kaloni në një objekt stili si argumenti i dytë në metodën create() të komponentit Button. Objekti i stilit mund të përmbajë vetitë për fontin, ngjyrën dhe ngjyrën e sfondit.
