Es gibt ein Problem mit nativen Reaktionsschaltflächen, die schwer zu sehen und zu verstehen sind. Wenn Sie eine Schaltfläche in React Native erstellen, haben Sie die Möglichkeit, eine runde oder quadratische Schaltfläche zu erstellen. Wenn Sie diese Schaltflächen jedoch in Ihrer App verwenden, kann es schwierig sein zu erkennen, welche rund und welche eckig ist. Dies kann zu Verwirrung und Problemen führen, wenn Sie versuchen, die Schaltflächen in Ihrer App zu verwenden.
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 } });
Dieser Code ist in React Native geschrieben und erstellt eine Schaltfläche mit der Aufschrift „Click Me“. Wenn auf die Schaltfläche geklickt wird, wird eine Aktion ausgeführt.
Die erste Zeile importiert die Bibliotheken React und React Native.
Die zweite Zeile erstellt eine Komponente namens App. Diese Komponente rendert eine Schaltfläche.
Die dritte Zeile rendert die App-Komponente. Die App-Komponente enthält ein TouchableOpacity-Element, das als Schaltfläche gerendert wird. Die Schaltfläche hat einen Stil von styles.button, der in der vierten Zeile definiert ist. Der Text der Schaltfläche hat den Stil styles.text, der in der fünften Zeile definiert ist.
Die sechste und siebte Zeile definieren die Stile für die Container- bzw. Schaltflächenelemente. Für das Containerelement werden justifyContent und alignItems auf „center“ gesetzt, sodass die Schaltfläche auf dem Bildschirm zentriert wird. Das Schaltflächenelement hat eine Hintergrundfarbe von „#4ba37b“ und eine Breite von 100 Pixeln. Außerdem wird der borderRadius auf 50 gesetzt, sodass er als Kreis und nicht als Rechteck angezeigt wird. Schließlich wird alignItems auf „center“ gesetzt, sodass der darin enthaltene Text vertikal und horizontal zentriert wird.
Setzen Sie Schaltflächen in React
Es gibt ein paar verschiedene Arten von Schaltflächen in React Native:
Taste
Text Eingabe
RadioButton
Checkbox
So geben Sie Schaltflächen Stile
Es gibt einige Möglichkeiten, Schaltflächen in React Native Stile zuzuweisen.
Eine Möglichkeit besteht darin, die StyleSheet-Komponente zu verwenden. Sie können ein Stilobjekt als zweites Argument an die create()-Methode der StyleSheet-Komponente übergeben. Das Stilobjekt kann Eigenschaften für Schriftart, Farbe und Hintergrundfarbe enthalten.
Eine andere Möglichkeit ist die Verwendung der Button-Komponente. Sie können ein Stilobjekt als zweites Argument an die create()-Methode der Button-Komponente übergeben. Das Stilobjekt kann Eigenschaften für Schriftart, Farbe und Hintergrundfarbe enthalten.
