Postoji problem s izvornim gumbima za reakciju koji može biti teško vidjeti i razumjeti. Kada kreirate dugme u React Native-u, imate opciju da kreirate okruglo ili četvrtasto dugme. Međutim, kada koristite ove tipke u svojoj aplikaciji, može biti teško vidjeti koji je okrugli, a koji kvadratni. To može dovesti do zabune i problema kada pokušavate koristiti dugmad 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-u i stvara dugme koje kaže „Klikni me“. Kada se klikne na dugme, izvršava se radnja.
Prvi red uvozi React i React Native biblioteke.
Drugi red kreira komponentu pod nazivom App. Ova komponenta će prikazati dugme.
Treći red prikazuje komponentu aplikacije. Komponenta aplikacije sadrži element TouchableOpacity, koji će se prikazati kao dugme. Dugme ima stil styles.button, koji je definisan u četvrtom redu. Tekst dugmeta će imati stil styles.text, koji je definisan u petom redu.
Šesti i sedmi red definiraju stilove za elemente kontejnera i gumba. Element kontejnera će imati justifyContent i alignItems postavljene na 'center', tako da će dugme biti centrirano na ekranu. Element dugmeta će imati 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 pravougaonik. Konačno, imat će alignItems postavljene na 'centar', tako da je tekst unutar njega centriran okomito i horizontalno.
postavite dugmad u Reactu
Postoji nekoliko različitih tipova dugmadi u React Nativeu:
Dugme
Unos teksta
RadioButton
Polje za potvrdu
Kako dati stilove dugmadima
Postoji nekoliko načina da date stilove dugmadima u React Native-u.
Jedan od načina je korištenje komponente StyleSheet. Možete proslijediti objekt stila kao drugi argument metodi create() komponente StyleSheet. Objekt stila može sadržavati svojstva za font, boju i boju pozadine.
Drugi način je korištenje komponente Button. Možete proslijediti objekt stila kao drugi argument metodi create() komponente Button. Objekt stila može sadržavati svojstva za font, boju i boju pozadine.
