Χρησιμοποιήστε το flexbox για να δημιουργήσετε ευέλικτες και ανταποκρινόμενες διατάξεις στο React Native.

Το Flexbox είναι ένα εργαλείο CSS που σας επιτρέπει να δημιουργείτε ευέλικτες μονοδιάστατες διατάξεις. Σας δίνει τη δυνατότητα να ελέγχετε τη θέση των στοιχείων μέσα σε ένα κοντέινερ, ώστε να έχετε περισσότερο έλεγχο στην παρουσίαση του περιεχομένου σας στην οθόνη.

Αυτό το σεμινάριο δείχνει πώς να χρησιμοποιήσετε το flexbox στο React Native για τη δημιουργία ευέλικτων και αποκριτικών διατάξεων. Θα μάθετε πώς να τοποθετείτε θυγατρικά στοιχεία ενός στοιχείου κοντέινερ χρησιμοποιώντας ιδιότητες flexbox.

Σύγκριση της συμπεριφοράς Flexbox στο React Native και στην ανάπτυξη Ιστού

Εάν θέλετε να οργανώσετε το περιεχόμενο του στοιχείου κοντέινερ χρησιμοποιώντας το flexbox σε απλό CSS, πρέπει να χρησιμοποιήσετε το οθόνη: ευέλικτη ιδιοκτησία.

δοχείο { απεικόνιση: flex; }

Αλλά με το React Native, δεν χρειάζεται να ρυθμίσετε το οθόνη: ευέλικτη ιδιοκτησία. Αυτό συμβαίνει επειδή το React Native χρησιμοποιεί το flexbox από προεπιλογή για τη δημιουργία διατάξεων.

instagram viewer

Ακολουθούν ορισμένες διαφορές που πρέπει να έχετε κατά νου πώς συμπεριφέρεται το flexbox όταν χρησιμοποιείται για την ευθυγράμμιση στοιχείων HTML σε εφαρμογές ιστού σε σχέση με τον τρόπο συμπεριφοράς του στο React Native:

  • flexDirection προεπιλογή σε σειρά σε εφαρμογές web, αλλά από προεπιλογή στήλη στο React Native.
  • alignContent προεπιλογή σε τέντωμα σε διαδικτυακές εφαρμογές και flex-start στο React Native.
  • flexShrink από προεπιλογή 1 στον ιστό και 0 στο React Native.

Χρήση ιδιοτήτων Flexbox στο React Native

Οι ιδιότητες Flexbox σάς επιτρέπουν να περιγράψετε τον τρόπο ευθυγράμμισης των θυγατρικών στοιχείων του στοιχείου κοντέινερ. Πρέπει να κατανοήσετε αυτές τις ιδιότητες για να δημιουργήσετε σύνθετες διατάξεις που ταιριάζουν στις ανάγκες της εφαρμογής σας.

1. Χρήση της ιδιότητας flex στο React Native

ο καλώδιο ιδιοκτησία καθορίζει πώς το Θέα συστατικό γεμίζει την οθόνη. Αυτή η ιδιότητα δέχεται μια ακέραια τιμή μεγαλύτερη ή ίση με 0. Η τιμή καθορίζει το κλάσμα της οθόνης Θέα συστατικό πρέπει να καταλαμβάνει.

Σε αυτό το παράδειγμα, δημιουργείτε μια οθόνη με μια ενιαία προβολή από το Βιβλιοθήκη στοιχείων React Native:

εισαγωγή Αντιδρώ από"αντιδρώ"
εισαγωγή { StyleSheet, View } από"react-native"
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
 <>
backroundColor: "#A020F0", καλώδιο: 1}} /> 
 </>
 )
}

Εδώ είναι η έξοδος:

Εδώ εκχωρήσατε το 1 ως την ευέλικτη τιμή του Θέα συστατικό. ο Θέα Το στοιχείο καταλαμβάνει ολόκληρη την οθόνη (100%) επειδή έχετε χωρίσει το χώρο σε μία ομάδα.

Ας ρίξουμε μια ματιά σε ένα άλλο παράδειγμα:

εισαγωγή Αντιδρώ από"αντιδρώ"
εισαγωγή { StyleSheet, View } από"react-native"
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (

backroundColor: "#A020F0", καλώδιο: 1}} />
χρώμα του φόντου: "#7cb48f", καλώδιο: 3 }} /> 
 </View>
 )
}

Ιδού το αποτέλεσμα:

