Det er et problem med reager native-knapper som kan være vanskelig å se og forstå. Når du oppretter en knapp i React Native, har du muligheten til å lage en rund eller firkantet knapp. Men når du bruker disse knappene i appen din, kan det være vanskelig å se hvilken som er rund og hvilken som er firkantet. Dette kan føre til forvirring og problemer når du prøver å bruke knappene i appen din.
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 koden er skrevet i React Native og lager en knapp som sier "Click Me." Når knappen klikkes, utføres en handling.
Den første linjen importerer React- og React Native-bibliotekene.
Den andre linjen lager en komponent kalt App. Denne komponenten vil gjengi en knapp.
Den tredje linjen gjengir App-komponenten. App-komponenten inneholder et TouchableOpacity-element, som gjengis som en knapp. Knappen har stilen styles.button, som er definert i den fjerde linjen. Knappens tekst vil ha stilen styles.text, som er definert på den femte linjen.
Den sjette og syvende linjen definerer stilene for henholdsvis beholder- og knappeelementene. Beholderelementet vil ha justifyContent og alignItems satt til 'senter', slik at knappen vil være sentrert på skjermen. Knappeelementet vil ha en bakgrunnsfarge på '#4ba37b' og en bredde på 100 piksler. Den vil også ha borderRadius satt til 50, slik at den fremstår som en sirkel i stedet for et rektangel. Til slutt vil den ha alignItems satt til 'senter', slik at teksten i den er sentrert vertikalt og horisontalt.
sett knapper i React
Det er noen forskjellige typer knapper i React Native:
Button
Tekstinntasting
Radioknapp
Avmerkingsboks
Hvordan gi stiler til knapper
Det er noen få måter å gi stiler til knapper i React Native.
En måte er å bruke StyleSheet-komponenten. Du kan sende inn et stilobjekt som det andre argumentet til StyleSheet-komponentens create()-metode. Stilobjektet kan inneholde egenskaper for font, farge og bakgrunnsfarge.
En annen måte er å bruke Button-komponenten. Du kan sende inn et stilobjekt som det andre argumentet til Button-komponentens create()-metode. Stilobjektet kan inneholde egenskaper for font, farge og bakgrunnsfarge.
