Der er et problem med reager native-knapper, som kan være svære at se og forstå. Når du opretter en knap i React Native, har du mulighed for at oprette en rund eller firkantet knap. Men når du bruger disse knapper i din app, kan det være svært at se, hvilken der er rund, og hvilken der er firkantet. Dette kan føre til forvirring og problemer, når du forsøger at bruge knapperne 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 } });
Denne kode er skrevet i React Native og skaber en knap, der siger "Klik på mig." Når der trykkes på knappen, udføres en handling.
Den første linje importerer React- og React Native-bibliotekerne.
Den anden linje opretter en komponent kaldet App. Denne komponent vil gengive en knap.
Den tredje linje gengiver App-komponenten. App-komponenten indeholder et TouchableOpacity-element, som gengives som en knap. Knappen har en stil med styles.button, som er defineret i den fjerde linje. Knappens tekst vil have stilen styles.text, som er defineret i den femte linje.
Den sjette og syvende linje definerer stilene for henholdsvis beholder- og knapelementerne. Containerelementet vil have justifyContent og alignItems sat til 'center', så knappen bliver centreret på skærmen. Knapelementet vil have en baggrundsfarve på '#4ba37b' og en bredde på 100 pixels. Den vil også have borderRadius sat til 50, så den fremstår som en cirkel i stedet for et rektangel. Endelig vil den have alignItems sat til 'center', så teksten i den er centreret lodret og vandret.
sæt knapper i React
Der er et par forskellige typer knapper i React Native:
Button
Tekstinput
Radio knap
Afkrydsningsfelt
Sådan giver du stilarter til knapper
Der er et par måder at give stilarter til knapper i React Native.
En måde er at bruge StyleSheet-komponenten. Du kan overføre et stilobjekt som det andet argument til StyleSheet-komponentens create()-metode. Stilobjektet kan indeholde egenskaber for skrifttype, farve og baggrundsfarve.
En anden måde er at bruge knap-komponenten. Du kan overføre et stilobjekt som det andet argument til Button-komponentens create()-metode. Stilobjektet kan indeholde egenskaber for skrifttype, farve og baggrundsfarve.
