Υπάρχει ένα πρόβλημα με τα εγγενή κουμπιά react που μπορεί να είναι δύσκολο να δείτε και να κατανοήσετε. Όταν δημιουργείτε ένα κουμπί στο React Native, έχετε την επιλογή να δημιουργήσετε ένα στρογγυλό ή τετράγωνο κουμπί. Ωστόσο, όταν χρησιμοποιείτε αυτά τα κουμπιά στην εφαρμογή σας, μπορεί να είναι δύσκολο να δείτε ποιο είναι στρογγυλό και ποιο τετράγωνο. Αυτό μπορεί να οδηγήσει σε σύγχυση και προβλήματα όταν προσπαθείτε να χρησιμοποιήσετε τα κουμπιά στην εφαρμογή σας.
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 } });
Αυτός ο κώδικας είναι γραμμένος στο React Native και δημιουργεί ένα κουμπί που λέει "Click Me". Όταν κάνετε κλικ στο κουμπί, εκτελείται μια ενέργεια.
Η πρώτη γραμμή εισάγει τις εγγενείς βιβλιοθήκες React και React.
Η δεύτερη γραμμή δημιουργεί ένα στοιχείο που ονομάζεται App. Αυτό το στοιχείο θα αποδώσει ένα κουμπί.
Η τρίτη γραμμή αποδίδει το στοιχείο App. Το στοιχείο της εφαρμογής περιέχει ένα στοιχείο TouchableOpacity, το οποίο θα αποδοθεί ως κουμπί. Το κουμπί έχει ένα στυλ styles.button, το οποίο ορίζεται στην τέταρτη γραμμή. Το κείμενο του κουμπιού θα έχει ένα στυλ styles.text, το οποίο ορίζεται στην πέμπτη γραμμή.
Η έκτη και η έβδομη γραμμή ορίζουν τα στυλ για τα στοιχεία κοντέινερ και κουμπιού, αντίστοιχα. Το στοιχείο κοντέινερ θα έχει το justifyContent και το alignItems ρυθμισμένο σε «κέντρο», έτσι ώστε το κουμπί να είναι κεντραρισμένο στην οθόνη. Το στοιχείο κουμπιού θα έχει χρώμα φόντου '#4ba37b' και πλάτος 100 pixel. Θα έχει επίσης το borderRadius ρυθμισμένο στο 50, έτσι ώστε να εμφανίζεται ως κύκλος και όχι ως ορθογώνιο. Τέλος, θα έχει τα alignItems ρυθμισμένα στο «κέντρο», έτσι ώστε το κείμενο μέσα σε αυτό να είναι κεντραρισμένο κατακόρυφα και οριζόντια.
ορίστε τα κουμπιά στο React
Υπάρχουν μερικοί διαφορετικοί τύποι κουμπιών στο React Native:
Κουμπί
Εισαγωγή κειμένου
Κουμπί ραδιοφώνου
Πλαίσιο ελέγχου
Πώς να δώσετε στυλ στα κουμπιά
Υπάρχουν μερικοί τρόποι για να δώσετε στυλ σε κουμπιά στο React Native.
Ένας τρόπος είναι να χρησιμοποιήσετε το στοιχείο StyleSheet. Μπορείτε να περάσετε ένα αντικείμενο στυλ ως το δεύτερο όρισμα στη μέθοδο create() του στοιχείου StyleSheet. Το αντικείμενο στυλ μπορεί να περιέχει ιδιότητες για γραμματοσειρά, χρώμα και χρώμα φόντου.
Ένας άλλος τρόπος είναι να χρησιμοποιήσετε το στοιχείο Button. Μπορείτε να περάσετε σε ένα αντικείμενο στυλ ως το δεύτερο όρισμα στη μέθοδο create() του στοιχείου Button. Το αντικείμενο στυλ μπορεί να περιέχει ιδιότητες για γραμματοσειρά, χρώμα και χρώμα φόντου.
