Οι βιβλιοθήκες στοιχείων είναι μια συλλογή προσαρμόσιμου και επαναχρησιμοποιήσιμου κώδικα που μπορεί να κατασκευαστεί για να ταιριάζει στο μοτίβο σχεδίασης μιας συγκεκριμένης εφαρμογής. Βοηθούν στη διατήρηση της συνεπούς σχεδίασης σε όλες τις πλατφόρμες και στην επιτάχυνση της διαδικασίας ανάπτυξης.
Εδώ θα μάθετε πώς να χρησιμοποιείτε τη βιβλιοθήκη στοιχείων React Native Elements κατά τη δημιουργία της επόμενης εφαρμογής React Native.
Τι είναι το React Native Elements;
Το React Native Elements (RNE) είναι μια προσπάθεια ανοιχτού κώδικα από τους προγραμματιστές του React Native για τη δημιουργία μιας βιβλιοθήκης στοιχείων που μπορεί να είναι χρήσιμη κατά τη δημιουργία εφαρμογών Android, iOS και web. Σε αντίθεση με πολλούς άλλες βιβλιοθήκες στοιχείων React Native, το RNE υποστηρίζει τη σύνταξη TypeScript.
Η βιβλιοθήκη αποτελείται από περισσότερα από 30 στοιχεία που επικεντρώνονται στη δομή των στοιχείων.
Εγκατάσταση Reactive Native Elements με το React Native CLI
Οι ακόλουθες οδηγίες είναι για την εγκατάσταση του React Native Elements σε ένα έργο που δημιουργήθηκε χρησιμοποιώντας το cli React Native.
Εγκαταστήστε το React Native Elements στη γυμνή σας εφαρμογή React Native εκτελώντας:
npm εγκατάσταση @rneui/themed @rneui/base
Θα πρέπει επίσης να εγκαταστήσετε το react-native-vector-icons και το safe-area-context:
npm εγκαθιστώ αντιδρώ-ντόπιος-διάνυσμα-εικονίδια αντιδρούν-ντόπιος-ασφαλής-περιοχή-συμφραζόμενα
Πώς να εγκαταστήσετε το React Native Elements σε ένα Expo Project
Για να εγκαταστήσετε το React Native Elements σε ένα υπάρχον Expo project, εγκαταστήστε το πακέτο και react-native-safe-area-context:
νήμα προσθήκη @rneui/themed @rneui/base react-ντόπιος-safe-area-context
Διατηρήστε έναν διαχειριστή πακέτων όπως npm ή νήμα κατά την εγκατάσταση πακέτων για να αποφύγετε τον κίνδυνο συγκρούσεων εξάρτησης.
Τα έργα που δημιουργούνται με χρήση του expo cli έχουν τα εικονίδια react-native-vector εγκατεστημένα από προεπιλογή, επομένως δεν χρειάζεται να το εγκαταστήσετε.
Στοιχεία Styling Single React Native Elements
Όλα τα εξαρτήματα που είναι διαθέσιμα μέσω του RNE λαμβάνουν διάφορα στηρίγματα για το στυλ του εξαρτήματος και του δοχείου του εξαρτήματος.
Το δοχείο του εξαρτήματος είναι βασικό ετικέτα που τυλίγεται γύρω από μια ετικέτα συστατικού, όπως το. ο Η ετικέτα είναι αήττητη γύρω από το στοιχείο και παίρνει α ContainerStyle στήριγμα για την εφαρμογή στυλ προβολής.
Ένα στοιχείο μπορεί να λάβει προεπιλεγμένα στηρίγματα στυλ όπως χρώμα, τύπος, και Μέγεθος. Ένα στοιχείο μπορεί επίσης να λάβει ένα μοναδικό προσαρμοσμένο στυλ στηρίγματος για να χειριστεί τα στυλ του στοιχείου.
Αυτά είναι όλα εξωτερικά στυλ για το στοιχείο.
Για παράδειγμα, το styling του Κουμπί συστατικό:
εισαγωγή { Προβολή } από "react-native"?
εισαγωγή { Κουμπί } από "@rneui/themed";
συνθ MyComponent = () => {
ΕΠΙΣΤΡΟΦΗ (
<Θέα>
<Κουμπί
buttonStyle={{ backgroundColor: "γκρί" }}
containerStyle={{ πλάτος: 150 }}
>
Συμπαγές κουμπί
</Button>
<Κουμπί
τύπος="περίγραμμα"
containerStyle={{ πλάτος: 150, περιθώριο: 10 }}
τίτλος="Κουμπί περίγραμμα"
/>
</View>
);
}
Ο παραπάνω κώδικας δείχνει πώς μπορείτε να εφαρμόσετε στυλ σε ένα στοιχείο Button. Το One Button χρησιμοποιεί μια προεπιλογή τύπος prop, και το άλλο χρησιμοποιεί το custom στυλ κουμπιού στήριγμα. Και τα δύο κουμπιά χρησιμοποιούν επίσης το ContainerStyle στήριγμα για να προσθέσετε στυλ προβολής.
Δημιουργία θεμάτων για στοιχεία React Native Elements
Η δημιουργία θεμάτων για στοιχεία RNE είναι χρήσιμη όταν θέλετε να εφαρμόσετε ένα στυλ σε κάθε εμφάνιση αυτών των στοιχείων. Με τα θέματα, η προσαρμογή των στοιχείων σας ώστε να ταιριάζουν στο επιθυμητό σχέδιο σχεδίασης γίνεται εύκολη υπόθεση.
Το RNE παρέχει α createTheme() λειτουργούν σε στοιχεία στυλ. Αυτή η συνάρτηση θα κρατήσει στυλ θέματος που παρακάμπτουν τα εσωτερικά ή προεπιλεγμένα στυλ κάθε στοιχείου.
Για να δημιουργήσετε ένα θέμα, καλέστε createTheme() και περάστε τα επιθυμητά στυλ θέματος ως όρισμα συνάρτησης:
εισαγωγή { ThemeProvider, createTheme } από '@rneui/themed';
συνθ θέμα = δημιουργία θέματος({
συστατικά: {
Κουμπί: {
ContainerStyle: {
περιθώριο: 10,
},
στιλ τίτλου: {
χρώμα: "μαύρος",
},
},
},
});
ο ThemeProvider θα εφαρμόσει στυλ σε οποιοδήποτε στοιχείο είναι τυλιγμένο μέσα σε αυτό.
Ο πάροχος αποδέχεται α θέμα στήριγμα που έχει οριστεί στο θέμα που δημιουργήθηκε παραπάνω:
<ThemeProvider theme={theme}>
<Τίτλος κουμπιού="Κουμπί με θέμα" />
</ThemeProvider>
<Τίτλος κουμπιού="Κανονικό κουμπί" />
Τα στυλ θέματος αντικαθιστούν τα εσωτερικά ή προεπιλεγμένα στυλ στοιχείων, αλλά δεν θα αντικαταστήσουν ένα στυλ εξωτερικού στοιχείου.
Η σειρά προτεραιότητας του RNE τοποθετεί τα εξωτερικά στυλ στην κορυφή της ιεραρχίας.
Παράδειγμα:
// Θέμα
συνθ θέμα = δημιουργία θέματος({
συστατικά: {
Κουμπί: {
ContainerStyle: {
περιθώριο: 10,
χρώμα του φόντου: "το κόκκινο",
},
},
},
});
//Component
<ThemeProvider theme={theme}>
<Τίτλος κουμπιού="Κουμπί με θέμα" χρώμα ={"δευτερεύων"}/>
</ThemeProvider>
Στον παραπάνω κώδικα, το χρώμα φόντου του Κουμπί συστατικό θα είναι δευτερεύον, το οποίο είναι ένα πράσινο χρώμα σε αντίθεση με το στυλ θέματος του κόκκινου.
ΕΝΑ θέμα Το αντικείμενο αποστέλλεται με RNE, παρέχοντας πολλές προεπιλεγμένες τιμές χρωμάτων από το κουτί. Το RNE παρέχει διάφορες επιλογές όπως το Θέμα Καταναλωτή συστατικό, useTheme() γάντζος, και makeStyles() γεννήτρια αγκίστρου για πρόσβαση στο θέμα αντικείμενο.
ο Θέμα Καταναλωτή συστατικό θα τυλίξει τα στοιχεία που αποδίδονται με μια ανώνυμη συνάρτηση. Αυτή η ανώνυμη λειτουργία λαμβάνει θέμα ως στήριγμα.
Μπορείτε να αποκτήσετε πρόσβαση στις τιμές θέματος με a στυλ στήριγμα:
εισαγωγή Αντιδρώ από 'αντιδρώ';
εισαγωγή { Κουμπί } από 'react-native';
εισαγωγή { ThemeConsumer } από '@rneui/themed';
συνθ MyComponent = () => (
<Θέμα Καταναλωτή>
{({ θέμα }) => (
<Τίτλος κουμπιού="Θέμα Καταναλωτή" style={{ color: theme.colors.primary }} />
)}
</ThemeConsumer>
)
Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το useTheme() γάντζο για πρόσβαση στο θέμα μέσα σε ένα στοιχείο.
Για παράδειγμα:
εισαγωγή Αντιδρώ από 'αντιδρώ';
εισαγωγή { Κουμπί } από 'react-native';
εισαγωγή { useTheme } από '@rneui/themed';συνθ MyComponent = () => {
συνθ { theme } = useTheme();
ΕΠΙΣΤΡΟΦΗ (
<Προβολή style={styles.container}>
<Τίτλος κουμπιού="useTheme" style={{ color: theme.colors.primary }}/>
</View>
);
};
ο makeStyles() Η γεννήτρια αγκίστρου είναι παρόμοια με τη χρήση φύλλου στυλ για τον ορισμό στυλ. Όπως το φύλλο στυλ, διαχωρίζει οποιοδήποτε στυλ από το εξωτερικό του στοιχείου που αποδίδεται. Αναφορά στο θέμα αντικείμενο μέσα σε ένα στήριγμα στυλ εξαρτημάτων.
Επέκταση θεμάτων με TypeScript
Το RNE υποστηρίζει δηλώσεις TypeScript στην εφαρμογή σας, επιτρέποντας στους προγραμματιστές να επωφεληθούν από αυτές τα οφέλη από τη χρήση της γλώσσας TypeScript.
Με TypeScripts συγχώνευση δήλωσης, μπορείτε να επεκτείνετε τους ορισμούς θεμάτων για να προσθέσετε προσαρμοσμένα χρώματα και στηρίγματα τόσο για τα προεπιλεγμένα όσο και για προσαρμοσμένα στοιχεία του RNE.
Για να επεκτείνετε τα χρώματα μέσα στο αντικείμενο θέματος, θα δημιουργήσετε ένα ξεχωριστό TypeScript.ts αρχείο και δηλώστε τη μονάδα @rneui/θεματικό μέσα στο αρχείο.
Στη συνέχεια, μπορείτε να προσθέσετε τα προσαρμοσμένα χρώματα και να καθορίσετε τον αναμενόμενο τύπο τους:
// **TypeScript.ts**εισαγωγή '@rneui/themed';
δηλώνω μονάδα μέτρησης '@rneui/themed' {
εξαγωγή διεπαφήΧρωματιστά{
primarLight: συμβολοσειρά;
δευτερεύον φως: συμβολοσειρά;
}
}
Με αυτήν την ενότητα, μπορείτε να μεταβιβάσετε τα προσαρμοσμένα σας χρώματα ως τιμές κατά τη δημιουργία ενός θέματος:
συνθ θέμα = δημιουργία θέματος({
χρώματα: {
πρωτεύον φως: "",
δευτερεύον φως: ""
},
})
Τώρα τα προσαρμοσμένα χρώματα αποτελούν μέρος του αντικειμένου θέματός σας και μπορείτε να τα προσπελάσετε χρησιμοποιώντας ThemeProvider, ThemeConsumer, ή το useTheme() άγκιστρο.
RNE Components vs. React Native Components
Οι βιβλιοθήκες στοιχείων όπως το React Native Elements είναι ένας πολύ καλός τρόπος για να ξεκινήσετε γρήγορα μια εφαρμογή. Διατηρούν την εστίασή σας στη δομή της εφαρμογής και όχι στις λεπτομέρειες του σχεδιασμού. Η χρήση στοιχείων RNE έναντι στοιχείων React Native θα πρέπει να καθοδηγείται κυρίως από την εστίαση της εφαρμογής σας και τον χρόνο ανάπτυξης που διαθέτετε.
