React algsete nuppudega on probleem, mida võib olla raske näha ja mõista. Kui loote nupu rakenduses React Native, saate luua ümmarguse või ruudukujulise nupu. Kui aga kasutate neid nuppe oma rakenduses, võib olla raske näha, milline neist on ümmargune ja kumb ruudukujuline. See võib põhjustada segadust ja probleeme, kui proovite oma rakenduse nuppe kasutada.
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 } });
See kood on kirjutatud React Native'is ja loob nupu, mis ütleb "Click Me". Nupule klõpsamisel tehakse toiming.
Esimene rida impordib React ja React Native teegid.
Teine rida loob komponendi nimega App. See komponent renderdab nupu.
Kolmas rida renderdab rakenduse komponendi. Rakenduse komponent sisaldab elementi TouchableOpacity, mis renderdatakse nupuna. Nupul on stiil styles.button, mis on määratletud neljandal real. Nupu tekstil on stiil styles.text, mis on määratletud viiendal real.
Kuues ja seitsmes rida määratlevad vastavalt konteineri ja nupu elementide stiilid. Konteineri elemendil on justifyContent ja alignItems seatud "keskele", nii et nupp on ekraani keskel. Nupuelemendi taustavärv on '#4ba37b' ja laius 100 pikslit. Selle piiriraadiuse väärtuseks on seatud 50, nii et see kuvatakse pigem ringi kui ristkülikuna. Lõpuks on sellel alignItems seatud "keskele", nii et selles olev tekst on vertikaalselt ja horisontaalselt keskel.
määrake nupud Reactis
React Native'is on mitut erinevat tüüpi nuppe:
Nupp
Tekstisisestus
Raadio nupp
Checkbox
Kuidas nuppudele stiile anda
React Native'i nuppudele stiilide andmiseks on mitu võimalust.
Üks võimalus on kasutada StyleSheet komponenti. Saate sisestada stiiliobjekti teise argumendina komponendi StyleSheet meetodile create(). Stiiliobjekt võib sisaldada fondi, värvi ja taustavärvi atribuute.
Teine võimalus on kasutada nuppu Button. Saate sisestada stiiliobjekti teise argumendina Button komponendi loomismeetodile (). Stiiliobjekt võib sisaldada fondi, värvi ja taustavärvi atribuute.
