Postoji problem s izvornim gumbima za reakciju koje može biti teško vidjeti i razumjeti. Kada kreirate gumb u React Nativeu, imate opciju stvoriti okrugli ili četvrtasti gumb. Međutim, kada koristite ove gumbe u svojoj aplikaciji, može biti teško vidjeti koji je okrugli, a koji četvrtasti. To može dovesti do zabune i problema kada pokušavate koristiti gumbe u svojoj aplikaciji.
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 } });
Ovaj kod je napisan u React Native i stvara gumb koji kaže "Klikni me." Kada se klikne na gumb, izvršava se radnja.
Prvi redak uvozi React i React Native biblioteke.
Drugi redak stvara komponentu koja se zove App. Ova komponenta će prikazati gumb.
Treći red prikazuje komponentu aplikacije. Komponenta aplikacije sadrži element TouchableOpacity koji će se prikazati kao gumb. Gumb ima stil styles.button, koji je definiran u četvrtom redu. Tekst gumba imat će stil styles.text, koji je definiran u petom retku.
Šesti i sedmi redak definiraju stilove za elemente spremnika i gumba. Element spremnika imat će justifyContent i alignItems postavljene na 'center', tako da će gumb biti centriran na zaslonu. Element gumba imat će boju pozadine '#4ba37b' i širinu od 100 piksela. Također će imati borderRadius postavljen na 50, tako da se pojavljuje kao krug, a ne kao pravokutnik. Konačno, imat će alignItems postavljen na 'centrirati', tako da je tekst unutar njega centriran okomito i vodoravno.
postavite gumbe u Reactu
Postoji nekoliko različitih tipova gumba u React Nativeu:
Button
Unos teksta
Radio gumb
Okvir
Kako dati stilove gumbima
Postoji nekoliko načina za davanje stilova gumbima u React Native.
Jedan od načina je korištenje komponente StyleSheet. Stilski objekt možete proslijediti kao drugi argument metodi create() komponente StyleSheet. Stilski objekt može sadržavati svojstva za font, boju i boju pozadine.
Drugi način je korištenje komponente Button. Stilski objekt možete proslijediti kao drugi argument metodi create() komponente Button. Stilski objekt može sadržavati svojstva za font, boju i boju pozadine.