Εδώ έχετε δύο Θέα στοιχεία μέσα σε ένα άλλο Θέα στοιχείο. Το πρώτο παιδί έχει οριστεί να flex: 1, και το δεύτερο έχει οριστεί σε flex: 3. Αυτές οι αξίες χωρίζουν τον χώρο μεταξύ των δύο παιδιών. Η πρώτη καταλαμβάνει το 1/4 της οθόνης ενώ η δεύτερη τα 3/4 της οθόνης (Η οθόνη χωρίζεται σε 4 μπλοκ επειδή 1+3 = 4).

2. Χρήση της ιδιότητας flexDirection στο React Native

Αν κοιτάξετε το παραπάνω στιγμιότυπο οθόνης, θα δείτε ότι τα θυγατρικά στοιχεία βρίσκονται το ένα πάνω στο άλλο. Αυτή είναι η προεπιλεγμένη συμπεριφορά του flexbox στο React Native (flexDirection προεπιλογή στο στήλη αξία).

Μπορείτε επίσης να ρυθμίσετε το flexDirection ιδιοκτησία σε σειρά, στήλη-πίσω, και σειρά-αντίστροφη. Στο παρακάτω παράδειγμα, flexDirection Έχει οριστεί σειρά, επομένως τα θυγατρικά στοιχεία τοποθετούνται δίπλα-δίπλα:

εισαγωγή Αντιδρώ από"αντιδρώ"
εισαγωγή { StyleSheet, View } από"react-native"
συνθ styles = StyleSheet.create({
 δοχείο: {
 χρώμα του φόντου: "#00FF00",
 καλώδιο: 1,
 στοίχιση στοιχείων: "κέντρο",
 flexDirection: "σειρά",
 },
 τετράγωνο: {
 χρώμα του φόντου: "#FF0000",
 πλάτος: 98,
 ύψος: 98,
 περιθώριο: 4,
 },
});
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (




 </View>
 )
}

Ιδού το αποτέλεσμα:

Ρύθμιση του flexDirection προς την σειρά-αντίστροφη τοποθετεί τα παιδιά δίπλα-δίπλα, αλλά αντιστρέφει τη σειρά. Ομοίως, το στήλη-πίσω τοποθετεί τα παιδιά το ένα πάνω στο άλλο αλλά με την αντίθετη σειρά από αυτή που ορίζει το στήλη.

3. Χρήση του justifyContent στο React Native

ο δικαιολογώ Περιεχόμενο Η ιδιότητα ευθυγραμμίζει τα θυγατρικά στοιχεία ενός κοντέινερ flexbox κατά μήκος του πρωτεύοντος άξονα. Αν το flexDirection Έχει οριστεί στήλη, τότε ο πρωτεύων άξονας είναι ο κατακόρυφος άξονας. Αν έχει ρυθμιστεί σε σειρά, τότε είναι οριζόντια.

Οι πιθανές τιμές του δικαιολογώ Περιεχόμενοείναι flex-start, flex-end, κέντρο, διάστημα-μεταξύ, χώρο-γύρω, και χώρο-ομοιόμορφα.

Στο παρακάτω παράδειγμα, flexDirection έχει ρυθμιστεί σε σειρά και δικαιολογώ ΠεριεχόμενοΈχει οριστεί flex-start:

εισαγωγή Αντιδρώ από"αντιδρώ"
εισαγωγή { StyleSheet, View } από"react-native"
συνθ styles = StyleSheet.create({
 δοχείο: {
 χρώμα του φόντου: "#00FF00",
 καλώδιο: 1,
 justifyContent: "flex-start",
 flexDirection: "σειρά",
 },
 τετράγωνο: {
 χρώμα του φόντου: "#FF0000",
 πλάτος: 98,
 ύψος: 98,
 περιθώριο: 6,
 },
});
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (




 </View>
 )
}

Εδώ είναι η έξοδος:

Αν αλλάξετε το flexDirection προς την στήλη, flex-start θα ισχύει στον κατακόρυφο άξονα. Έτσι τα κουτιά θα στοιβάζονται το ένα πάνω στο άλλο.

Σύνθεση δικαιολογώ Περιεχόμενο στο κέντρο (ενώ ο πρωτεύων άξονας είναι α στήλη) κεντράρει τα κουτιά των τριών παιδιών.

4. Χρήση alignItems στο React Native

