Er is een probleem met native reactieknoppen die soms moeilijk te zien en te begrijpen zijn. Wanneer je een knop maakt in React Native, heb je de mogelijkheid om een ronde of vierkante knop te maken. Wanneer u deze knoppen in uw app gebruikt, kan het echter moeilijk zijn om te zien welke rond en welke vierkant is. Dit kan leiden tot verwarring en problemen wanneer u de knoppen in uw app probeert te gebruiken.
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 } });
Deze code is geschreven in React Native en creëert een knop met de tekst "Click Me". Wanneer op de knop wordt geklikt, wordt er een actie uitgevoerd.
De eerste regel importeert de React- en React Native-bibliotheken.
De tweede regel maakt een component met de naam App. Deze component zal een knop renderen.
De derde regel geeft de app-component weer. De App-component bevat een TouchableOpacity-element, dat wordt weergegeven als een knop. De knop heeft een stijl van styles.button, die wordt gedefinieerd in de vierde regel. De tekst van de knop heeft de stijl styles.text, die wordt gedefinieerd in de vijfde regel.
De zesde en zevende regel definiëren de stijlen voor respectievelijk de container- en knopelementen. Het container-element heeft de waarde 'rechtvaardigContent' en 'alignItems' ingesteld op 'center', zodat de knop gecentreerd op het scherm wordt weergegeven. Het knopelement heeft een achtergrondkleur van '#4ba37b' en een breedte van 100 pixels. Het heeft ook borderRadius ingesteld op 50, zodat het verschijnt als een cirkel in plaats van een rechthoek. Ten slotte zal alignItems zijn ingesteld op 'center', zodat de tekst erin verticaal en horizontaal wordt gecentreerd.
knoppen instellen in Reageren
Er zijn een paar verschillende soorten knoppen in React Native:
Knop
Tekst invoer
Radio knop
checkbox
Stijlen geven aan knoppen
Er zijn een paar manieren om stijlen te geven aan knoppen in React Native.
Eén manier is om de StyleSheet-component te gebruiken. U kunt een stijlobject doorgeven als het tweede argument aan de methode create() van de component StyleSheet. Het stijlobject kan eigenschappen voor lettertype, kleur en achtergrondkleur bevatten.
Een andere manier is om de Button-component te gebruiken. U kunt een stijlobject doorgeven als het tweede argument aan de methode create() van de component Button. Het stijlobject kan eigenschappen voor lettertype, kleur en achtergrondkleur bevatten.
