Det finns ett problem med reagera inbyggda knappar som kan vara svåra att se och förstå. När du skapar en knapp i React Native har du möjlighet att skapa en rund eller fyrkantig knapp. När du använder dessa knappar i din app kan det dock vara svårt att se vilken som är rund och vilken som är fyrkantig. Detta kan leda till förvirring och problem när du försöker använda knapparna i din app.
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 } });
Den här koden är skriven i React Native och skapar en knapp som säger "Klicka på mig." När knappen klickas utförs en åtgärd.
Den första raden importerar React- och React Native-biblioteken.
Den andra raden skapar en komponent som heter App. Den här komponenten renderar en knapp.
Den tredje raden återger App-komponenten. App-komponenten innehåller ett TouchableOpacity-element, som återges som en knapp. Knappen har stilen styles.button, som definieras på den fjärde raden. Knappens text kommer att ha stilen styles.text, som definieras på den femte raden.
Den sjätte och sjunde raden definierar stilarna för behållar- respektive knappelementen. Behållarelementet kommer att ha justifyContent och alignItems inställda på 'center', så att knappen kommer att centreras på skärmen. Knappelementet kommer att ha en bakgrundsfärg på '#4ba37b' och en bredd på 100 pixlar. Den kommer också att ha borderRadius inställd på 50, så att den visas som en cirkel snarare än en rektangel. Slutligen kommer den att ha alignItems inställd på "center", så att texten i den centreras vertikalt och horisontellt.
ställ in knappar i React
Det finns några olika typer av knappar i React Native:
Knappen
Textinmatning
Radio knapp
Kryssruta
Hur man ger stilar till knappar
Det finns några sätt att ge stilar till knappar i React Native.
Ett sätt är att använda StyleSheet-komponenten. Du kan skicka in ett stilobjekt som det andra argumentet till StyleSheet-komponentens create()-metod. Stilobjektet kan innehålla egenskaper för teckensnitt, färg och bakgrundsfärg.
Ett annat sätt är att använda Button-komponenten. Du kan skicka in ett stilobjekt som det andra argumentet till Button-komponentens create()-metod. Stilobjektet kan innehålla egenskaper för teckensnitt, färg och bakgrundsfärg.