ο στοίχιση αντικειμένων Η ιδιότητα καθορίζει την τοποθέτηση των αντικειμένων σε ένα δοχείο flexbox κατά μήκος του δευτερεύοντος άξονα. Αυτό είναι το αντίθετο του δικαιολογώ Περιεχόμενο. Οπως ακριβώς δικαιολογώ Περιεχόμενο φροντίζει για την κατακόρυφη ευθυγράμμιση, στοίχιση αντικειμένων χειρίζεται την οριζόντια ευθυγράμμιση. Οι πιθανές τιμές του στοίχιση αντικειμένων είναι flex-start, flex-end, κέντρο, και γραμμή βάσης.

Στο παρακάτω παράδειγμα, flexDirection Έχει οριστεί σειρά και στοίχιση αντικειμένωνΈχει οριστεί flex-start:

εισαγωγή Αντιδρώ από"αντιδρώ"
εισαγωγή { StyleSheet, View } από"react-native"
συνθ styles = StyleSheet.create({
 δοχείο: {
 χρώμα του φόντου: "#00FF00",
 καλώδιο: 1,
 στοίχιση στοιχείων: "flex-start",
 flexDirection: "σειρά",
 },
 τετράγωνο: {
 χρώμα του φόντου: "#FF0000",
 πλάτος: 98,
 ύψος: 98,
 περιθώριο: 6,
 },
});
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (





 </View>
 )
}

Εδώ είναι η έξοδος:

Εάν ρυθμίσετε το flexDirection ιδιοκτησία σε στήλη και στοίχιση αντικειμένων προς την κέντρο, τα κουτιά θα τοποθετηθούν το ένα πάνω στο άλλο και τα παιδικά στοιχεία θα ευθυγραμμιστούν στο κέντρο.

5. Χρήση alignSelf στο React Native

ο ευθυγραμμίζει τον εαυτό Η ιδιότητα καθορίζει πώς ένα μεμονωμένο παιδί πρέπει να ευθυγραμμιστεί στο κοντέινερ. Υπερισχύει στοίχιση αντικειμένων, και οι πιθανές τιμές είναι flex-start, flex-end, κέντρο, και γραμμή βάσης.

Στο παρακάτω παράδειγμα, ορίσαμε μια προεπιλογή στοίχιση αντικειμένων ιδιοκτησία και να την παρακάμψετε χρησιμοποιώντας ευθυγραμμίζει τον εαυτό:

εισαγωγή Αντιδρώ από"αντιδρώ"
εισαγωγή { StyleSheet, View } από"react-native"
συνθ styles = StyleSheet.create({
 δοχείο: {
 χρώμα του φόντου: "#00FF00",
 καλώδιο: 1,
 στοίχιση στοιχείων: "κέντρο", 
 justifyContent: "κέντρο", 
 flexDirection: "σειρά",
 },
 τετράγωνο: {
 χρώμα του φόντου: "#FF0000",
 πλάτος: 98,
 ύψος: 98,
 περιθώριο: 6,
 },
});
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


ευθυγραμμίζει τον εαυτό: "flex-end" }]} />
ευθυγραμμίζει τον εαυτό: "flex-start" }]} /> 
 )
}

Ιδού το αποτέλεσμα:

Άλλες ιδιότητες Flexbox

Υπάρχουν δύο άλλες ιδιότητες που μπορείτε να χρησιμοποιήσετε κατά τη δημιουργία μιας διάταξης flexbox στο React Native:

  • flexWrap: Σε περίπτωση που ξεχειλίσουν τα παιδιά ενός δοχείου από αυτό. Χρήση flexWrap για να καθορίσετε εάν θα πρέπει να συρρικνωθούν σε μία γραμμή ή να τυλιχτούν σε πολλές γραμμές. Πιθανές τιμές για flexWrap είναι nowrap και κάλυμμα.
  • χάσμα: Χρησιμοποιείτε το χάσμα ιδιότητα προσθήκης κενών μεταξύ των στοιχείων πλέγματος στο κοντέινερ. Η τιμή του πρέπει να είναι το μέγεθος του κενού που θέλετε μεταξύ των στοιχείων. Μπορείτε να καθορίσετε το χάσμα ιδιοκτησία χρησιμοποιώντας μονάδες CSS όπως px, em ή rem.

Μάθετε περισσότερα για το React Native

Τώρα που καταλαβαίνετε το flexbox και ξέρετε πώς να το χρησιμοποιήσετε στην εφαρμογή React Native για να δημιουργήσετε ευέλικτες και ανταποκρινόμενες διατάξεις, ήρθε η ώρα να ασχοληθείτε με το έντονο React Native.