Iškilo problema, susijusi su react vietiniais mygtukais, kuriuos gali būti sunku pamatyti ir suprasti. Kai kuriate mygtuką „React Native“, galite sukurti apvalų arba kvadratinį mygtuką. Tačiau kai naudojate šiuos mygtukus programoje, gali būti sunku suprasti, kuris iš jų yra apvalus, o kuris kvadratinis. Tai gali sukelti painiavą ir problemų, kai bandote naudoti programos mygtukus.
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 } });
Šis kodas parašytas „React Native“ ir sukuria mygtuką „Spustelėkite mane“. Paspaudus mygtuką, atliekamas veiksmas.
Pirmoji eilutė importuoja „React“ ir „React Native“ bibliotekas.
Antroje eilutėje sukuriamas komponentas, vadinamas App. Šis komponentas pateiks mygtuką.
Trečioje eilutėje pateikiamas programos komponentas. Programos komponente yra elementas TouchableOpacity, kuris bus pateiktas kaip mygtukas. Mygtukas turi stilių styles.button, kuris apibrėžiamas ketvirtoje eilutėje. Mygtuko tekstas turės stilių styles.text, kuris apibrėžiamas penktoje eilutėje.
Šeštoji ir septintoji eilutės apibrėžia atitinkamai konteinerio ir mygtuko elementų stilius. Sudėtinio elemento „justifyContent“ ir „alignItems“ reikšmės bus „centras“, kad mygtukas būtų ekrano centre. Mygtuko elemento fono spalva bus „#4ba37b“, o plotis – 100 pikselių. Jo kraštinės spindulys taip pat bus nustatytas į 50, kad jis būtų rodomas kaip apskritimas, o ne kaip stačiakampis. Galiausiai jame bus nustatyti elementai „alignItems“ į „centrą“, kad jame esantis tekstas būtų centruotas vertikaliai ir horizontaliai.
nustatykite mygtukus React
„React Native“ yra kelių skirtingų tipų mygtukai:
Mygtukas
Teksto įvestis
Radijo mygtukas
Žymės langelis
Kaip mygtukams suteikti stilių
Yra keletas būdų, kaip „React Native“ mygtukams suteikti stilių.
Vienas iš būdų yra naudoti StyleSheet komponentą. Stiliaus objektą galite perduoti kaip antrąjį argumentą StyleSheet komponento create() metodui. Stiliaus objekte gali būti šrifto, spalvos ir fono spalvos savybių.
Kitas būdas yra naudoti mygtuko komponentą. Stiliaus objektą galite perduoti kaip antrąjį argumentą mygtuko komponento create() metodui. Stiliaus objekte gali būti šrifto, spalvos ir fono spalvos savybių.
